现有某列【*类型(type)】,后端返回code,
前端需请求字典将code转换为name(中文)。
在created中发起请求:getTypeDict(),获取类型的字典,将其转换为key为code、value为name的对象codeToNameMap
在mounted中发起请求:getList(),获取表格信息。
codeToNameMap:{
code: name,
leixing: '类型'
}
测试提出bug:偶现类型不展示。
查看代码,猜测原因:
created内容执行完毕后执行mounted,是同步代码,顺序执行。
getList中,用到codeToNameMap(将code转换为name)。
而请求接口有快有慢,当表格数据list请求到时,字典数据还没有请求到,故而在getlist中替换为的name为undefined,最终处理为不显示。
解决办法:
异步处理。
方法一:
async mounted() {
await this.getTypeDict();
this.getlist();
}
缺点是mounted后面的代码都要先等 getTypeDict()结束再说。
方法二:
mounted() {
(async function(){
await this.getTypeDict();
this.getlist();
})()
其他代码....
}
匿名函数,缺点是可读性一般,单独抽成一个函数感觉也没什么必要。
方法三:
mounted() {
// 保证在获取到类型之后获取页面表格数据
this.getTypeDict().then(() => {
this.getList();
});
}
getTypeDict之前仅仅是请求接口,将请求到的数据保存在变量中。
这样写的话要改成 return 请求,这个请求本身就是个Promise,加个return以便于可以使用this.getTypeDict().then()的结构。
最后采用的方法三