Возвращение обещания Axios из функции

Может кто-нибудь объяснить, почему возвращение обещания Axios позволяет продолжить цепочку, но возврат после применения метода then()/catch() не работает?

Пример:

const url = 'https://58f58f38c9deb71200ceece2.mockapi.io/Mapss'
    
function createRequest1() {
  const request = axios.get(url)

  request
  .then(result => console.log('(1) Inside result:', result))
  .catch(error => console.error('(1) Inside error:', error))

  return request
}

function createRequest2() {
  const request = axios.get(url)

  return request
  .then(result => console.log('(2) Inside result:', result))
  .catch(error => console.error('(2) Inside error:', error))
}

createRequest1()
.then(result => console.log('(1) Outside result:', result))
.catch(error => console.error('(1) Outside error:', error))

createRequest2()
.then(result => console.log('(2) Outside result:', result))
.catch(error => console.error('(2) Outside error:', error))
<script src="https://unpkg.com/[email protected]/dist/axios.min.js"></script>

Ответы

Ответ 1

Ваш первый пример возвращает оригинальное обещание. Второй пример возвращает другое обещание, которое создается при вызове catch.

Критические различия между ними:

  • В вашем втором примере вы не передаете значение разрешения, поэтому обещание, возвращаемое вашим then, разрешено с помощью undefined (возвращаемое значение console.log).

  • В вашем втором примере вы конвертируете отклонения в разрешения с помощью undefined (возвращая результат console.log из catch). A catch, который не бросает или не возвращает обещание, которое отклоняет, преобразует отклонение в разрешение.

Одним из ключевых моментов в цепочках обещаний является то, что они преобразуют результат; каждый вызов then или catch создает новое обещание, и их обработчики могут изменять то, что отправлено вниз по течению, когда результат проходит через них.

Обычный шаблон действительно должен был бы вернуть результат цепочки, но для функций в цепочке либо намеренно преобразовать результат, либо передать его. Как правило, у вас не было бы обработчика catch, кроме конечного конца цепочки, если вы не используете его для исправления ошибки (намеренно преобразовывая отклонение в разрешение).

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

return request
    .then(result => { console.log(result); return result; })
    .catch(error => { console.error(error); return Promise.reject(error); });

или используя throw:

return request
    .then(result => { console.log(result); return result; })
    .catch(error => { console.error(error); throw error; });