时间戳

首页 > 解决方案 > 处理异步 foreach 循环然后分派到 redux

javascript - 处理异步 foreach 循环然后分派到 redux

问题描述

我希望从 youtube api 获取搜索结果，并且我想循环调用结果以获取每个视频信息。然后我想将挂起的 api 调用的结果发送到 redux 存储。我的问题是我想让我的代码可重用，所以当循环完成时我无法让函数返回。

所以我想做的是设置3个不同的功能。第一个将具有初始 api 调用以获取搜索结果。相当简单。第二个将遍历第一个函数的结果并返回所有单个视频信息。第三个函数将从 redux 中的 mapDispatchToProps 方法调用，以将结果分派到 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()满足 if 条件后从 for 循环内部分派，我可以让一切正常工作，但是我将有一堆代码并且看起来有点多，所以我想将它整合到类似于我在上面想要实现的目标。希望这是有道理的任何帮助将不胜感激。

标签： javascriptreactjsloopsasynchronousforeach

解决方案

我认为 Promise.all将解决您的问题：

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

推荐阅读