vue 处理异步请求

秒速五厘米 2022-10-24 05:56 375阅读 0赞

总结一下目前我了解到的异步请求的几种方式，后续继续补充。

### Vue处理异步请求 ###

*  一、使用promise处理异步
 *  二、使用async-await处理

# 一、使用promise处理异步 #

首先可以先了解一下`ES6-promise`的具体使用方法。  
执行步骤：  
1，实例化`Promise（new Promise（function（resolve,reject）））`  
2，用Promise的实例`调用then方法`  
简单示例：

应用：

loadQuotaForm () { 
      return new Promise((resolve, reject) => { 
        quotaFormDetail(this.quotaId).then(resp => { 
          this.quotaForm = resp.data.data
          // 重置表单
          this.dataForm.parentQuotaId = this.quotaForm.parent ? this.quotaForm.parent.quotaId : ''
          resolve(resp.data.data)//没参数 :resolve()
        })
      })
    },
    init(){ 
    //先执行loadQuotaForm 后将返回数据作为参数执行loadAndInitQuotaData
    	this.loadQuotaForm().then((quotaForm) => { 
    	  // 加载并初始化指标数据
    	  this.loadAndInitQuotaData(quotaForm)
    	})
    }

# 二、使用async-await处理 #

使用`async-await`将使得整个函数延后执行，即同步的代码执行完毕后再执行；对于async函数的内部，`使用了await的地方，会先执行，`然后再执行函数内await之后的同步代码。

mounted(){ 
      console.log('1');
      this.getXx();
      console.log('2')
    }
    methods:{ 
       async getXx(){ 
         await this.$http({ 
           url : xx,
           method:'get',
         })
         .then((res)=>{ 
           console.log('3');
         });
         //等待await执行完毕再执行下面的同步函数
         console.log('4')
       }
     }

执行结果为：1 2 3 4