<MyRusakov.ru />

React JS, Redux, ES2015 с Нуля до Гуру

React JS, Redux, ES2015 с Нуля до Гуру

Данный курс - это обширный курс по JavaScript и фреймворку React, который позволит Вам с нуля создавать мощные современные, динамические JavaScript-приложения.

Вы узнаете о тонкостях работы с "профессиональным" JavaScript, а так же узнаете о нововведениях в его новый стандарт ES2015, Вы узнаете, как организовать профессиональное окружение для FrontEnd, изучите профессиональный фреймворк - ReactJS.

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

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Работа с ошибками в JavaScript обещаниях

Работа с ошибками в JavaScript обещаниях

Для удобства обработки ошибочных ситуаций, спецификация JavaScript обещаний предоставляет нам синтаксическую конструкцию, с помощью которой мы можем обрабатывать ошибки (rejections) промисов.

Предположим, у нас есть функция, называемая searchForProduct(prodId),которая возвращает обещание, которое будет успешно завершено, если продукт с таким идентификатором будет найден в базе, или будет завершено с ошибкой (отклонено), если товара с таким идентификатором нет. Используя метод catch() мы можем сделать наш код легче для тех, кто будет его читать:

searchForProduct(123)
  .then(function (price) {
   console.log('Данный товар стоит: ' + price + ' руб.')
  })
  .catch(function (error){
   console.log('Товар временно отсутствует')
  })

Вывод может быть таким: Данный товар стоит: 50 руб., если обещание завершится успехом или 'Товар временно отсутствует', в случае если идентификатор не будет найден.

В том случае, если вы хотите использовать только метод .then() представленный выше кусок кода примет следующий вид:

searchForProduct(123)
  .then(function (price) {
   console.log('Данный товар стоит: ' + price + ' руб.')
  }, null)
  .then(null, function (error){
   console.log('Товар временно отсутствует')
  })

Как видно, мы использовали цепочку вызовов метода .then(), при этом в каждом из вызовов мы пропустили ненужные обработчики onFulfilled и onRejected простой передачей null.

Запомните! Если обещание завершилось с ошибкой, то исполнение кода будет остановлено на первом вызове методов .catch() или .then(). У последнего должен присутствовать обработчик onReject.

Это означает, что, если мы вызовем нашу функцию searchForProduct() с идентификатором, который не существует вот так:

searchForProduct(99999)
  .then(function (price) {
   console.log('Данный товар стоит: ' + price + ' руб.')
   return price
  })
  .then(function (price) {
   console.log('Удвоенная сумма: ' + (price \* 2))
  })
  .catch(function (error){
   console.log('Товар временно отсутствует')
  })

оба метода .then() будут пропущены (так как ни у одного из них нет обработчика onReject) и будет исполнен только метод .catch().

Обратите внимание на два образца кода ниже, в них присутствует едва уловимое различие:

Пример 1:

searchForProduct(123)
  .then(function (price) {
   // поиск другого товара
   return searchForProduct(456)
  }, function (error){
   console.log('Товар с ID 123 не найден!')
  })

Пример 2:

searchForProduct(123)
  .then(function (price) {
   // поиск другого товара
   return searchForProduct(456))
  })
  .catch(function (error){
   console.log('Товар с ID 123 и ID 456 не найдены')
  })

В первом примере, если товар с ID 123 не существует, будет исполнен следующий вызов метода .then() с обработчиком onReject:

  1. В этом случае мы увидим: Товар с ID 123 не найден!
  2. Однако, в первом примере нет вызова обработчика onReject или метода .catch() в случае ошибки. Поэтому, если товар с ID 456 отсутствует, ничего напечатано не будет. Будет брошена ошибка Uncaught error.

Важное замечание: когда у вас есть вызов метода then(onFulfilled, onRejected), будет выполнен только один из обработчиков, но не оба.

Во втором примере:

  1. Если товар с ID 123 не существует, будет выполнен метод catch() и будет напечатано 'Товар с ID 123 и ID 456 не найдены'
  2. Также, так как после вызова then у нас идет вызов catch по цепочке, то любая ошибка, возникающая во втором методе, будет перехвачена в вызове метода catch(). Таким образом, если товар с ID 456 не существует, мы также получим сообщение 'Товар с ID 123 и ID 456 не найдены'.

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

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.