Question

我有一个函数，当它被调用时，它将遍历一个数组，其中每个项目都会发出一个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 });
      });
  });
};

Answer 1

您需要做的是对数组进行简单的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(...);

Answer 2

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

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

使用数组的连续Axios调用

2 个答案: