Определить конец цикла forEach, который содержит http-запросы?

Question

У меня есть эта функция, и внутри цикла forEach, который выполняет итерации по элементам желоба ... Я хочу добиться визуализации некоторого счетчика (загрузчика), пока не будут выполнены все запросы http, пока цикл forEach не будетсделанный.

То, как я сейчас пытаюсь, первый и последний console.log срабатывает сразу, а затем регистрирует секунду console.log столько раз, сколько элементов в массиве элементов.

Как я могу обновить состояние до loading: false, когда итерация forEach выполнена, когда выполнены все запросы http?

someHandler = () => {
    // this.setState({ loading: false })
       console.log( "Not loading" )
    this.props.items.forEach(item => {
      axios
        .get(`.../${item}/`)
        .then(res => {
          this.setState(prevState => ({
            item: [
              ...prevState.item,
              {
                name: res.data.name,
                img: res.data.img
              }
            ]
          }));
          this.props.newItem(this.state.item);
          // this.setState({ loading: true })
             console.log( "Loading" )
        })
        .catch(err => {
          console.log(err);
          // this.setState({ loading: false })
             console.log( "Not loading" )
        });
    });
    // this.setState({ loading: false })
       console.log( "Not loading" )
  };

Answer 1

Если вы не можете использовать async / await в env и хотите подождать, пока не будет выполнено несколько обещаний, тогда Promise.all ваш друг.Возможно, я что-то упустил, но в двух словах вы могли бы переписать свою функцию так:

const requests = this.props.items.map(item => (
  axios.get(`...${item}`).then(res => {
    const newItem = { name: res.data.name, img: res.data.img }
    this.props.newItem(newItem)
    return newItem
  })
))

Promise.all(requests).then(responses => {
  this.setState({ item: responses })
})

Это создает новый массив обещаний под названием requests, и когда они все будут выполнены, используетsetState чтобы задать все ответы.

Answer 2

Вы можете использовать async/await с for...of

Вы можете принять последовательное выполнение с этим подходом.

someHandler = async () => {
  console.log('Not loading'); // will execute before loop
  this.setState({ loading: true }); // start loading

  for (let item of this.props.items) {
    const res = await axios.get(`.../${item}/`);
    // ... do your logic with response
    console.log('Loading');
  }

  console.log('Not loading'); // will execute after loop
  this.setState({ loading: false }); // end loading
};