如何在 axios 的 .then() 链中访问先前的承诺响应？

Question

我需要访问 responseA 以进一步访问链接请求中的字段值。如何优雅地做到这一点？

  axios.get(`/endpoint`) 
            .then((responseA) => {
               // Do something with responseA
               return axios.put(signedUrl, file, options); 
            })
            .then((responseB) => {
               // Do something with responseA & responseB
            })
            .catch((err) => {
                console.log(err.message);
            });

更新：我可能应该提到在我的第一个 .then() 中我返回了另一个网络请求。它必须按顺序发生。

Answer 1

第一个区块内发生了什么.then()？理论上，您可以将所需的值从responseA返回到第二个.then()块，因为从第一个块返回的任何值都then可以用作responseB。换句话说，它看起来像这样：

axios.get(`/endpoint`) 
        .then((responseA) => {
           // additional request/logic
           const moreData = someFunction()
           return { responseAdata: responseA.dataYouWant, moreData: moreData }
        })
        .then((responseB) => {
           // now responseA values will be available here as well, e.g.
           responseB.responseAdata
           // Do something with responseA & responseB
        })
        .catch((err) => {
            console.log(err.message);
        });

Answer 2

您有多种选择来执行此操作。

1）打破链条

let promiseA = axios.get(`/endpoint`) 
let promiseB = promiseA.then((responseA) => {
               // Do something with responseA
            })

return Promise.all([promiseA, promiseB]).then(function([responseA, responseB]) {
        // Do what you must
});

2）使用等待

let responseA = await axios.get('/endpoint/')
// You can figure out the rest