`.then()`

Время чтения: меньше 5 мин

Эта статья связана с понятием Promise

Кратко

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

Метод принимает два аргумента:

onFulfill — функция-колбэк, которая будет вызвана при переходе промиса в состояние «успех» fulfilled. Функция имеет один параметр, в который передаётся результат выполнения операции
onReject — функция-колбэк, которая будет вызвана при переходе промиса в состояние «ошибка» rejected. Функция имеет один параметр, в который передаётся информация об ошибке

Всегда возвращает новый промис.

Как пишется

        
          
          // getPasswords() — асинхронная функция, которая возвращает промисgetPasswords().then(  function (result) {    // что-то делаем с результатом операции    console.log("Все пароли:" + result)  },  function (err) {    // обрабатываем ошибку    console.error(err.message)  })
          // getPasswords() — асинхронная функция, которая возвращает промис
getPasswords().then(
  function (result) {
    // что-то делаем с результатом операции
    console.log("Все пароли:" + result)
  },
  function (err) {
    // обрабатываем ошибку
    console.error(err.message)
  }
)

Как понять

Обработка асинхронных операций через промис и then очень похожа на работу с колбэками.

Так как then всегда возвращает новый промис, то его удобно использовать для построения последовательностей асинхронных операций:

        
          
          // запросим через API список домов из Игры престолов. Метод `fetch` возвращает промисfetch('https://www.anapioficeandfire.com/api/houses')  .then(function (response) {    // выполнится, когда от API придет ответ    // запустим асинхронную операцию парсинга JSON из ответа сервера    return response.json() // вернем из обработчика промис, к которому добавим then  })  .then(function (houses) {    // выполнится, когда JSON распарсится    return fetch(houses[0].overlord) // запросим данные о сюзерене этого дома  })  .then(function (response) {    // выполнится, когда от API придет ответ    return response.json()  })  .then(function (overlord) {    console.log(overlord.name)  })
          // запросим через API список домов из Игры престолов. Метод `fetch` возвращает промис
fetch('https://www.anapioficeandfire.com/api/houses')
  .then(function (response) {
    // выполнится, когда от API придет ответ

    // запустим асинхронную операцию парсинга JSON из ответа сервера
    return response.json() // вернем из обработчика промис, к которому добавим then
  })
  .then(function (houses) {
    // выполнится, когда JSON распарсится

    return fetch(houses[0].overlord) // запросим данные о сюзерене этого дома
  })
  .then(function (response) {
    // выполнится, когда от API придет ответ
    return response.json()
  })
  .then(function (overlord) {
    console.log(overlord.name)
  })

В коде выше, каждый вызов then привязан к результату предыдущей операции. Такой код читается почти как синхронный.

На практике

nlopin

🛠 then в индустрии используется только для обработки успешного завершения операции, в варианте с одним аргументом:

        
          
          getPasswords().then(function (result) {  // что-то делаем с результатом операции  console.log("Все пароли:" + result)})
          getPasswords().then(function (result) {
  // что-то делаем с результатом операции
  console.log("Все пароли:" + result)
})

Для обработки ошибок используют метод catch.