vue async/await 使用方式浅谈

charlotteeeeeee

VUE中,我们时常会遇到一种实际应用情况:B处的渲染需要依赖A处的接口返回,但是由于种种原因,不能将B直接放在A接口返回后的代码处理里面。这时候我们就需要使用async/await将异步转为同步,告诉B,等A有返回后你再执行

两个地方有改动:

sample.vue:

/**省略其他代码**/
import serviceschemsjs from '../../assets/js/serviceschema'
/**省略其他代码**/
/**
此处为动作触发口
serviceschemsjs为第三方引入的js插件
schematypes方法中有调用接口
changeTypeList需要用到schematypes中接口返回的数据(typelist)
如果没有async和await那么changeTypeList的执行就没有办法得到最新的数据
**/
async changeActiveService(data){
  // 通过endpoint获取服务下类型列表
  data.typelist=[]
  await serviceschemsjs.schematypes(data)
  this.changeTypeList(data)
},
changeTypeList(data){
/**此处的data.typelist最新的**/
/**你的其他需要处理该数据的代码**/
}

serviceschems.js:

/**
接口请求处也需要做异步同步处理**/
async schematypes(data) {
        if (!data) {
            return
        }
        /**假代码**/
        var url = data.url; 
        var token = token;
        // 接口需要有返回后才执行后续
        await QTgqlutil.fetchIntrospectionQuery(url, '', token).then(result => {
            data.typelist = []
            data.typelist =result.list
        })
    }
阅读 477
28 声望
2 粉丝
0 条评论
你知道吗?

28 声望
2 粉丝
宣传栏