从函数返回一个 Axios Promise

Question

谁能解释一下为什么返回 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/axios@0.16.1/dist/axios.min.js"></script>

https://jsfiddle.net/nandastone/81zdvodv/1/

我知道 Promise 方法应该返回一个要被链接的值，但是为什么这两个返回方法有区别呢？

Answer 1

您的第一个示例返回原始承诺。您的第二个示例返回一个 不同的 承诺，即通过调用 catch 创建的承诺。

两者之间的关键区别是：

1234563

1. 在第二个示例中，您使用undefined 将拒绝转换为解决方案（通过从catch 返回console.log 的结果）。不抛出或返回被拒绝的 Promise 的 catch 处理程序会将拒绝转换为解决方案。

Promise 链的关键之一是它们可以转换结果；对then 或catch 的每次调用都会创建一个新的promise，并且它们的处理程序可以在结果通过它们时修改向下游发送的内容。

通常的模式确实是返回链的结果，但链中的函数要么有意转换结果，要么将其传递。通常，除了链的末端之外，您不会有 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; });