Блог

У меня есть функция, которая при вызове циклически перебирает массив, где каждый элемент выполняет запрос Axios, получает ответ и обновляет состояние. Я хотел бы иметь возможность выполнять эти запросы один за другим, поскольку каждый из них изменяет состояние. Я пробовал несколько вещей, таких как использование axios.all / axios.spread, но не смог выяснить, как применить это динамически. Любая помощь была бы высоко оценена!

Функция выполняет запрос, который выполняет поиск PDF-файла контракта на основе ContractID. Он возвращает объект с именем 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 });
      });
  });
};
  

Что вам нужно сделать, так это простую операцию сокращения вашего массива:

 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(...);
  

Приведенное выше решение допустимо, или вы можете создать метод, который действует более явным образом:

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