Асинхронный JavaScript
Сухушин Александр USERSTORY
Сухушин Александр
Сухушин Александр USERSTORY
Асинхронность — не совпадение с чем-либо во времени; неодномоментность, неодновременность, несинхронность — характеризует процессы, не совпадающие во времени.
В компьютерном программировании, асинхронные событиями являются те, которые возникают независимо от основного потока выполнения программы. Асинхронные действия — действия, выполненные в неблокирующем режиме, что позволяет основному потоку программы продолжить обработку.
one();
function one() {
console.log('One');
two();
}
function two() {
console.log('Two');
three();
}
function three() {
console.log('Three');
}
one();
function one() {
console.log('One');
setTimeout(two, 20000);
three();
}
function two() {
console.log('Two');
}
function three() {
console.log('Three');
console.log('Three');
console.log('Three');
console.log('Three');
console.log('Three');
console.log('Three');
console.log('Three');
console.log('Three');
console.log('Three');
console.log('Three');
}
$.on('button', 'click', onClick);
function onClick() {
console.log('onClick');
setTimeout(timer, 15000);
}
function timer() {
console.log('timer');
}
console.log("One");
console.log("Two");
console.log("Three");
setTimeout(timer, 20000);
console.log("Four");
console.log("Five");
function asyncFn(...params, callback) {
const result = { // async code };
callback(result);
}
function callback(result) { // sync code }
Promise — это специальный объект, который содержит своё состояние. Вначале pending («ожидание»), затем – одно из: resolved («выполнено успешно») или rejected («выполнено с ошибкой»).
function asyncFn(...params) {
return new Promise(function (resolve, reject) {
const {error, result, status} = { // async code };
if ('success' === status) { resolve(result); }
if ('fail' === status) { reject(error); }
});
}
asyncFn(...params)
.then(function(result) { // sync code })
.catch(function(error) { // sync code });
function asyncFn() {
return Promise.resolve(2);
}
asyncFn()
.then(function (value) { return value + 2; }) // Promise {<resolved>: 4}
.then(function (value) { return 3 * value; }) // Promise {<resolved>: 12}
.then(function (value) { return value / 2; }); // Promise {<resolved>: 6}
Promise.resolve(1); // Promise {<resolved>: 1}
Promise.resolve(Promise.resolve(1)); // Promise {<resolved>: 1}
Promise.resolve(Promise.reject(1)); // Promise {<rejected>: 1}
Promise.reject(Promise.resolve(1)); // Promise {<rejected>: 1}
Promise.reject(Promise.reject(1)); // Promise {<rejected>: Promise {<rejected>: 1}}
(function() {
return 1;
})() // 1
(async function() {
return 1;
})() // Promise {<resolved>: 1}
(async function() {
throw 1;
})() // Promise {<rejected>: 1}
(function() {
return Promise.resolve(1);
})() // Promise {<resolved>: 1}
(function() {
return Promise.reject(1);
})() // Promise {<rejected>: 1}
(async function() {
return Promise.resolve(1);
})() // Promise {<resolved>: 1}
(async function() {
return Promise.reject(1);
})() // Promise {<rejected>: 1}
// sync code
const result = await asyncFn(...params);
// sync code
async function() {
const result = await asyncFn(...params);
return result;
} // Promise {<resolved>: result}
async function() {
try {
const result = await asyncFn(...params);
return result;
} catch(error) {
// handle error
}
}
Реализовать функцию timeout - аналог setTimeout, которая бы возвращала Promise.
function timeout(ms) { // code }
timeout(3000).then(function() {
console.log('Прошло 3000 мс.');
});
Реализовать функцию sleep, которая бы задерживала выполнение асинхронной функции.
function sleep(ms) { // code }
fetch('https://randomuser.me/api/?noinfo')
.then(sleep(3000))
.then((response) => {
console.log('Задержка - 3000 мс');
});
https://gitlab.userstory.ru/userstory-temp/frontend-test-lesson-4
Загрузить список пользователей (/api/v1/user) и список комментариев (/api/v1/comment).
Вывести на странице всех пользователей с их комментариями.
https://gitlab.userstory.ru/userstory-temp/frontend-test-lesson-4
Загрузить список пользователей (/api/v1/user).
Загрузить список комментариев (/api/v1/comment) только для активных пользователей.
Вывести на странице активных пользователей с их комментариями.