/ ↲
    Расширенный поиск

    JavaScript

    .then()

    Обрабатываем ситуацию, когда пообещали значение — и выполнили обещание.

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

    Кратко

    Скопировано

    Метод 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() привязан к результату предыдущей операции. Такой код читается почти как синхронный.

    На практике

    Скопировано

    Николай Лопин советует

    Скопировано

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

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

    Для обработки ошибок используют метод catch(). Такие цепочки читаются лучше:

            
          
          getPasswords()  .then(function (result) {    console.log(`Все пароли: ${result}`)  })  .catch(function (error) {      console.log(`Ошибка: ${error.message}`)  })
          getPasswords()
  .then(function (result) {
    console.log(`Все пароли: ${result}`)
  })
  .catch(function (error) {
      console.log(`Ошибка: ${error.message}`)
  })

    Читайте также