在AJAX请求中返回一个回调并在promise链中调用一个回调

时间:2018-03-14 22:29:26

标签: ajax callback promise react-redux axios

我正在研究一个反应项目,并且出现了以下三个案例。有人可以给我一些关于使用axios和redux-promise制作AJAX请求时的差异的一些指示吗?

Case 1 (the payload is undefined - why?): 
axios.get(link) 
.then(callback)

Case 2 (the payload is also undefined - why?): 
axios.get(link)
.then(() => callback())

Case 3 (the payload is the res object): 
axios.get(link)
.then((res) => { callback; return res });

如果有人能够回答这个问题或者给我指点可以解决我的困惑的材料,我真的很感激。我做了最好的研究,并且在我发布问题之前花了几个小时。谢谢!

1 个答案:

答案 0 :(得分:1)

您在前两个承诺中的已解决值是undefined,因为您有一个.then()处理程序,您不会从中返回任何内容。 return处理程序的.then()值成为promise链的已解析值。

如果您希望link成为承诺的已解决值,并且您将拥有自己的.then()处理程序,那么您必须将其返回。

案例1:

axios.get(link).then(callback)

在这里,您将.then()处理程序委托给回调函数。除非它返回传递给它的值(显然它没有),那么.then()处理程序的返回值是undefined,因此这就是promise链的解析值。

案例1相当于:

axios.get(link).then(function(val) {
    return callback(val);
});

因此,承诺链将callback(val)返回的任何内容作为已解析的值。

案例2:

axios.get(link).then(() => callback())

在这里,我们可以清楚地看到.then()箭头函数处理程序的返回值是执行callback()的结果,显然是undefined因此承诺链会被解析价值undefined

你可以通过这样做来解决这个问题:

axios.get(link).then(() => {
    callback()
    return link;
});

案例3:

axios.get(link).then((res) => { callback; return res });

这是您明确返回res,以便成为承诺链的已解决值。你甚至没有打电话给callback()。我认为你的意思是()之后。

不要将普通回调与承诺混合

您可能也不希望将普通回调与promises混合使用,它们是两种不同的异步通知方法,在给定的代码段中只使用一种技术要好得多。相反,将回调操作转换为返回通常在调用回调时解析的promise的操作。然后,你可以链接承诺。

或者,如果您尝试通知某个调用者有关操作的完成情况,那么让他们只需要在返回的promise上使用自己的.then()处理程序查看返回的promise。