中端地图功能

Question

调用阿比我有这样的代码

export const callingEveSkill =() => (dispatch, getState) => { 

    fetch('https://esi.tech.ccp.is/latest/characters/' + getState().ViewChr.Cid + '/skills/?datasource=tranquility&token=' + getState().ViewChr.At) 
    .then(response => response.json()) 
    .then(json => { 

     var SkillList = (json.skills.map((item, i) => { 
      var skill = TypeIdToName(item.skill_id) 
      return { 
       skill_id: (skill) , 
       current_skill_level: item.current_skill_level, 
       skillpoints_in_skill: item.skillpoints_in_skill 
      } 

      })) 

     return SkillList 

    }) 
    .then(SkillList => { 

     dispatch(updateSk(SkillList)) 
     dispatch(updateSkL('true')) 

    }) 
    .catch(err => { 
     console.log("skill error:" + err) 
    }); 
} 

在端的代码我叫TypeIdToName调用第三方API的技能ID更改为可读文本。我看到了这些调用，并且返回可读名称，但SkillList显示为未定义。

Answer 1

这里的问题是，.map（）不会等待承诺履行。以下是一些关于如何解决在使用的承诺构成一些想法：

1）重要重构您的API调用TypeIdToName（），所以它返回一个承诺

更多信息请参阅本：How do I convert an existing callback API to promises?

2）安装Q或允许承诺组合的任何其他库。 （Promise.all也可能为你工作取决于您的ENV）

https://github.com/kriskowal/q

OR

https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Promise/all

3）当映射API调用 - 收集他们返回的承诺。

4）使用Q.all()返回一个Promise，只有在所有的API调用完成后才能实现。您可能想限制您在同一时间点的同步连接拉动。

所以，你的代码应该是这样的：

import Q from 'q'; 

export const callingEveSkill =() => (dispatch, getState) => { 

    fetch('https://esi.tech.ccp.is/latest/characters/' + 
           getState().ViewChr.Cid + 
      '/skills/?datasource=tranquility&token=' + 
      getState().ViewChr.At 
    ) 
    .then(response => response.json()) 
    .then(json => { 

     //We build the array of promises here 
     let promises = json.skills.map((item, i) => { 

     //If you did the Step 1 - this should return a Promise object 
     //So our .map() has something to work with 
     return TypeIdToName(item.skill_id).then(
      (skill) => { 
      //As promises fulfil - the array of promises 
      //turns into array of objects like this one 
      return { 
       skill_id: (skill), 
       current_skill_level: item.current_skill_level, 
       skillpoints_in_skill: item.skillpoints_in_skill 
      } 
      } 
     ); 

     }) 

     //And this promises fulfils when all the others do 
     return Q.all(promises); 

    }) 

    //So here we get a SkillList 
    .then(SkillList => { 

     dispatch(updateSk(SkillList)) 
     dispatch(updateSkL('true')) 

    }) 
    .catch(err => { 
     console.log("skill error:" + err) 
    }); 
}