123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279 |
- // ДЗ: Способы общения с серверами. REST, GraphQL и JWT.
- // задание 1 Светофор
- {
- const delay = (ms) => new Promise((ok) => setTimeout(() => ok(ms), ms));
- async function trafficLight() {
- const greenLight = document.getElementById('green');
- const yellowLight = document.getElementById('yellow');
- const redLight = document.getElementById('red');
- while (true) {
- // включаем зеленый
- greenLight.style.backgroundColor = 'green';
- await delay(время_зеленого);
- // включаем желтый
- greenLight.style.backgroundColor = 'gray';
- yellowLight.style.backgroundColor = 'yellow';
- await delay(время_желтого);
- // включаем красный
- yellowLight.style.backgroundColor = 'gray';
- redLight.style.backgroundColor = 'red';
- await delay(время_красного);
- // выключаем красный
- redLight.style.backgroundColor = 'gray';
- }
- }
- }
- {
- // Stage 2
- const delay = (ms) => new Promise((ok) => setTimeout(() => ok(ms), ms));
- async function trafficLight(greenLight, yellowLight, redLight, greenTime, yellowTime, redTime) {
- while (true) {
- // включаем зеленый
- greenLight.style.backgroundColor = 'green';
- await delay(greenTime);
- // включаем желтый
- greenLight.style.backgroundColor = 'gray';
- yellowLight.style.backgroundColor = 'yellow';
- await delay(yellowTime);
- // включаем красный
- yellowLight.style.backgroundColor = 'gray';
- redLight.style.backgroundColor = 'red';
- await delay(redTime);
- // выключаем красный
- redLight.style.backgroundColor = 'gray';
- }
- }
- // использование функции
- const greenLight = document.getElementById('green');
- const yellowLight = document.getElementById('yellow');
- const redLight = document.getElementById('red');
- trafficLight(greenLight, yellowLight, redLight, 2000, 1000, 3000);
- }
- // задание 2 PedestrianTrafficLight
- {
- const delay = (ms) => new Promise((ok) => setTimeout(() => ok(ms), ms));
- async function pedestrianLight(greenLight, redLight, greenTime, redTime) {
- while (true) {
- // включаем зеленый
- greenLight.style.backgroundColor = 'green';
- await delay(greenTime);
- // включаем красный
- greenLight.style.backgroundColor = 'gray';
- redLight.style.backgroundColor = 'red';
- await delay(redTime);
- }
- }
- // использование функции
- const greenLight = document.getElementById('green');
- const redLight = document.getElementById('red');
- pedestrianLight(greenLight, redLight, 5000, 2000);
- }
- {
- // Stage 2
- const delay = (ms) => new Promise((ok) => setTimeout(() => ok(ms), ms));
- function domEventPromise(element, event) {
- return new Promise((resolve) => {
- element.addEventListener(event, resolve, { once: true });
- });
- }
- async function pedestrianLight(greenLight, redLight, button, greenTime, redTime) {
- while (true) {
- // включаем зеленый
- greenLight.style.backgroundColor = 'green';
- redLight.style.backgroundColor = 'gray';
- // ожидаем событие кнопки или истечение времени
- await Promise.race([domEventPromise(button, 'click'), delay(greenTime)]);
- // включаем красный
- greenLight.style.backgroundColor = 'gray';
- redLight.style.backgroundColor = 'red';
- // ожидаем событие кнопки или истечение времени
- await Promise.race([domEventPromise(button, 'click'), delay(redTime)]);
- }
- }
- // использование функции
- const greenLight = document.getElementById('green');
- const redLight = document.getElementById('red');
- const button = document.getElementById('button');
- pedestrianLight(greenLight, redLight, button, 5000, 2000);
- }
- {
- // Stage 3
- const delay = (ms) => new Promise((ok) => setTimeout(() => ok(ms), ms));
- function domEventPromise(element, event) {
- return new Promise((resolve) => {
- element.addEventListener(event, resolve, { once: true });
- });
- }
- async function pedestrianLight(greenLight, redLight, button, greenTime, redTime, buttonDelay) {
- while (true) {
- // включаем зеленый
- greenLight.style.backgroundColor = 'green';
- redLight.style.backgroundColor = 'gray';
- // ожидаем событие кнопки, истечение времени или задержку кнопки
- await Promise.race([
- domEventPromise(button, 'click').then(() => delay(buttonDelay)),
- delay(greenTime),
- ]);
- // включаем красный
- greenLight.style.backgroundColor = 'gray';
- redLight.style.backgroundColor = 'red';
- // ожидаем событие кнопки, истечение времени или задержку кнопки
- await Promise.race([
- domEventPromise(button, 'click').then(() => delay(buttonDelay)),
- delay(redTime),
- ]);
- }
- }
- }
- // задание 3 speedtest
- {
- async function speedtest(getPromise, count, parallel = 1) {
- let startTime = Date.now();
- let parallelDuration = 0;
- let queryDuration = 0;
- for (let i = 0; i < count; i++) {
- const promises = [];
- for (let j = 0; j < parallel; j++) {
- promises.push(getPromise());
- }
- const startParallelTime = Date.now();
- await Promise.all(promises);
- parallelDuration += Date.now() - startParallelTime;
- queryDuration += parallelDuration / parallel;
- }
- const duration = Date.now() - startTime;
- return {
- duration,
- querySpeed: queryDuration / count / 1000,
- queryDuration: queryDuration / count,
- parallelSpeed: parallelDuration / duration / 1000,
- parallelDuration: parallelDuration / count,
- };
- }
- // использование функции
- speedtest(() => delay(1000), 10, 10).then((result) => console.log(result));
- speedtest(() => fetch('http://swapi.dev/api/people/1').then((res) => res.json()), 10, 5).then(
- (result) => console.log(result),
- );
- }
- // задание 4 gql
- {
- async function gql(endpoint, query, variables) {
- try {
- const response = await fetch(endpoint, {
- method: 'POST',
- headers: {
- 'Content-Type': 'application/json',
- Accept: 'application/json',
- },
- body: JSON.stringify({
- query,
- variables,
- }),
- });
- return response.json();
- } catch (error) {
- console.error(error);
- return null;
- }
- }
- // использование функции
- (async () => {
- const catQuery = `query cats($q: String){
- CategoryFind(query: $q){
- _id name
- }
- }`;
- const cats = await gql('http://shop-roles.node.ed.asmer.org.ua/graphql', catQuery, {
- q: '[{}]',
- });
- console.log(cats); // список категорий с _id name и всем таким прочим
- const loginQuery = `query login($login:String, $password:String){
- login(login:$login, password:$password)
- }`;
- const token = await gql('http://shop-roles.node.ed.asmer.org.ua/graphql', loginQuery, {
- login: 'test457',
- password: '123123',
- });
- console.log(token);
- })();
- }
- // задание 5 jwtDecode
- {
- function jwtDecode(token) {
- if (!token) return;
- const [header, payload, signature] = token.split('.');
- if (!header || !payload || !signature) return;
- try {
- const decodedPayload = atob(payload);
- const data = JSON.parse(decodedPayload);
- return data;
- } catch {
- return;
- }
- }
- }
- {
- // использование:
- const token =
- 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOnsiaWQiOiI2MzIyMDVhZWI3NGUxZjVmMmVjMWEzMjAiLCJsb2dpbiI6InRlc3Q0NTciLCJhY2wiOlsiNjMyMjA1YWViNzRlMWY1ZjJlYzFhMzIwIiwidXNlciJdfSwiaWF0IjoxNjY4MjcyMTYzfQ.rxV1ki9G6LjT2IPWcqkMeTi_1K9sb3Si8vLB6UDAGdw';
- console.log(jwtDecode(token));
- // {
- // "sub": {
- // "id": "632205aeb74e1f5f2ec1a320",
- // "login": "test457",
- // "acl": [
- // "632205aeb74e1f5f2ec1a320",
- // "user"
- // ]
- // },
- // "iat": 1668272163
- // }
- try {
- console.log(jwtDecode()); // undefined
- console.log(jwtDecode('дичь')); // undefined
- console.log(jwtDecode('ey.ey.ey')); //undefined
- console.log('до сюда доработало, а значит jwtDecode не матерился в консоль красным цветом');
- } finally {
- console.log('ДЗ, видимо, окончено');
- }
- }
|