jquery和vue中异步ajax如何链式传递多层数据

我们在写前端页面时可能需要对服务器返回的参数做多步处理,也就是第一个ajax请求到的参数,有可能会被另一个ajax请求当作参数传给后端。由于我们大多使用异步ajax请求,如果两个请求分开来写,就没法保证第一个ajax请求到的参数会及时传递给第二个ajax请求。

jquery中ajax的链式操作
当然在jquery中也可以采用嵌套的方法来解决上面问题。代码如下

$.ajax({  
    url: xxx,  
    success: function(resp){  
        $.ajax({  
            url: xxxx,  
            data: resp,  
            success: function(resp){  
                $.ajax({  
                    //...  
                });  
            }      
        });  
    }  
});

以上代码过于冗余且不直观。下面介绍前端promise方法,采用链式方式,解决这个问题。(现在大多数浏览器都已经内置支持了Promise)
首先我们将基于jquery的ajax请求封装成一个回调函数。

function newAjax(url, params, callback) {
	const promise = new Promise(function (resolve,reject) {
		 $.ajax({
		      url: xxxx,
		      type: 'POST'
		      data: params,
		      success: function (resp) {
		        resolve();
		        callback(resp);
		      },
			  error: function () {
		        reject();
		        console.log('出错了');
		      }
	    });
	});
	return promise;
}

接下来之前冗余的代码可以改写为

newAjax('xxxx','1', function(resp){
   var responseData= resp.data;
	}).then(newAjax('xxxxxx', responseData, function(resp){
    	var responseData2 = resp.data;
  		}).then(
  		 	console.log('成功请求两次'));

或者可以把ajax封装为

function newAjax(url, params) {
	const promise = new Promise(function (resolve,reject) {
		 var responseData;
		 $.ajax({
		      url: url,
		      type: 'POST'
		      data: params,
		      success: function (resp) {
		        responseData = resp.data;
		        resolve(responseData);
		      },
			  error: function () {
		        reject();
		        console.log('出错了');
		      }
	    });
	});
	return promise;
}

接下来链式操作的代码可以改写为

var result = newAjax('xxxx','1');
result.then(function(responseData) {
	return newAjax('xxxx',responseData);
}).then(function(responseData) {
	console.log(responseData,'成功请求两次')
})

VUE中ajax的链式操作
vue本身不支持发送AJAX请求,需要使用vue-resource(vue1.0版本)、axios(vue2.0版本)等插件实现。axios是一个基于Promise的HTTP请求客户端,用来发送请求,也是vue2.0官方推荐的,同时不再对vue-resource进行更新和维护。在vue框架中的ajax请求,是允许.then()的链式操作的,所以可以直接嵌套来写。

axios({
	method: "post",
    url: xxxx,
    dataType : 'JSON',
    data:{
    	key: '1'
     }
     })
     .then((resp)=>{
     	let responseData= resp.data;
     	axios({
        	method:'post',
        	dataType : 'JSON',
        	data: responseData
        	url:'xxxxxx'
         }).then((resp)=>{
         console.log(resp.data);
      })
     .catch((reject)=>{
      	 console.log('出错了');
});
相关推荐
©️2020 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页