Ajax网络请求的封装(演示)

最新推荐文章于 2025-05-13 15:11:40 发布

原创最新推荐文章于 2025-05-13 15:11:40 发布 · 290 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #javascript #前端

本文介绍了如何对Ajax网络请求进行基础封装，并进一步探讨了结合Promise的高级封装方法，旨在提升前端开发效率和代码可读性。

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

ajax网络请求的封装分为两个版本，第一个是基础版本，第二个是加了promise之后的封装

1.基础封装

ajax的封装
function ajax(ops){
	// 先处理默认属性
	ops.type = ops.type || "get";
	ops.data = ops.data || "";
	// 根据当前的请求方式，决定是否需要拼接数据，处理url
	ops.url = ops.type=="get" ? ops.url + "?" + ops.data : ops.url;
	var xhr = new XMLHttpRequest();
	// 开启请求
	xhr.open(ops.type, ops.url);
	// 根据类型决定send的内容及内容数据格式
	if(ops.type == "get"){
	    xhr.send();
	}else{
	    xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
	    xhr.send(ops.data);
	}
	// 开启监听
	xhr.onreadystatechange = function(){
	    if(xhr.readyState === 4 && xhr.status === 200){
	        // 执行回调函数，取出数据
	        ops.success(xhr.responseText);
	    }
	}
}

//调用代码
document.onclick = function(){
	//url根据具体地址修改
    var url = "http://localhost/ajax/data/get-post.php";
    ajax({
    	//成功后执行
        success:function(res){
       	console.log(res);
        },
        url:url,
        type:"get",
        data:"user=admin&pass=123"
    });
}

2.加了promise之后的封装

//ajax的封装
function ajax(ops){
	//默认处理
    ops.type = ops.type || "get";
    ops.data = ops.data || {};
    var str = "";
    //遍历对象得到请求内容
    for(var key in ops.data){
        str += `${key}=${ops.data[key]}&`;
    }
    if(ops.type=="get"){
        let t = new Date().getTime();
        ops.url = ops.url + "?" + str + "__qft="+ t;
    }
    var xhr = new XMLHttpRequest();
    xhr.open(ops.type, ops.url);
    if(ops.type == "get"){
        xhr.send();
    }else{
        xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        xhr.send(ops.data);
    }
    //Promise的运用
    return new Promise(function(resolve,reject){
        xhr.onreadystatechange = function(){
            if(xhr.readyState === 4 && xhr.status === 200){
                resolve(xhr.responseText);
            }else if(xhr.readyState === 4 && xhr.status !== 200){
                reject("当前请求失败了，失败的原因是：" + xhr.status);
            }
        }
    })
}

//方法一 直接调用
var p1 = ajax({
    type:"get",
    url:"xxx",
    data:{
        user:"admin",
        pass:123
    }
})
p1.then(function(res){
    console.log(res)
})
p1.catch(function(res){
    console.log(res)
})


//方法二 利用ES7 async-await调用
async function fn(abc){
	var p1 = await ajax({
	    url:"http://localhost/async-await/data/d1.php"
	});
	var p2 = await ajax({
	    url:"http://localhost/async-await/data/d12312.php"
	});
	var p3 = await ajax({
	    url:"http://localhost/async-await/data/d3.php"
	});
	
	var p3 = await ajax({
	    url:"http://localhost/async-await/data/d3.php"
	});
	var p3 = await ajax({
	    url:"http://localhost/async-await/data/d3.php"
	});
	console.log(p1, p2, p3);
	console.log(abc);
    }
    document.onclick = function(){
        fn("hello world");
    }