Жизнь была непростой, когда мы использовали обратные вызовы и обещания, вспомните время, когда вы застряли в аду обратных вызовов! да верно, мы даже не хотим думать о том времени.

Но теперь у нас есть асинхронные функции, ну, я не говорю, что асинхронные функции облегчают нашу жизнь, но да, они могут быть намного проще для написания асинхронного JavaScript.

Асинхронные функции

асинхронные функции используют ключевое слово async , его можно использовать как с обычной функцией, так и со стрелочной функцией.

async function functionName (argument){
    // asychronous action
}
const functionName = async (argument) => {
    // asychronous action
}

Прежде чем идти дальше, давайте немного обсудим промисы.

Как описывает Эрик Эллиот в своей статье о промисах¹, обещание — это объект, который может дать одно значение когда-нибудь в будущем, то есть либо разрешенное значение, либо отклоненное значение, либо причину, почему это не решено.

Основное внимание здесь уделяется словам «может произвести» и «какое-то время».

Давайте посмотрим, как работают промисы, поэтому подробно познакомимся с сутью этих двух ключевых слов.

Обещание возвращается синхронно в одном из трех возможных состояний:

  • Выполнено: будет вызвано onFulfilled().
  • Отклонено: будет вызван onRejected().
  • В ожидании: еще не выполнено или отклонено.

Возврат асинхронной функции

Какое бы значение вы ни return получили от асинхронной функции, оно всегда будет обещанием. Вот как асинхронная функция решает проблему синхронно.

Например,

async function num(){
    return something
}

равно:

function num(){
    return Promise.resolve(something)
}

Ожидайте оператора

Оператор await можно использовать только внутри async function , он используется для ожидания, пока promise определит одно состояние.

Синтаксис:

[rv] = await expression;

Оператор await останавливает выполнение функции async до тех пор, пока promise не будет разрешено или promise не будет установлено в одном из состояний, то есть выполнено или отклонено.

Обработка ошибок

Если promise разрешается нормально, то await возвращает результат, но в случае отклонения выдает ошибку, как и оператор throw. Например,

async functuion num() {
    await Promise.reject(new Erroe("ERROR"));
}

равно:

async function num() {
    throw new Error("ERROR");
}

В этой ситуации await выдает ошибку, и мы можем обработать эту ошибку с помощью оператора try..catch. как,

async function f() {   
    try {     
       let response = await fetch('/no-user-here');     
       let user = await response.json();   
     } catch(err){     
       // catches errors both in fetch and response.json     
       alert(err);  
    }
 } 
 f();

Резюме

Ключевое слово async имеет два эффекта для функции:

  1. Заставляет всегда возвращать обещание.
  2. Позволяет использовать в нем await.

Ключевое слово await перед обещанием заставляет JavaScript ждать, пока это обещание не установится², а затем:

  1. Если это ошибка, генерируется исключение — такое же, как если бы throw error вызывалось именно в этом месте.
  2. В противном случае он возвращает результат.

Это все, что вам нужно знать об основных асинхронных функциях, надеюсь, эта статья поможет вам.

[1] Освойте JavaScript Интервью: что такое обещание?

https://medium.com/javascript-scene/master-the-javascript-interview-what-is-a-promise-27fc71e77261#:~:text=A%20promise%20is%20an%20object,%2C%20a %20network%20error%20произошла).&text=Promises%20являются%20нетерпеливыми%2C%20означающими%20что%20promise%20конструктор%20является%20вызванным.

[2] https://javascript.info/async-await