5 распространенных ошибок при использовании промисов

5 распространенных ошибок при использовании промисов

От автора: промисы предоставляют элегантный способ обработки асинхронных операций в JavaScript. Когда-то это было прорывное решение, позволяющее избежать ада обратных вызовов. Однако не многие разработчики понимают, что у них внутри. В результате многие, как правило, ошибаются при использовании промисов на практике.

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

1. Избегайте ада промисов

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

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

В приведенном выше примере мы имеем три промиса — userLogin, getArticle и showArticle. Как видите, сложность будет расти пропорционально количеству строк кода, и он может стать нечитаемым.

Чтобы избежать этого, нам нужно отменить вложенность кода, вызвав getArticle из первого then и обработать его во втором then.

2. Использование блока try / catch внутри определения промисов

Обычно мы используем блок try / catch для обработки ошибок. Однако использование try / catch в объекте Promise не рекомендуется. Это потому, что если будут какие-либо ошибки, объект Promise автоматически обработает их в блоке catch.

В приведенном выше примере мы использовали блок try / catch в области Promise. Но сам Promise перехватывает все ошибки (даже опечатки) без блока try / catch. Это гарантирует, что все исключения, сгенерированные во время выполнения, будут получены и преобразованы в отклоненные промисы.

Примечание. Очень важно использовать .catch () в блоке Promise. В противном случае ваш код может завершиться с ошибкой, а также может произойти сбой приложения на этапе продакшена.

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

3. Использование асинхронной функции внутри блока Promise

Async / Await — это более продвинутый синтаксис для работы с несколькими промисами в синхронном коде. Когда мы используем ключевое слово async перед объявлением функции, оно возвращает Promise, и мы можем использовать await, чтобы остановить выполнение кода, пока обещание, которое мы ждем, не разрешится или не будет отклонено.

Но есть некоторые побочные эффекты функции Async, когда вы помещаете ее в блок Promise. Представим, что вы хотите выполнить асинхронную операцию в блоке Promise, добавляете ключевое слово async, и ваш код выдает ошибку. Даже если вы используете блок catch () или ждете промис внутри блока try / catch, вы не сможете сразу обработать эту ошибку. Посмотрите следующий пример:

Когда я сталкиваюсь с асинхронными функциями внутри блока Promise, я пытаюсь сохранить асинхронную логику вне блока Promise, чтобы поддерживать ее синхронность. И это срабатывает 9 раз из 10. Однако в некоторых случаях может потребоваться асинхронная функция. В этой ситуации у вас не будет другого выбора, кроме как управлять этим с помощью блока try / catch вручную.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

4. Выполнение блока промиса сразу после его создания

Что касается приведенного ниже фрагмента кода, если мы поместим фрагмент кода для выполнения HTTP-запроса, он будет выполнен немедленно.

Причина в том, что фрагмент кода заключен в конструктор Promise. Тем не мение, некоторые из вас могут захотеть выполнить myPromise позже. Однако это не так. Вместо этого, когда создается промис, немедленно выполняется обратный вызов.

Это означает, что к тому времени, когда вы перейдете к следующей строке после создания myPromise, ваш HTTP-запрос, скорее всего, уже будет запущен или, по крайней мере, в запланированном состоянии.

Но что вам делать, если вы хотите выполнить промис позже? Что делать, если вы не хотите делать HTTP-запрос прямо сейчас? Есть ли какой-нибудь магический механизм, встроенный в промисы, который позволил бы вам это сделать?

Ответ часто оказывается более очевидным, чем ожидают разработчики. Функции — это трудоемкий механизм. Они выполняются только тогда, когда разработчик явно вызывает их с помощью (). Простое определение функции пока ни к чему не приведет. Итак, самый эффективный способ отложить выполнение Promise — это заключить его в функцию!

Конструктор промисов внутри функции, и в нашей модели пока еще ничего не было вызвано. Мы меняем имя переменной, так как это больше не Promise, а создается и возвращается объект Promise.

С HTTP-запросом конструктор Promise и функция обратного вызова будут вызываться только при выполнении функции. Итак, теперь у нас есть lazy промис, который выполняется только тогда, когда он нам нужен.

5. Не обязательно использовать метод Promise.all()

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

Промисы выполняются одновременно, но если вы будете ждать их по одному, это займет слишком много времени. Вы сэкономите много времени, используя Promise.all(). Помните, Promise.all() — ваш друг!!!

Выполнение приведенного выше кода займет около 6 секунд, но если мы заменим его на Promise.all(), это сократит время выполнения.

Заключение

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

Автор: Ravidu Perera

Источник: blog.bitsrc.io

Редакция: Команда webformyself.

Читайте нас в Telegram, VK, Яндекс.Дзен

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии запрещены.