Как избежать Async / жду ада

Автор оригинала: Aditya Agarwal.

Async/a ждать освободил нас от обратного вызова ада, но люди начали злоупотребляться этим – ведущим к рождению Async/ждут ада.

В этой статье я постараюсь объяснить, что Async/awaint Hell, и я также поделись некоторыми советами, чтобы избежать его.

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

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

Пример асинхронного/ждущего ада

Подумайте, если вы написали сценарий, чтобы заказать пиццу и напиток. Сценарий может выглядеть так:

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

Объяснение

Мы завернули наш код в Async IIFE Отказ В этом точном порядке происходит следующее:

Получите список пицц.
Получите список напитков.
Выберите одну пиццу из списка.
Выберите один напиток из списка.
Добавьте выбранную пиццу в корзину.
Добавьте выбранный напиток в корзину.
Заказать предметы в корзине.

Так что не так?

Как я подчеркиваю ранее, все эти заявления выполняются один за другим. Здесь нет параллелизма здесь. Думайте внимательно: почему мы ждем, чтобы получить список пицц, прежде чем пытаться получить список напитков? Мы должны просто попытаться получить оба списка вместе. Однако, когда нам нужно выбрать пиццу, нам нужно заранее иметь список пицц. То же самое касается напитков.

Таким образом, можно сделать вывод, что работа, связанная с пиццей и, связанная с напитком, связанная с ними, может произойти параллельно, но отдельные шаги, связанные с работой, связанной с Pizza, должны выполняться последовательно (один за другим).

Еще один пример плохой реализации

Этот фрагмент JavaScript получит предметы в корзине и поместите запрос на заказ их.

async function orderItems() {
  const items = await getCartItems()    // async call
  const noOfItems = items.length
  for(var i = 0; i < noOfItems; i++) {
    await sendRequest(items[i])    // async call
  }
}

В этом случае для цикла дождаться sendrequest () Функция для завершения, прежде чем продолжить следующую итерацию. Однако нам на самом деле не нужно ждать. Мы хотим отправить все запросы как можно быстрее, а затем мы можем дождаться всех их завершения.

Я надеюсь, что теперь вы приближаетесь к пониманию того, что асинхнет/ждут ад И насколько сильно это влияет на производительность вашей программы. Теперь я хочу задать вам вопрос.

Что если мы забудем ключевое слово await?

Если вы забудете использовать Ждите При вызове ASYNC функция начнется выполнение функции. Это означает, что ожидание не требуется для выполнения функции. Функция Async вернет обещание, которое вы можете использовать позже.

(async () => {
  const value = doSomeAsyncTask()
  console.log(value) // an unresolved promise
})()

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

(async () => {
  const promise = doSomeAsyncTask()
  const value = await promise
  console.log(value) // the actual value
})()

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

Как вы можете видеть, dosomeasynctask () возвращает обещание. На данный момент dosomeasynctask () начал свое исполнение. Чтобы получить разрешенную ценность обещания, мы используем ключевое слово await, и это скажут JavaScript не выполнить следующую строку немедленно, но вместо этого ждать, пока обещание разрешить, а затем выполнить следующую строку.

Как выйти из Async/жду ада?

Вы должны выполнить эти шаги, чтобы избежать асинх/ждут ада.

Найти заявления, которые зависят от выполнения других утверждений

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

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

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

Групповые операторы в асинхронных функциях

Как мы видели, выбор пиццы включает в себя зависимые операторы, такие как получение списка пиццы, выбирая один, а затем добавляя выбранную пиццу в корзину. Мы должны группировать эти утверждения в асинхронном функции. Таким образом, мы получаем два асинхронных функция, selectpizza () и SelectDrink () Отказ

Выполнить эти ASYNC функции одновременно

Затем мы воспользуемся преимуществами контура события, чтобы одновременно запустить эти функции Async без блокировки. Две общие модели делают это Возвращение обещаний рано и Обещание. Все метод Отказ

Давайте исправим примеры

После трех шагов давайте применим их на наших примерах.

async function selectPizza() {
  const pizzaData = await getPizzaData()    // async call
  const chosenPizza = choosePizza()    // sync call
  await addPizzaToCart(chosenPizza)    // async call
}

async function selectDrink() {
  const drinkData = await getDrinkData()    // async call
  const chosenDrink = chooseDrink()    // sync call
  await addDrinkToCart(chosenDrink)    // async call
}

(async () => {
  const pizzaPromise = selectPizza()
  const drinkPromise = selectDrink()
  await pizzaPromise
  await drinkPromise
  orderItems()    // async call
})()

// Although I prefer it this way 

Promise.all([selectPizza(), selectDrink()]).then(orderItems)   // async call

Теперь мы сгруппировали заявления в две функции. Внутри функции каждое утверждение зависит от выполнения предыдущего. Тогда мы одновременно выполняем как функции selectpizza () и SelectDrink () Отказ

Во втором примере нам нужно разобраться с неизвестным количеством обещаний. Работа с этой ситуацией является Super Easy: мы просто создаем массив и подталкиваем обещания в нем. потом Использование Обещание. Все () Мы одновременно ждем всех обещаний решить.

async function orderItems() {
  const items = await getCartItems()    // async call
  const noOfItems = items.length
  const promises = []
  for(var i = 0; i < noOfItems; i++) {
    const orderPromise = sendRequest(items[i])    // async call
    promises.push(orderPromise)    // sync call
  }
  await Promise.all(promises)    // async call
}

// Although I prefer it this way 

async function orderItems() {
  const items = await getCartItems()    // async call
  const promises = items.map((item) => sendRequest(item))
  await Promise.all(promises)    // async call
}

Я надеюсь, что эта статья помогла вам увидеть за пределы основы Async/ждут, а также помогло вам повысить производительность вашей заявки.

Если вам понравилась статья, пожалуйста, хлопайте своим сердцем. Кончик – Вы можете хлопать 50 раз!

Пожалуйста, также поделитесь на FB и Twitter. Если вы хотите получить обновления, следуйте за мной на Twitter и Средний или подписаться на Моя рассылка Действительно Если ничего не понятно или вы хотите что-то указать, пожалуйста, прокомментируйте ниже.

Оригинал: “https://www.freecodecamp.org/news/avoiding-the-async-await-hell-c77a0fb71c4c/”