从函数中返回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

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

两者之间的关键差异是:

1. 在第二个示例中,您没有传递解析值,因此您返回的promise将then被解析为undefined(返回值console.log).

2. 在第二个例子中,你将被拒绝进入的分辨率与undefined(通过返回的结果console.log出来的catch).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; });