VUE异步函数return问题解决方案_vue异步是什么意思

异步函数return问题：

在写VUE前端代码时，会遇到将带有return结果的异步请求函数（如请求后台数据）设置为公共函数，在其他地方调用的场景。但是因为是异步请求数据，实际需要return的值在调用返回时，还未生成，所以导致return的内容为undefined。（见参考[1]的分析）

例如：公共函数和调用方式

//公共函数：根据异步返回的内容确定return值true或false
function a(){
		api({
       url: "/xxx/xxxx",     //后端异步请求
    	 method: "get",
		}).then((retData) => {
				if(retData.list.length > 0){
        	  return true;
        }else{
          	return false;
        }
		})
}

//调用位置
checkData(){
  	var result = a(); 		//result值为undefined！！
}

调用返回时，因为异步请求还未结束，真正的结果还没有获取到，所以以上代码调用位置result得到的返回值为“undefined”。

解决方案：

1. 通过Promise + async/await实现异步return调用

//公共函数：根据异步返回的内容确定return值true或false
function a(){
  return new Promise((resolve,reject)=>{
        api({
           url: "/xxx/xxxx",     //后端异步请求
           method: "get",
        }).then((retData) => {
            if(retData.list.length > 0){
                resolve(true);
            }else{
                resolve(false);
            }
        })
    })
}

//调用位置
async checkData(){
  	var result = await a(); 		//result值为期望的true或false
}

2. 通过回调函数实现异步return调用

//公共函数：根据异步返回的内容确定return值true或false
function a(func){
		api({
       url: "/xxx/xxxx",     //后端异步请求
    	 method: "get",
		}).then((retData) => {
				if(retData.list.length > 0){
        	  if(typeof func === "function"){
               func(true);
            }
        }else{
          	if(typeof func === "function"){
               func(false);
            }
        }
		})
}

//调用位置
checkData(){
  	var result;
    a(function(ret){
      result = ret;			//result值为期望的true或false
    }); 
}

如果在回调函数里面将return返回值赋值给全局变量this.xxx，不能直接this.xxx = ret，需要将this作为变量来引用（参考[2]说明），方法如下：

data() {
    return {
       result: true;
    };
｝
methods:{
  checkData(){
      a(function(ret){
         this.result = ret;       //这里报错：Uncaught (in promise) TypeError: Cannot read properties of undefined
      }); 	
  }，
  checkData2(){
     var this_alias = this;
      a(function(ret){
         this_alias.result = ret;     //正确的写法
      }); 	
  }
}

参考：

[1] vue中函数为什么不能在异步操作里return出数据_PC_136的博客-CSDN博客_vue异步return

[2] JS中this的指向问题（Uncaught (in promise) TypeError: Cannot read property ‘$router‘ of undefined）_whitek387的博客-CSDN博客