Обрабатывать асинхронный цикл foreach, а затем отправлять его в Redx

Question

Я жду, чтобы получить результаты поиска из API YouTube, и я хочу просмотреть результаты, делая вызов для получения информации о каждом видео.Затем я хочу отправить результат ожидающих вызовов API в хранилище резервов.Моя проблема в том, что я хочу сделать свой код многократно используемым, поэтому у меня возникают проблемы с возвращением функции после завершения цикла.

Итак, я пытаюсь настроить 3 разные функции.Первый получит исходный вызов API для получения результатов поиска.Довольно простой.Второй будет циклически просматривать результаты первой функции и возвращать всю информацию об отдельных видео.Третья функция будет вызываться из метода mapDispatchToProps в redux для отправки результатов в хранилище redux.

Моя проблема во второй функции, я не могу получить результаты цикла foreach для возврата.Я попытался вернуть новое обещание и if(videoArr.items.length === videos.length) resolve(), но это не сработало, и я попытался просто вернуть видео после условия if, но это тоже не сработало.

const key = ''

const getVideos = (url) => {
  return fetch(url + key)
  .then(res => res.json())
}

// ---- Problem is returning videos from this function below finish the setVideos function
const getInfo = (videoArr) => { 
  let videos = [];
  videoArr.items.forEach(function(video, index){
    let videoId = video.id.videoId ? video.id.videoId : video.id
    fetch('https://www.googleapis.com/youtube/v3/videos?part=snippet%2CcontentDetails%2Cstatistics&id=' + videoId + '&key=' + key)
    .then(res => res.json())
    .then((result) => {
      videos = [...videos, result.items[0]]
      if(videoArr.items.length === videos.length) return videos
    })
  });
}

const setVideos = (url) => dispatch => {
  getVideos(url)
  .then(result => getInfo(result))
  .then(videos => {
    dispatch({
      type: SET_VIDEOS,
      payload: videos
    })
  })
}

Я неЯ действительно уверен, что это лучший подход или нет, но у меня будет несколько функций, таких как setVideos(), вызывающих различные URL-адреса для getVideos() для подкачки страниц и тому подобное.Я могу заставить все работать, если я просто напишу одну длинную функцию и отправлю из then() внутри цикла for, как только будет выполнено условие if, но тогда у меня будет куча кода, и это кажется немного большим, поэтому я хотел быобъединить это в нечто вроде того, что я пытаюсь достичь выше.Надеюсь, что это имеет смысл, любая помощь будет оценена.

Answer 1

Я думаю Promise.all решит вашу проблему:

let promises = videoURLs.map(videoURL => {
  return fetch(videoURL)
    .then(res => res.json())
})
Promise.all(promises).then(array => {
  …
})