Асинхронное ожидание спасения

Раньше я редко использовал async await в своем коде JavaScript, сначала я всегда использовал метод fetch для получения любых необходимых мне данных. По прошествии времени я снова начал смотреть на это, и оказалось, что это не так уж сложно реализовать.

Здесь я хотел бы объяснить async await как можно проще. Попробуйте посмотреть на этот код.

function usingFetch() {
    fetch('https://randomuser.me/api/')
        .then(parse => parse.json())
        .then(result => {
            // do something with the result
        }
}

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

Попробуйте посмотреть на код ниже для сравнения.

async function useAsync() {
  let getData = await fetch('https://randomuser.me/api/');
  let result = await getData.json();
  // do something with result
}

В строке 2 ключевое слово await перед fetch означает, что нам нужно дождаться завершения процесса выборки, чтобы мы могли выполнить следующую строку после этого. Тот же процесс происходит в строке 3: нам нужно сначала дождаться завершения синтаксического анализа данных, чтобы выполнить следующую строку.

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

Заключение

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