DanLevy.net

Тест: 9 вопросов о JavaScript Promise

Большене забывайте выполнять обещания!

Hero image for Тест: 9 вопросов о JavaScript Promise

Вы знаете JavaScript Promises?

  • Докажите своё мастерство в JavaScript! 🚀
  1. Ищите подсказки (Большая кнопка в нижнем углу).
  2. Запускайте код в консоли браузера (обычно F12 или найдите её) или используйте repl.it*.
  3. Не стесняйтесь твитнуть мне @justsml. Буду рад услышать ваше мнение!

👇 Ответьте на 9 вопросов ниже👇

1. 

Обработка ошибок

Какой будет вывод у следующего кода?

var p = new Promise((resolve, reject) => {
  reject(Error('The Fails!'))
})
p.catch(error => console.log(error.message))
p.catch(error => console.log(error.message))

Мы создаём Promise с помощью конструктора, сразу вызывая ошибку через колбэк reject.

Затем обработчики .catch работают как .addEventListener(event, callback) в DOM или .on(event, callback) в Event Emitter, где можно добавить несколько обработчиков. Каждый будет вызван с теми же аргументами.

2. 

Обработка ошибок

Какой будет вывод у следующего кода?

var p = new Promise((resolve, reject) => {
  return Promise.reject(Error('The Fails!'))
})
p.catch(error => console.log(error.message))
p.catch(error => console.log(error.message))

При использовании конструктора Promise необходимо вызвать либо колбэк resolve(), либо reject(). Конструктор Promise игнорирует возвращаемое исполнителем значение, поэтому дополнительный промис, созданный с помощью Promise.reject(), не привязан к p. Оба обработчика прикреплены к p, который остаётся в состоянии ожидания, а возвращённый отклонённый промис отмечается как необработанный средой выполнения.

5. 

Обработка ошибок

Какой будет вывод у следующего кода?

new Promise((resolve, reject) => {
    resolve('Success!')
  })
  .then(() => {
    throw Error('Oh noes!')
  })
  .catch(error => {
    return "actually, that worked"
  })
  .catch(error => console.log(error.message))

Первый .catch обрабатывает ошибку и возвращает строку "actually, that worked". Цепочка становится успешно выполненной, поэтому следующий .catch не вызывается и ничего не выводится. Для восстановления после ошибки не требуется последующий .then; он нужен лишь для использования результата.

6. 

Обработка данных

Какой будет вывод для следующего кода?

Promise.resolve('Success!')
  .then(data => {
    return data.toUpperCase()
  })
  .then(data => {
    console.log(data)
  })

Подсказка: .then’s передают данные последовательно, от return value к следующему .then(value => /* handle value */).

return является ключевым для передачи значения следующему .then.

7. 

Обработка данных

Какой будет вывод у следующего кода?

Promise.resolve('Success!')
  .then(data => {
    return data.toUpperCase()
  })
  .then(data => {
    console.log(data)
    return data
  })
  .then(console.log)

Будут вызваны 2 вызова console.log.

8. 

Обработка данных

Какой будет вывод у следующего кода?

Promise.resolve('Success!')
  .then(data => {
    data.toUpperCase()
  })
  .then(data => {
    console.log(data)
  })

Подсказка: .then’s передают данные последовательно, от return value к следующему .then(value => /* handle value */).

return является ключевым, чтобы передать значение следующему .then.

9. 

Обработка данных

Какой будет вывод у следующего кода?

Promise.resolve('Success!')
  .then(() => {
    throw Error('Oh noes!')
  })
  .catch(error => {
    return 'actually, that worked'
  })
  .then(data => {
    throw Error('The fails!')
  })
  .catch(error => console.log(error.message))

annotated-code/question-9-4.webp

Первый .catch восстанавливает цепочку, возвращая строку. Следующий .then выбрасывает новую ошибку The fails!, и последний .catch выводит только её сообщение.

Loading comments...