|
|
@@ -0,0 +1,230 @@
|
|
|
+// const gql = (url, query, variables={}) =>
|
|
|
+// fetch(url, {
|
|
|
+// method: 'POST',
|
|
|
+// body: JSON.stringify({query,variables}),
|
|
|
+// headers: {
|
|
|
+// 'Content-Type': 'application/json',
|
|
|
+// }
|
|
|
+// }).then((res) => res.json());
|
|
|
+
|
|
|
+// (async () => {
|
|
|
+// console.log(await gql(`http://shop-roles.asmer.fs.a-level.com.ua/graphql`, `query cats{
|
|
|
+// CategoryFind(query:"[{}]"){
|
|
|
+// name goods{
|
|
|
+// name
|
|
|
+// }
|
|
|
+// }
|
|
|
+// }`))
|
|
|
+// })()
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+// const getGQL = url =>
|
|
|
+// (query, variables) => fetch(url, {
|
|
|
+// //метод
|
|
|
+// method: 'POST',
|
|
|
+// headers: {
|
|
|
+// //заголовок content-type
|
|
|
+// "Content-Type": "application/json"
|
|
|
+// },
|
|
|
+// body: JSON.stringify({query, variables})
|
|
|
+// //body с ключами query и variables
|
|
|
+
|
|
|
+// }).then(res => res.json()).then(
|
|
|
+// obj => {
|
|
|
+// let login = obj.data.login;
|
|
|
+// console.log(login);
|
|
|
+
|
|
|
+// if (!login) {
|
|
|
+// throw new Error('login undefind');
|
|
|
+// }
|
|
|
+// return login;;
|
|
|
+// })
|
|
|
+
|
|
|
+// //расковырять data, если все ок - отдать data.login или data.CategoryFindOne, или шо там еще
|
|
|
+// //если есть errors и нет data, то выбросить исключение и тем самым зареджектить промис
|
|
|
+
|
|
|
+// .catch(console.log)
|
|
|
+
|
|
|
+// const gql = getGQL('http://shop-roles.asmer.fs.a-level.com.ua/graphql');
|
|
|
+// gql(`
|
|
|
+// query NameForMe1($login:String, $password:String){
|
|
|
+// login(login:$login, password:$password)
|
|
|
+// }
|
|
|
+// `, {login: 'tst', password: '123'})
|
|
|
+
|
|
|
+
|
|
|
+//Task Светофор
|
|
|
+
|
|
|
+// const div = document.createElement('div');
|
|
|
+// div.id = 'trafficLights';
|
|
|
+// div.style.backgroundColor = 'rgb(59, 52, 52)';
|
|
|
+// div.style.width = '200px';
|
|
|
+// div.style.height = '350px';
|
|
|
+
|
|
|
+// const divRed = document.createElement('div');
|
|
|
+// divRed.id = 'red';
|
|
|
+// divRed.style.backgroundColor = 'rgb(232, 235, 209)';
|
|
|
+// divRed.style.width = '90px';
|
|
|
+// divRed.style.height = '90px';
|
|
|
+// divRed.style.marginLeft = "27%";
|
|
|
+// divRed.style.marginTop = "7%";
|
|
|
+// divRed.style.display = 'inline-block';
|
|
|
+// divRed.style.borderRadius = '50px';
|
|
|
+
|
|
|
+// const divOrange = document.createElement('div');
|
|
|
+// divOrange.id = 'orange';
|
|
|
+// divOrange.style.backgroundColor = 'rgb(232, 235, 209)';
|
|
|
+// divOrange.style.width = '90px';
|
|
|
+// divOrange.style.height = '90px';
|
|
|
+// divOrange.style.marginLeft = "27%";
|
|
|
+// divOrange.style.marginTop = "10%";
|
|
|
+// divOrange.style.borderRadius = '50px';
|
|
|
+
|
|
|
+// const divGreen = document.createElement('div');
|
|
|
+// divGreen.id = 'green';
|
|
|
+// divGreen.style.backgroundColor = 'rgb(232, 235, 209)';
|
|
|
+// divGreen.style.width = '90px';
|
|
|
+// divGreen.style.height = '90px';
|
|
|
+// divGreen.style.marginLeft = "27%";
|
|
|
+// divGreen.style.marginTop = "10%";
|
|
|
+// divGreen.style.borderRadius = '50px';
|
|
|
+
|
|
|
+// document.body.append(div);
|
|
|
+// div.append(divRed);
|
|
|
+// div.append(divOrange);
|
|
|
+// div.append(divGreen);
|
|
|
+
|
|
|
+// const delay = ms => new Promise(ok => setTimeout(() => ok(ms), ms))
|
|
|
+
|
|
|
+// async function trafficLight(){
|
|
|
+// while (true){
|
|
|
+// divGreen.style.backgroundColor = 'green';//включаем зеленый
|
|
|
+// await delay(6000);
|
|
|
+// divGreen.style.backgroundColor = 'rgb(232, 235, 209)';
|
|
|
+// divOrange.style.backgroundColor = 'rgb(237, 138, 57)';// включаем желтый
|
|
|
+// await delay(2000);
|
|
|
+// divOrange.style.backgroundColor = 'rgb(232, 235, 209)';
|
|
|
+// divRed.style.backgroundColor = 'rgb(235, 12, 23)'; //включаем красный
|
|
|
+// await delay(3500);
|
|
|
+// divRed.style.backgroundColor = 'rgb(232, 235, 209)';
|
|
|
+// }
|
|
|
+// }
|
|
|
+// trafficLight();
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ //Task domEventPromise
|
|
|
+
|
|
|
+
|
|
|
+// const button = document.createElement('button');
|
|
|
+// document.body.appendChild(button).innerText = "Click";
|
|
|
+
|
|
|
+// function domEventPromise (knopka, eventName) {
|
|
|
+// return new Promise((resolve) => {
|
|
|
+// knopka.addEventListener(eventName, function getEvent(e) {
|
|
|
+// this.removeEventListener(eventName, getEvent);
|
|
|
+// resolve(e);
|
|
|
+// });
|
|
|
+// })
|
|
|
+// }
|
|
|
+
|
|
|
+// domEventPromise(button, 'click').then((e) => {
|
|
|
+// console.log('event click happens', e);
|
|
|
+// })
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+// PedestrianTrafficLight
|
|
|
+
|
|
|
+
|
|
|
+// const div = document.createElement('div');
|
|
|
+// div.id = 'trafficLights';
|
|
|
+// div.style.backgroundColor = 'rgb(59, 52, 52)';
|
|
|
+// div.style.width = '200px';
|
|
|
+// div.style.height = '350px';
|
|
|
+
|
|
|
+// const divRed = document.createElement('div');
|
|
|
+// divRed.id = 'red';
|
|
|
+// divRed.style.backgroundColor = 'rgb(232, 235, 209)';
|
|
|
+// divRed.style.width = '90px';
|
|
|
+// divRed.style.height = '90px';
|
|
|
+// divRed.style.marginLeft = "27%";
|
|
|
+// divRed.style.marginTop = "7%";
|
|
|
+// divRed.style.display = 'inline-block';
|
|
|
+// divRed.style.borderRadius = '50px';
|
|
|
+
|
|
|
+// const divGreen = document.createElement('div');
|
|
|
+// divGreen.id = 'green';
|
|
|
+// divGreen.style.backgroundColor = 'rgb(232, 235, 209)';
|
|
|
+// divGreen.style.width = '90px';
|
|
|
+// divGreen.style.height = '90px';
|
|
|
+// divGreen.style.marginLeft = "27%";
|
|
|
+// divGreen.style.marginTop = "10%";
|
|
|
+// divGreen.style.borderRadius = '50px';
|
|
|
+
|
|
|
+// document.body.append(div);
|
|
|
+// div.append(divRed);
|
|
|
+// div.append(divGreen);
|
|
|
+
|
|
|
+// const delay = ms => new Promise(ok => setTimeout(() => ok(ms), ms))
|
|
|
+
|
|
|
+// const button = document.createElement('button');
|
|
|
+// document.body.appendChild(button).innerText = "Click";
|
|
|
+// button.style.marginTop = "30px";
|
|
|
+
|
|
|
+// function domEventPromise (knopka, eventName) {
|
|
|
+// return new Promise((resolve) => {
|
|
|
+// knopka.addEventListener(eventName, function getEvent(e) {
|
|
|
+// this.removeEventListener(eventName, getEvent);
|
|
|
+// button.setAttribute('disabled', true);
|
|
|
+// divRed.style.backgroundColor = 'rgb(232, 235, 209)';
|
|
|
+// divGreen.style.backgroundColor = 'green';
|
|
|
+// delay(2000).then(() => button.removeAttribute('disabled'));
|
|
|
+// resolve(e);
|
|
|
+// })
|
|
|
+// })
|
|
|
+// }
|
|
|
+
|
|
|
+// async function trafficLight(){
|
|
|
+// while (true){
|
|
|
+// divRed.style.backgroundColor = 'rgb(232, 235, 209)';
|
|
|
+// divGreen.style.backgroundColor = 'green';
|
|
|
+// await Promise.race([delay(2000), domEventPromise(button, 'click')]);
|
|
|
+// divRed.style.backgroundColor = 'rgb(235, 12, 23)';
|
|
|
+// divGreen.style.backgroundColor = 'rgb(232, 235, 209)';
|
|
|
+// await Promise.race([delay(2000), domEventPromise(button, 'click')]);
|
|
|
+// }
|
|
|
+// }
|
|
|
+
|
|
|
+// trafficLight();
|
|
|
+
|
|
|
+
|
|
|
+// Task speedtest
|
|
|
+
|
|
|
+const delay = ms => new Promise(ok => setTimeout(() => ok(ms), ms));
|
|
|
+
|
|
|
+async function speedtest(getPromise, count,parallel=1){
|
|
|
+ let timedurationStart = performance.now();
|
|
|
+ let arrFetch = [];
|
|
|
+ for (let q = 0; q < parallel; q++) {
|
|
|
+ arrFetch[q] = await getPromise();
|
|
|
+ }
|
|
|
+const timeBetween = performance.now();
|
|
|
+ for (let i = 0; i < count; i++) {
|
|
|
+ await Promise.all(arrFetch);
|
|
|
+ }
|
|
|
+ let timedurationEnd = performance.now();
|
|
|
+ return {
|
|
|
+ duration: timedurationEnd - timedurationStart,
|
|
|
+ querySpeed: count / (timeBetween - timedurationStart),
|
|
|
+ queryDuration: (timeBetween - timedurationStart) / count,
|
|
|
+ parallelSpeed: (count * parallel)/ (timedurationEnd - timedurationStart),
|
|
|
+ parallelDuration: (timedurationEnd - timedurationStart) / (count * parallel),
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+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))
|
