AJAX回调函数

最新推荐文章于 2025-04-19 16:33:14 发布

happy sun

最新推荐文章于 2025-04-19 16:33:14 发布

阅读量630

点赞数

本文链接：https://blog.youkuaiyun.com/qq_44309406/article/details/101599429

版权

本文探讨了如何处理AJAX回调函数的嵌套使用，通过Promise转换传统AJAX，以及如何利用async和await来彻底解决回调地狱问题。

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

ajax回调函数嵌套使用

存在问题（回调地狱）：
	a  b  c d四个请求
	a请求成功后开始b请求，b请求成功后开始c请求，c请求成功开始d请求
	ajax(url,{},function(){
		a请求
		xxxxx
		xx
		xx
		xxx
		//开始b请求
		ajax(url,{},function(){
			b请求
			xxx
			xxx
			xx
			//开始c请求
			...
		})
	});

通过promise（承诺）改造ajax

function ajax(url, options,success) {
    var defaultJSON = {
        method: "get",
        data: "",
        dataType:false
    }
    // 默认值处理
    options = options ? options : {};
    for (var key in options) {
        defaultJSON[key] = options[key];
    }
    
    var xhr = null;
    xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
    var data = "";
    if( defaultJSON.data ){
        for( var key in defaultJSON.data ){
          data += ""+key+"="+defaultJSON.data[key]+"&";
        }
        data = data.substr(0,data.length-1);
        defaultJSON.data = data;
    }
    if( defaultJSON.method ==="get"&&defaultJSON.data ){
        url = url+"?"+defaultJSON.data;  
    }

    xhr.open(defaultJSON.method, url);
    
    if(defaultJSON.method=="post"&&defaultJSON.data){
	     xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
	     console.log(defaultJSON.data);
	     xhr.send(defaultJSON.data);
	    }else{
	     xhr.send();
    }
   
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
            // 格式化 返回数据
            var res=xhr.responseText;
            if(defaultJSON.dataType){
                res = JSON.parse(res);
            }
            if(success){
                success(res);
            }
        }
    }
}

function http(url, options){
    return new Promise(function(resolve,reject){
        ajax(url, options,function(res){
            resolve(res);
        });
    });
}

彻底解决回调地狱 async 以及await

一个普通函数 前面加上 async就会变成异步的函数，在这个函数内部，就可以通过await 关键字 等待一个primise执行
function http(url, options){
    return new Promise(function(resolve,reject){
        ajax(url, options,function(res){
            resolve(res);
        });
    });
}
//请求
async function fillList(){
	//ajax请求 数据
	var list = await http(url,{});
	//代码会等待 http promise 未来的承诺执行
	//list 就是 未来的承诺resolve reject 调用的传的参数
}