Question

我一直在从Array.map函数返回的对象内部进行axios提取调用时遇到问题。每当我返回响应时，它都会将一个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)    
}

我期望的代码输出对象的从取呼叫作为在所谓的“状态”的每个对象一个新的密钥数据的数组，然后我希望更新我的状态在我的减速器与返回的数组。

Answer 1

关于方法

但是我似乎无法解析promise对象

主要思想是：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,
      }
   });
}

地图函数中的Axios.get（）获取返回诺言对象的多个对象的数据

1 个答案: