map 函数中的 axios.get() 以获取返回 promise 对象的多个对象的数据答案

【问题标题】：Axios.get() inside a map function to get data for multiple objects returning promise objectmap 函数中的 axios.get() 以获取返回 promise 对象的多个对象的数据
【发布时间】：2019-06-26 23:04:50
【问题描述】：

我一直在从 Array.map 函数返回的对象中调用 axios fetch 时遇到问题。每当我返回响应时，它都会向包含我需要的数据的数组返回一个 promise 对象，但我似乎无法解析 promise 对象以从中获取我需要的数据。当我 console.log 响应时，我得到一个常规对象而不是一个承诺。

我尝试过使用 Promise.all ，使用 redux-thunk 进行调度（但这会为每个数组项调度不同的操作）、JSON.parse、JSON.stringify，但是我似乎无法让异步运行在数组中

export const checkStreamerStatus = streamers => {
  return{
    type: CHECK_STREAMER_STATUS,
    payload: {
      streamers: streamers.map(streamer => ({
        ...streamer,
        status: getStatus(streamer)
      }))
    }
  }
}

const getStatus = streamer => {
  return axios.get(`https://www.googleapis.com/youtube/v3/search?part=snippet&channelId=${streamer.social.youtube}&type=video&eventType=live&key=[API KEY]`)
    .then(res => res.data)
    .catch(err => err)    
}

我希望代码输出一个对象数组，其中包含来自 fetch 调用的数据作为每个名为“status”的对象中的新键，然后我希望使用返回的数组更新我的 reducer 中的状态。

【问题讨论】：

标签： javascript reactjs redux react-redux redux-thunk

【解决方案1】：

关于方法

但我似乎无法解析承诺对象

主要思想是：Promise 不是解析数据。这是关于等待数据到来。

这可以用async/await来完成（并且使用redux-thunk，因为我们不能只以同步的方式返回动作）

export const checkStreamerStatus = (streamers) => async (dispatch) {
  dispatch({
    type: CHECK_STREAMER_STATUS,
    payload: {
      streamers: streamers.map(streamer => ({
        ...streamer,
        status: await getStatus(streamer)
      }))
    }
  });
}

不完美之处在于所有getStatus都会被顺序调用。并且任何下一个请求都将等到上一个请求得到响应。为了让所有请求并行运行，我们需要创建 N 个请求，然后使用 Promise.all 等待所有请求：

async function appendWithStatus(streamer) {
  return {
    ...streamer, 
    status: await getStatus(streamer);
  };
}

export const checkStreamerStatus = (streamers) => async (dispatch) => {
    const streamersWithStatus = await Promise.all(streamers.map(appendWithStatus));
    dispatch({
      type: CHECK_STREAMER_STATUS,
      payload: {
        streamers: streamersWithStatus,
      }
   });
}

【讨论】：