0

我一直在从 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”的对象中的一个新键，然后我希望用返回的数组更新我的减速器中的状态。

4

1 回答 1

0

至于方法

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

主要思想是：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,
      }
   });
}
于 2019-02-02T17:33:56.850 回答