Axios.get() 在 map 函数中获取返回 promise 对象的多个对象的数据

Question

我一直在使用 Array.map 函数在 returned 对象内部调用 axios 时遇到问题。每当我 return 响应时，它 return 就是一个包含我需要的数据的数组的承诺对象，但我似乎无法解析承诺对象以从中获取我需要的数据。当我 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"，然后我希望用 return编辑数组。

Answer 1

至于方法

but I can't seem to parse the promise object

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

它可以用 async/await 完成（并使用 redux-thunk 因为我们不能只 return 以同步方式进行操作）

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() 在 map 函数中获取返回 promise 对象的多个对象的数据

Axios.get() inside a map function to get data for multiple objects returning promise object

javascript

reactjs

redux

redux-thunk

react-redux