从函数返回一个 Axios Promise

Posted 2023-03-07

【中文标题】从函数返回一个 Axios Promise

【英文标题】：Returning an Axios Promise from function

【发布时间】：2017-09-13 19:25:52

【问题描述】：

谁能解释一下为什么返回 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 方法应该返回一个要被链接的值，但是为什么这两个返回方法有区别呢？

【问题讨论】：

第二个例子返回链的“结束”，第一个例子返回requestpromise

真正的问题是，您没有在 .then/.catch 中返回任何内容 - 这导致 Promise 将被解析为 undefined

对不起，我的错误，他们返回了调用console.log的结果 - 这是undefined（我偷看了小提琴 - 这不是委婉说法）

【参考方案1】：

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

两者之间的关键区别是：

1234563

在第二个示例中，您使用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; );

【讨论】：

感谢@T.J，您的解释肯定有助于更详细地理解链接承诺。欣赏它。

感谢@T.J，你再清楚不过了。这篇文章帮助我解决了同步我的 api 调用的问题。