reactjs - Axios 进入 .then 未按预期工作

Question

我正在使用 axios 发出 http 请求。在 .then() 内部，我正在使用另一个 axios 调用。最后，我有第三个 then()，它应该在第二个 then 之后运行，但实际上并没有这样做。

let assets = [];

export const initAssets = () => {
    return dispatch => {
        dispatch(setLoadingToTrue());
        axios.get('https://....json')
            .then(response => {
                for(let key in response.data) {
                    assets.push(response.data[key]);
                }
            })
            .then(() => {
                const token = '...';
                assets.forEach((cur) => {
                    axios.get('...' + cur.ticker + '/quote?token=' + token)
                    .then(response => {
                        console.log(response);
                        cur.price = response.data.latestPrice;
                    })                    
                })                
            })
            .then(() => {
                dispatch(initAllAssets(assets));
                dispatch(setLoadingToFalse());
            })
            .catch(error => {
                console.log(error);
                dispatch(setLoadingToFalse());
            })
    }
}

在第二个 then 的 axios 请求完成之前，最后一个 .then 的调度正在执行。如何让最后一个 then 只在第二个 axios 请求完成后运行？

Answer 1

您可以使用 Promise.all 将响应返回到下一个 .then block ，一旦所有 promise 在第二个 .then 中解决，它将被调用

let assets = [];

export const initAssets = () => {
    return dispatch => {
        dispatch(setLoadingToTrue());
        axios.get('https://....json')
            .then(response => {
                for(let key in response.data) {
                    assets.push(response.data[key]);
                }
            })
            .then(() => {
                const token = '...';
                const promises = [];
                assets.forEach((cur) => {
                    promises.push(axios.get('...' + cur.ticker + '/quote?token=' + token)
                    .then(response => {
                        console.log(response);
                        cur.price = response.data.latestPrice;
                    }))                   
                }) 
                return Promise.all(promises);               
            })
            .then(() => {
                dispatch(initAllAssets(assets));
                dispatch(setLoadingToFalse());
            })
            .catch(error => {
                console.log(error);
                dispatch(setLoadingToFalse());
            })
    }
}