axios中return结果

原创已于 2024-01-06 12:51:41 修改 · 813 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #开发语言 #js #ecmascript

于 2024-01-05 15:43:51 首次发布

文章讲述了在前后端交互中如何使用async和await解决回调地狱的问题，以及如何利用axios的Promise特性在success回调外获取AJAX请求的结果。

做前后台交互时会经常用到 ajax，有时候会遇到这样的情况，我们在 a 方法中调用 b 方法，b 方法里是一个 ajax，成功请求后会返回一个结果 data，而我们希望通过 b 方法的返回值获取到 data，我们的代码可能是这样的：

function a() {
	var data = b();
}
 
function b() {
	$.ajax({
        type : "GET",
        url : "",
        dataType : "json",
        success : function (data) {
        	return data;
        }
    });
}

上面的return结果只会返回给success，还不是b方法的返回结果。

下面配合async和await，创建一个新的Promise对象（由于axios在封装时没有返回一个Promise对象），在success方法中resolve结果。

async onBlur(){
  var response=await new Promise((resolve,reject)=>this.$axios({
    url: `/proxy_version/renew/versionNumber`,
    method: 'get',
    params:{
      versionNumber:this.formdata.versionNumber
    },
    success: (result) => {
      // this.$message.success("操作成功！");
      resolve(result.data);
    }
  }));
  return response;
}