如何在Promise链中访问前一个then的jsonData？无法修改externalBuiltInFunction

嘿，这个问题我太熟了！很多人写Promise链时都会碰到这种想保留之前步骤数据的需求，既然不能修改externalBuiltInFunction()，咱们有几个靠谱的解决方案：

方法1：把需要的数据和外部函数结果打包返回 #

这是最常用的方式，把jsonData和externalBuiltInFunction()的返回值一起包装成数组或对象，传递给下一个then：

ajaxCall(...)
 .then( (response) => { return response.json(); })
 .then ( (jsonData) => { 
   // 用Promise.all兼容外部函数返回Promise的情况，同步返回的话直接写数组也可以
   return Promise.all([jsonData, externalBuiltInFunction(jsonData)]);
 })
 .then (([jsonData, dataFromExternalFunction]) => { 
   // 这里就能同时拿到两个数据啦！
   console.log("之前的json数据：", jsonData);
   console.log("外部函数返回的数据：", dataFromExternalFunction);
 })

如果externalBuiltInFunction()是同步返回值，你甚至可以直接返回[jsonData, externalBuiltInFunction(jsonData)]，不用Promise.all——不过加上它更稳妥，能兼容异步的情况。

方法2：利用闭包嵌套回调 #

把下一个then直接嵌套在第二个then里面，这样就能通过闭包直接访问外层的jsonData，不用在链上额外传递数据：

ajaxCall(...)
 .then( (response) => { return response.json(); })
 .then ( (jsonData) => { 
   // 直接在这里处理外部函数的结果，闭包能拿到jsonData
   return externalBuiltInFunction(jsonData).then(dataFromExternalFunction => {
     console.log("之前的json数据：", jsonData);
     console.log("外部函数返回的数据：", dataFromExternalFunction);
     // 如果后面还有Promise链，记得把需要的数据传下去
     return { jsonData, dataFromExternalFunction };
   });
 })
 // 后续的then可以继续使用返回的对象
 .then(finalResult => {
   console.log("后续步骤访问jsonData：", finalResult.jsonData);
 })

这个方式适合不想打乱链式结构，又想直接访问之前数据的场景。

方法3：用外部变量暂存（不推荐） #

虽然能实现，但这种方式有风险，比如如果Promise链有并发或者分支，外部变量可能被意外覆盖：

let storedJsonData; // 外部变量暂存
ajaxCall(...)
 .then( (response) => { return response.json(); })
 .then ( (jsonData) => { 
   storedJsonData = jsonData;
   return externalBuiltInFunction(jsonData);
 })
 .then ((dataFromExternalFunction) => { 
   console.log("暂存的json数据：", storedJsonData);
 })

除非你的场景非常简单，否则优先用前两种方法更安全。

内容的提问来源于stack exchange，提问作者Quip456