Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/reactjs/24.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 处理异步foreach循环,然后分派给redux_Javascript_Reactjs_Loops_Asynchronous_Foreach - Fatal编程技术网

Javascript 处理异步foreach循环,然后分派给redux

Javascript 处理异步foreach循环,然后分派给redux,javascript,reactjs,loops,asynchronous,foreach,Javascript,Reactjs,Loops,Asynchronous,Foreach,我希望从youtube api获得搜索结果,我希望通过调用结果来获取每个视频的信息。然后我想将挂起的api调用的结果发送到redux存储。我的问题是,我想让我的代码可重用,所以在循环完成时,我很难让函数返回 所以我要做的是设置3个不同的函数。第一个将具有初始api调用以获取搜索结果。相当简单。第二个函数将循环第一个函数的结果,并返回所有单个视频信息。第三个函数将从redux中的mapDispatchToProps方法调用,以将结果发送到redux存储 我的问题是在第二个函数中,我无法获得fore

我希望从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()
进行分页等。如果我只编写一个长函数,并在满足if条件后从for循环中的
then()
中进行分派,那么我就可以让一切正常工作,但是我会有一堆代码,而且看起来有点太多,所以我想将它整合到类似于我在上面尝试实现的东西中。希望这是有意义的,谢谢您的帮助。

我想我会解决您的问题:

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

你能详细说明一下吗。我还对我的问题进行了编辑,以便更清楚地了解问题所在。好吧,我想起来了。谢谢,这是正确的解决方法,而不是试图退出for循环。非常感谢