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

最新推荐文章于 2024-12-17 10:19:40 发布

mathy_song

最新推荐文章于 2024-12-17 10:19:40 发布

阅读量823

点赞数 3

分类专栏：前端 promise 回调文章标签：链式方式 ajax嵌套服务器返回的参数做多步处理 promise

本文链接：https://blog.youkuaiyun.com/qq_39093601/article/details/93218091

版权

本文探讨了在前端开发中如何处理服务器返回的多层数据，通过jQuery和Vue的异步ajax请求实现链式操作。在jQuery中，通过Promise将ajax请求封装为回调函数，避免了嵌套调用的冗余。而在Vue中，使用axios，直接支持Promise的链式调用，简化了代码结构。示例展示了如何在jQuery和Vue中优雅地处理异步数据传递。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我们在写前端页面时可能需要对服务器返回的参数做多步处理，也就是第一个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<

最低0.47元/天解锁文章