JS 基础篇(ajax底层封装)
程序员文章站
2022-06-30 19:26:08
...
js代码
function xmlAjax(opt){
return new Promise(function(resolve,reject){
var initOpt = {
method:'post',
url:'',
data:null,
async:true,
//告诉服务器,我给的是什么数据
contentType:'application/json;charset=UTF-8',
done:function(){},
fail:function(){}
// dataType:
};
var endobj = Object.assign({},initOpt,opt);
//1. 创建xml对象
var xhr = new XMLHttpRequest();
var isGet = endobj.method.toLowerCase()=='get';
if(isGet && endobj.data) {
// {
// name:'laney',
// age:'10'
// }
// http://localhost:3000/info ? name=laney&age=10&size=10
var str = '';
for(var key in endobj.data) {
str+=key+'='+ endobj.data[key]+'&';
}
str = str.substring(0,str.length-1);
endobj.url = endobj.url +'?'+str;
}
//2.创建HTTP请求,链接服务器
xhr.open(endobj.method,endobj.url,endobj.async);
//3. 设置请求头部的方法,必须在open和send之间
xhr.setRequestHeader('Content-Type',endobj.contentType);
//4. 发送数据
if(isGet) {
xhr.send(null);
} else {
if(endobj.data){
var dataparam = JSON.stringify(endobj.data);
xhr.send(dataparam);
} else {
xhr.send(null);
}
}
xhr.onreadystatechange = function(){
if(xhr.readyState==4) {
if(xhr.status==200) {
var data = JSON.parse(xhr.responseText);
// endObj.done(data);
resolve(data)
} else {
reject('error')
switch(xhr.status){
case 500:
break;
case 400:
break;
case 304:
break;
}
endObj.fail('error');
}
}
}
})
}
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>多个接口 链式调用</title>
<script src="./main2.js"></script>
</head>
<body>
<script>
debugger
xmlAjax({
url:'http://localhost:3000/msg/list',
type:'post',
data:{
name:'laney',
age:'30'
}
}).then((res)=>{
if(res.result.focus){
return xmlAjax({
url:'http://localhost:3000/msg/list/hello',
type:'post',
data:{
name:'laney'
}
})
}
}).then(function(res){
console.log(res);
})
</script>
</body>
</html>
下一篇: 高颜值手机仅999元起 千元超值手机推荐