使用数组的连续Axios调用

时间:2019-03-08 13:28:56

标签: reactjs asynchronous axios

我有一个函数,当它被调用时,它将遍历一个数组,其中每个项目都会发出一个Axios请求,获取响应并更新状态。我希望能够一个接一个地执行这些请求,因为每个请求都在改变状态。我已经尝试了一些方法,例如使用axios.all / axios.spread,但还无法弄清楚如何动态地应用它。任何帮助将不胜感激!

该函数发出一个请求,请求根据contractId搜索合同的pdf。它返回一个名为Portfolio的对象,其中包含一组合同。本质上,我的屏幕上显示的是合同表,当单击“查找文件”按钮时,每个合同都会在屏幕上逐行更新。

findFiles = () => {
  const contracts = this.state.portfolio.contracts;
  contracts.map(contract => {
    axios
      .get(
        "http://localhost:57821/Portfolio/FindFile?contractId=" + contract.contractId
      )
      .then(res => {
        this.setState({ portfolio: res.data });
      });
  });
};

2 个答案:

答案 0 :(得分:0)

您需要做的是对数组进行简单的reduce操作:

contracts.reduce((promise, next) => promise.then(() => {
    axios.get(
        "http://localhost:57821/Portfolio/FindFile?contractId=" + contract.contractId
    ).then(res => {
         this.setState({ portfolio: res.data });
    })
), Promise.resolve()).then(...);

答案 1 :(得分:0)

以上解决方案有效,或者您可以创建一种以更明确的方式起作用的方法:

const axios = require('axios');
function makeRequestsFromArray(arr) {
    let index = 0;
    function request() {
        return axios.get('http://localhost:3000/api/' + index).then(() => {
            index++;
            if (index >= arr.length) {
                return 'done'
            }
            return request();
        });

    }
    return request();
}

makeRequestsFromArray([0, 1, 2]);