.then()

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

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

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

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

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

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

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

Так как then() всегда возвращает новый промис, его удобно использовать для построения последовательностей асинхронных операций. Например, мы запрашиваем через API список домов из «Игры престолов», запускаем асинхронную операцию парсинга JSON из ответа сервера и дополнительно запрашиваем сюзерена дома.

        
          
          // Запрос списка; `fetch` возвращает промисfetch('https://www.anapioficeandfire.com/api/houses')  .then(function (response) {    // Выполнится, когда придёт ответ    // Парсим JSON из ответа сервера.    // Возвращаем промис из обработчика; потом добавим `then`    return response.json()  })  .then(function (houses) {    // Выполнится, когда JSON распарсится.    // Запрашиваем дополнительные данные    return fetch(houses[0].overlord)  })  .then(function (response) {    // Выполнится, когда придёт ответ    return response.json()  })  .then(function (overlord) {    console.log(overlord.name)  })
          // Запрос списка; `fetch` возвращает промис
fetch('https://www.anapioficeandfire.com/api/houses')
  .then(function (response) {
    // Выполнится, когда придёт ответ

    // Парсим JSON из ответа сервера.
    // Возвращаем промис из обработчика; потом добавим `then`
    return response.json()
  })
  .then(function (houses) {
    // Выполнится, когда JSON распарсится.
    // Запрашиваем дополнительные данные
    return fetch(houses[0].overlord)
  })
  .then(function (response) {
    // Выполнится, когда придёт ответ
    return response.json()
  })
  .then(function (overlord) {
    console.log(overlord.name)
  })

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

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

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

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

        
          
          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}`)
  })

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать