写本文的项目前提是,公司和第三方合作,我们提供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)})