表格某列需要字典映射的字段不展示了

147 阅读1分钟

现有某列【*类型(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()的结构。

最后采用的方法三