5 причин, по которым JavaScript async/ждать за обещания

Nodejs поддерживает Async/wait of the Box с версии 7.6. Я считаю, что это одно из самых больших дополнений к JS с 2017 года. Если вы еще не пробовали это, вот 5 основных причин причин примеров, почему вы должны сразу же принять это и никогда не оглядываться назад.

Что такое асинхронное/ждет

Async/wait – это новый способ написать асинхронный код. Предыдущими альтернативами для асинхронного кода являются обратные вызовы и обещания. Async/wait на самом деле просто синтаксис, построенный на вершине обещаний. Он не может быть использован с простыми обратными вызовами или обратными вызовами узлов.

Синтаксис для асинхронного/ожидания и обещаний

const makeRequest = () =>
  getJSON()
    .then(data => {
      console.log(data)
      return "done"
    })

makeRequest()

И вот как это выглядит с асинхронным/ждать:

const makeRequest = async () => {
  console.log(await getJSON())
  return "done"
}

makeRequest()

Почему это лучше?

1. Чистый код Если вы сравниваете код выше, то код Async/await намного чище, сравните с обещаниями

2. Обработка ошибок Async/wait позволяет наконец обрабатывать как синхронные, так и асинхронные ошибки с одной и той же конструкцией, старая старая старая Попробуйте поймать

const makeRequest = () => {
  try {
    getJSON()
      .then(result => {
        // this parse may fail
        const data = JSON.parse(result)
        console.log(data)
      })
  } catch (err) {
    console.log(err)
  }

Теперь посмотрите на тот же код с Async/Wait.

const makeRequest = async () => {
  try {
    const data = JSON.parse(await getJSON())
    console.log(data)
  } catch (err) {
    console.log(err)
  }
}

3. Вернуть условные данные

const makeRequest = () => {
  return getJSON()
    .then(data => {
      if (data.needsAnotherRequest) {
        return makeAnotherRequest(data)
          .then(moreData => {
            console.log(moreData)
            return moreData
          })
      } else {
        console.log(data)
        return data
      }
    })
}

Приведенный выше пример является таким грязным, а вложенный синтаксис действительно сложно понять.

Посмотрите на тот же код с Async/Wait.

const makeRequest = async () => {
  const data = await getJSON()
  if (data.needsAnotherRequest) {
    const moreData = await makeAnotherRequest(data);
    console.log(moreData)
    return moreData
  } else {
    console.log(data)
    return data    
  }
}

4. Промежуточные значения

У вас может быть ситуация, когда вы называете обещание1 а затем используйте то, что он возвращает, чтобы позвонить обещание2 , затем используйте результаты обоих обещаний, чтобы вызвать обещание3 Анкет Ваш код, скорее всего, выглядел так

const makeRequest = () => {
  return promise1()
    .then(value1 => {
      // do something
      return promise2(value1)
        .then(value2 => {
          // do something          
          return promise3(value1, value2)
        })
    })
}

Эта же логика становится очень простой с асинхронным/ожидающим.

const makeRequest = async () => {
  const value1 = await promise1()
  const value2 = await promise2(value1)
  return promise3(value1, value2)
}

5. Отладка Убийственное преимущество при использовании Async/ожидание состоит в том, что его гораздо проще отлаживать. Обещания отладки всегда были такой болью по двум основным причинам:

1). Вы не можете установить точки останова в функциях со стрелками, которые возвращают выражения. 2). Если вы установите точку останова внутри блока .Then и используете ярлыки отладки, такие как шаг, отладчик не перейдет к следующему. Тогда он только пройдет через синхронный код

const makeRequest = () => {
   return callAPromise()
     .then(() => callAPromise())
     .then(() => callAPromise())
}

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

const makeRequest = async() => {
   await callAPromise()
   await callAPromise()
}

Оригинал: “https://dev.to/deadwin19/5-reasons-why-javascript-async-await-over-promises-1if3”