js异步问题？

Question

this.dict.type.mq_type是从字典里获取的，直接调用changeSourceType()，由于this.dict.type.mq_type也是字典从接口获取的，this.dict.type.mq_type.forEach会报错，请问这种异步该怎么处理呢？

 changeSourceType() {
      let label = null
      this.filterDataSourceList = []
      this.dict.type.mq_type.forEach((item) => {
        if (item.value == this.form.src__type) {
          label = item.label
        }
      })
      this.dataSourceList.forEach((item) => {
        if (item.baseType == label) {
          this.filterDataList.push(item)
        }
      })
    },

Answer 1

从你的代码里没看出异步呀

Answer 2

既然 mq_type 是异步获得的，那需要依赖于 mq_type 的操作都应该在获得之后进行。

在 Vue 中有几个方式可以触发

1. 写一个函数，在异步获取 mq_type 的函数中，获得数据之后调用
2. 写一个 computed 属性，基于 mq_type 进行计算获得处理后的数据，那么 mq_type 变化时会自动触发
3. 使用 watch，和 computed 差不多
4. 在需要使用的时候去使用 mq_type，不管它是否有值，或者是什么值。反正有什么用什么（比如轮询，或者用户主动查询，如果需要取得 mq_type 值再处理，参考 [1]）

总之，异步你不能指望用的时候它一定在，那么就只有 1) 有什么用什么 2) 等到它有为止 3) 订阅它，让它有的时候触发（通知）处理

参阅：异步编程需要“意识” - 边城客栈 - SegmentFault 思否

Answer 3

既然你的 changeSourceType 方法中存在依赖于字典接口返回值的数据，那么不就要直接调用这个方法：

• 字典接口返回值不变的情况下，可以在页面初始化的时候就调用字典方法为 type.mq_type 赋值
• 字典接口返回值会变化的情况下，可以在触发 changeSourceType 之前保证你的字典接口调用完毕，那么你可以使用 promise 或者 async await 来实现

本文参与了SegmentFault 思否面试闯关挑战赛，欢迎正在阅读的你也加入。