中端地图功能
问题描述:
调用阿比我有这样的代码中端地图功能
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显示为未定义。
答
这里的问题是,.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)
});
}
你需要运行你的代码的其余部分之前从'TypeIdToName'响应等待。 –
你可以让TypeIdToName返回一个承诺吗? –