如何在 axios 的 a.then() 链中访问之前的 promise 响应？

Question

I need access to responseA to get access to a field value further along the chained request. How can that be done elegantly?

  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);
            });

UPDATE: I should probably mention that in my first.then() I return another.network request. And it has to happen in sequence.

Answer 1

What is happening inside the first .then() block? In theory, you could return the values you need from responseA to the second .then() block, as whatever you return from the first then block will be available as responseB. In other words, it would look something like this:

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

You have a number of options to do this.

1) Break the chain

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) Use await

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

Answer 3

You can use Promise.all :

axios.get(`/endpoint`) 
.then(
  responseA =>
    Promise.all([
      responseA,
      axios.get("/endpointB")
    ])   
)
.then(
  ([responseA,responseB]) => {
  console.log(responseA,responseB);
})
.catch((err) => {
    console.log(err.message);
});

Answer 4

If anyone is still facing problem then try as below:

  axios.get('https://api.openweathermap.org/geo/1.0/direct?q=' + req.body.city + '&limit=1&appid=e43ace140d2d7bd6108f3458e8f5c')
        .then(
            (response1) => {
                let output = response1.data;
                axios.get('https://api.openweathermap.org/data/2.5/weather?lat=' + output[0].lat + '&lon=' + output[0].lon + '&appid=e43ace1d1640d2d7bd61058e8f5c')
                    .then((weatherdd) => {
                        res.render('index.twig', { weatherdata: weatherdd.data, cityname: req.body.city, todaydatex: todayDate });
                    })
            }
        )
        .catch(
            err => {
                res.send(err)
            }
        );

Hint: As You can see I am using response1 which is returned from the first request and then defined a local variable with output and finally using the data in my next HTTP request (eg: output[0].lat)