JS实现Ajax 请求后台接口

最新推荐文章于 2025-04-28 15:27:03 发布

逩跑鍀小学生

最新推荐文章于 2025-04-28 15:27:03 发布

阅读量2.3k

点赞数

文章标签： javascript ajax 前端

本文链接：https://blog.csdn.net/codingleader/article/details/125439250

版权

本文详细介绍了如何使用原生JavaScript实现GET和POST请求，并通过Promise封装成更友好的异步处理方式。示例代码展示了如何进行XMLHttpRequest操作，以及在成功和失败时的回调处理。通过这种方式，可以更方便地在第三方页面中嵌入H5页面并进行数据交互。

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

写本文的项目前提是，公司和第三方合作，我们提供H5页面给到第三方，第三方在他们主页面嵌入我们的页面。中间的红框就是我们要提供的画面。

1、原生JS实现

原生JS理解起来比较简单明了，我这里是把get请求和post请求都抽出来了。

// obj包括接口参数、接口地址、请求类型
// successFun成功回调
// errorFn失败回调
// flag 同步、异步   true-异步
function httpAjax(obj, successFun, errorFn){
    var xmlHttp = null;
    if(window.XMLHttpRequest){
        xmlHttp = new XMLHttpRequest;
    }else if(window.ActiveXObject){
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    }

    var httpMethod = obj.method.toUpperCase();
    var httpUrl = obj.url;
    var requestData = JSON.stringify(obj.data) || {};
    xmlHttp.onreadystatechange = () => {  //每当 readyState 属性改变时，就会调用该函数
		if(xhr.readyState === 4 && (xhr.status >= 200 && xhr.status < 300)) {
			//请求成功执行的回调函数
			successFun(xmlHttp.responseText);
		}else {
            errorFn()
        }
	}
    
    //请求接口
	if(httpMethod == 'GET'){
		xmlHttp.open("GET",httpUrl,obj.flag);
		xmlHttp.send();
	}else if(httpMethod == "POST"){
		xmlHttp.open("POST",httpUrl,obj.flag);
		xmlHttp.setRequestHeader("Content-Type","application/json");
		xmlHttp.send(requestData);
	}
   
}



// 调用方式
let params = {
    flag: true, //异步请求
    data: {}, //接口数据
    url: 接口地址,
    method: "post"
}
httpAjax(params, function(res){
    let result = JSON.parse(res) // JSON.parse() 方法用来解析JSON字符串，构造由字符串描述的JavaScript值或对象
}, function(){
    console.log("返回错误")
})

2、使用Promise实现

使用Promise实现换了回调的方式没看起来规格更高级~哈哈；

建议先理解一下Promise的基本原理

function httpAjax(obj){
    const p = new Promise((resolve, reject) => {
        var xmlHttp = new XMLHttpRequest()
        var httpMethod = obj.method.toUpperCase();
        var httpUrl = obj.url;
        var requestData = JSON.stringify(obj.data) || {};
        xmlHttp.onreadystatechange = () => {  //每当 readyState 属性改变时，就会调用该函数
		    if(xhr.readyState === 4 && (xhr.status >= 200 && xhr.status < 300)) {
			   resolve(JSON.parse(xhr.responseText))
		    }else {
                reject("错误")
            }
	    }
    
        //请求接口
	    if(httpMethod == 'GET'){
		    xmlHttp.open("GET",httpUrl,obj.flag);
		    xmlHttp.send();
	    }else if(httpMethod == "POST"){
		    xmlHttp.open("POST",httpUrl,obj.flag);
		    xmlHttp.setRequestHeader("Content-Type","application/json");
		    xmlHttp.send(requestData);
	    }
    
    })

    return p
   
}


// 调用

httpAjax(url).then(res => {console.log(res)}).catch(reason => {console.log(reason)})