Неправильный порядок асинхронных задач React Promise

Это должно быть решено через Promise.allпотому что как описано в документации

Возвращаемые значения будут в порядке переданных промисов, независимо от порядка завершения.

Проблема заключается в том, что вы устанавливаете свое состояние, вызывая dispatch для каждого промиса на основе его завершения, и поскольку промисы могут завершиться в любой момент времени (например, 3-й запрос может завершиться первым, потому что они отправляются одновременно), dispatch будет вызывается, и ваше управление состоянием установит это как первый ответ (вот почему вы иногда получаете такое поведение, потому что это зависит от сети, какой из них закончит первым).

Это будет означать, что либо вы должны изменить свой dispatch для получения массива уже готовых промисов, либо вызвать dispatch один за другим, как только они будут завершены, что показано в коде ниже - разрешить все и отправить по порядку:

export function getTeamsStats(league, team, type) {
    return function (dispatch) {
    const url = "https://www.api-football.com/demo/v2/statistics";
    let dates = ["2019-08-30", "2019-09-30", "2019-10-30"];
    const getAllData = (dates, i) => {
        return Promise.all(dates.map(x => url + '/' + 357 + '/' + 5 + '/' + x).map(fetchData));
    }

    const fetchData = (URL) => {
        return axios
            .get(URL)
            .then(res => {
                const {
                    matchsPlayed: { total: teamsTotalMatchsPlayed },
                } = res.data.api.statistics.matchs;

                return teamsTotalMatchsPlayed;
            })
            .catch(e => {
                console.log(e);
            });
    }

    getAllData(dates).then(resp => {
        console.log(resp)

        // 'resp' here are all 'teamsTotalMatchsPlayed' in correct order (here I mean order of call, not promise completion)
        // so just dispatch them in order
        resp.map(matchsPlayed => receivedTeamsStat(matchsPlayed, type));            
    }).catch(e => { 
        console.log(e) 
    })

   }
}

Обратите внимание, что я, возможно, сделал некоторую синтаксическую ошибку, но вы поняли идею.

Идеальный способ выполнить ваше требование — использовать Обещание.все(). Это связано с двумя основными причинами,

• Чтобы сохранить возвращаемое значение в порядке переданных промисов, независимо от порядка завершения.

Возвращаемые значения будут в порядке переданных промисов, независимо от порядка завершения.

См. раздел Возвращаемое значение в ссылка

• Чтобы отклонить возвращенное обещание (короткое замыкание), если какое-либо из обещаний в итерируемом объекте отклонено.

Это тоже важно. Нам не нужно ждать, пока все асинхронные итерируемые обещания будут разрешены/отклонены, если первое итерируемое обещание fetchData отклоняется, мы можем замкнуть цепь и отклонить возвращенное обещание.

С другой стороны, Promise.allSettled()< / а>,

<script src="https://gist.github.com/Seralahthan/9934ba2bd185a8ccfbdd8e4b3523ea23.js"></script>

Как вы сделали,

function updateUI(value) {
    console.log(value);
    // Do something to update the UI.
}

// Note that order of resolution of Promises is 2, 1, 3
const promise1 = new Promise((resolve) => setTimeout(resolve, 200, 1)).then(updateUI);
const promise2 = new Promise((resolve) => setTimeout(resolve, 100, 2)).then(updateUI);
const promise3 = new Promise((resolve) => setTimeout(resolve, 300, 3)).then(updateUI);
const promises = [promise1, promise2, promise3];

Promise.allSettled(promises).
  then((value) => console.log('Nothing to do here', value));

// Output: 2, 1, 3

// Here we update the UI as soon as the result is obtained. As a result, the UI is also updated in the
// order in which the promise was resolved.

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

Как вы должны были сделать вместо этого,

// Note that order of resolution of Promises is 2, 1, 3 (Same as previous)

const promise1 = new Promise((resolve) => setTimeout(resolve, 200, 1));
const promise2 = new Promise((resolve) => setTimeout(resolve, 100, 2));
const promise3 = new Promise((resolve) => setTimeout(resolve, 300, 3));
const promises = [promise1, promise2, promise3];


Promise.allSettled(promises).
  then((results) => results.forEach((result) => updateUI(result.value)));

// Output: 1, 2, 3

// Here, we wait for all the network requests to complete and then loop through the results and update the UI.
// This ensures that the result is in order.

Если вы не хотите ждать разрешения всех промисов и хотите обновить пользовательский интерфейс, как только одно разрешится, и при этом сохранить порядок, вам нужно передать позицию элемента в массиве, а затем использовать эту позицию для обновления элемент на месте в заданной позиции в массиве.

Надеюсь это поможет.

Promise.all сохраняет порядок. Вы должны дождаться, пока все промисы API будут разрешены, прежде чем отправлять действия.

Полезная статья: Promise.all: порядок разрешенных значений