axios 通过 api 响应映射并进行多次 api 调用答案

【问题标题】：axios map through the api response and make multiple api callsaxios 通过 api 响应映射并进行多次 api 调用
【发布时间】：2017-10-31 20:57:50
【问题描述】：

我需要实现以下目标 - 从第一个 api 调用获取响应并获取响应 - 形成链接并在循环第一个响应对象时进行后续 api 调用 - 以下代码适用于第一次调用 - 但不适用于下一次调用?

从'axios'导入请求；

export function getData() {
  return async function getData(dispatch) {
    const { data } = await getDataFromApi();
    dispatch({ type: GET_DATA, payload: data });
    Object.keys(data).map((keyName, keyIndex) => {      
    Request.get(endpoint).then((response) => {
    dispatch({
      type: GET_SUBSEQUENTCALLS + keyIndex,
      payload: response });
  });
});

}; }

async function getDataFromApi() {
  return Request.get(endpoint);
}

【问题讨论】：

下一个电话不工作是什么意思？你有什么错误？你总共只有一个调度？
所以初始响应对象大小为 3 - 我看到 3 次不同的动作被分派，因为我正在附加 keyiNDEX - 但调用正在通过我想我需要等到它们中的每一个完成？这就是我在这里错过的部分？
是不是方法对了 - Request.get(endpoint).then((response) => {
我很难理解您要做什么，因为Request.get(endpoint).then((response) => { 中的事件，您循环遍历所有结果，但不要重复使用它们进行提取。我期待像Request.get(`${endpoint}/${keyIndex}`).then((response) => {
也可以是其他方式，我基本上是在尝试遍历第一个响应对象并进行后续调用？我怎样才能做到这一点？

标签： redux react-redux axios

【解决方案1】：

这是我的例子

let getTopStories = () => axios.get('https://someapi.com/v0/topstories.json');
let getStory = ( id )  => axios.get(`https://someapi.com/v0/item/${id}.json`);
let getUser = ( user ) => axios.get(`https://someapi.com/v0/user/${user}.json`)
let consolidateData = ( storyID ) => new Promise( ( resolve, reject ) => {

  let consolidated = {};

  getStory( storyID )
  .then( storyData => {
    let user = storyData.data.by;
    Object.assign( consolidated, { story: storyData.data } );
    return getUser( user );
  })
  .then( userData => {
    Object.assign( consolidated, { user: userData.data } );
    resolve( consolidated );
  });

});

getTopStories()
    .then( res => {
    let ids    = res.data;
    let random = _.sampleSize( ids, 10 );
    let proms  = random.map( consolidateData );
    return Promise.all( proms );
    }).then( storyData => {
    console.log( storyData );
  this.setState({ storyData })
    });

【讨论】：