Простое обещание возврата с использованием async-await или обещание на самом деле не делает функцию асинхронной.async-await или обещание использовать обработанные реальные асинхронные функции Javascript .
Асинхронные функции могут быть только setTimeout, setInterval, requestAnimationFrame и другие функции для более полной асинхронной функции, проверьте этот пост Как создать асинхронную функцию в javascript? .
Объясним это с помощью двух примеров, один с async-await, а другой с promise и чем они отличаются:
- обещание:
`` `
function main() {
return new Promise( resolve => {
console.log(1);
resolve(true);
});
}
main()
.then( result => { // result will have whatever main promise will resolve.
console.log(2);
});
console.log(3);
` ``
Если использование обещания или возвращающего обещания сделает функцию асинхронной, то порядок вывода будет
3
1
2
Однако простое возвращение обещания не делает функцию асинхронной, поэтому вывод равен
1
3
// Asynchronous happen here
2
Теперь Почему 2 после 3? , поскольку только асинхронная функция Javascript можетбыть асинхронным и переходит в стек вызовов, а затем в очередь событий, тогда функция обратного вызова .then( function() {}) является истинной асинхронной функцией javascript и, следовательно, такого поведения. Обратите внимание, что вызов main () возвращает функцию обещания. Это будет использоваться в разнице между обещанием и асинхронным ожиданием.
async-await
`` `
async function main() {
console.log(1);
return true;
}
main()
.then( result => { // Result have whatever main function return.
console.log(2);
});
console.log(3);
` ``
Аналогично приведенному выше, это также выдает
1
3
// Asynchronous happen here
2
В чем разница между async-await и обещанием? async-await может обрабатывать обещание только с использованием await и любой асинхронной функцией, которая не возвращает обещание и на месте, использует функцию обратного вызова, такую как setTimeout,Функции setInterval, request.js, https.js и т. д. не могут быть обработаны с помощью async-await.Для обработки такой функции мы можем использовать только Promise, так как Promise использует функцию обратного вызова, таким образом, способность обрабатывать любую асинхронную функцию:
function timeout() {
return new Promise( (resolve, reject) => {
console.log(1);
setTimeout( function() {
console.log(2);
resolve(true);
}, 1000);
});
}
async function main() {
console.log(3);
let result = await timeout();
console.log(4);
return result;
}
main()
.then( result => {
console.log(5);
});
console.log(6);
Как и ожидалось при достижении асинхронной функции setTimeout функция обратного вызова была помещена в очередь событий ипродолжить обработку, снова в ожидании асинхронно ( не функция , но ведет себя как .then()), помещенной в очередь событий.и остальные все продолжаются, поэтому вывод:
3
1
6
// asynchronous happens here
2
4
5
Последний пример для подробного объяснения await, удаленного использования setTimeout из последнего примера:
function timeout() {
return new Promise( (resolve, reject) => {
console.log(1);
console.log(2);
resolve(true);
});
}
async function main() {
console.log(3);
let result = await timeout();
console.log(4);
return result;
}
main()
.then( result => {
console.log(5);
});
console.log(6);
Как ожидается, вывод:
3
1
2
6
// Asynchronous await here
4
5
Поскольку async-await ожидает разрешения обещания, его нельзя использовать с асинхронной функцией обратного вызова, иначе async-await делает код более понятным и приятным, а также уменьшает цепочки обратных вызовов .then().Обещание должно использоваться для выполнения асинхронных функций обратного вызова и предотвращения ада обратного вызова.