Как вы отправляете после цикла через массив?

Question

import { FETCH_DATA } from "./types";

export const fetchData = () => dispatch => {
  const array = [];

  fetch(
    "https://example-api-endpoint.com"
  )
    .then(res => res.json())
    .then(data =>
      data.forEach(element => {
        fetch(
          "https://another-example-api-endpoint.com"
        )
          .then(res => res.json())
          .then(data => {
            array.push(data);
            dispatch({
              type: FETCH_DATA,
              payload: array
            });
          });
      })
    );
};

В настоящее время я отправляю для каждого элемента.Мне было интересно, есть ли способ, которым я мог бы отправлять после каждой итерации forEach.

Answer 1

Вы можете map окончательные обещания в массив, а затем dispatch в Promise.all.

import { FETCH_DATA } from "./types";

export const fetchData = () => dispatch => {
  fetch("https://example-api-endpoint.com")
    .then(res => res.json())
    .then(data => {
      const promises = data.map(element =>
        fetch("https://another-example-api-endpoint.com").then(res =>
          res.json()
        )
      );
      Promise.all(promises).then(payload =>
        dispatch({
          type: FETCH_DATA,
          payload
        })
      );
    });
};

Answer 2

Это немного примитивно, но здесь мы идем:

import { FETCH_DATA } from "./types";

export const fetchData = () => dispatch => {
  const array = [];


  var dispatchData = () => {
    dispatch({
      type: FETCH_DATA,
      payload: array
    });
  }

  fetch(
    "https://example-api-endpoint.com"
  )
    .then(res => res.json())
    .then(data =>{
       var fetchCount = 0
       data.forEach((element,index) => {
        fetch(
          "https://another-example-api-endpoint.com"
        )
          .then(res => res.json())
          .then(data => {
            array.push(data);
            fetchCount++;
            if(fetchCount === data.length){
              dispatchData()
            }
          });
      })
    });
};