一个简单的封装ajax函数
<script>
// GET http://www.liulongbin.top:3009/api/get
// POST http://www.liulongbin.top:3009/api/post
// 提供myAxios来实现发送ajax请求 ajax 异步操作 ==> 需要使用promise来封装ajax异步代码
function myAxios({method='get',url,params,data}){
return new Promise((resolve,reject)=>{
let xhr=new XMLHttpRequest
if(params){
let arr=[]
for(let k in params){arr.push(`${k}=${params[k]}`)
}
console.log(arr.join('&'))
url+=`?${arr.join('&')}`
}
xhr.open(method,url)
if(method.toLowerCase()==='get'){
console.log('get请求方式');
xhr.send()
}else{
if(data){
console.log('有data请求体');
xhr.setRequestHeader('content-type','application/json')
xhr.send(JSON.stringify(data))
}
}
xhr.addEventListener('load',function(){
resolve(JSON.parse(xhr.response))
})
xhr.addEventListener('error',function(){
reject('网络寄了没法搞')
})
})
}
// 发送get请求
document.querySelector('#btnGet').addEventListener('click', function () {
// 使用自己封装的ajax函数来发送请求
myAxios({
method: 'get',
url: 'http://www.liulongbin.top:3009/api/get',
params: {
name: 'lw',
age: 19
}
}).then((res) => {
console.log(res)
}).catch((err)=>{
alert(err)
})
})
// 发送post请求
document.querySelector('#btnPost').addEventListener('click', function () {
myAxios({
method: 'post',
url: 'http://www.liulongbin.top:3009/api/post',
params: {
name: 'lw',
age: 19
},
data: {
a: 1,
b: 2
}
}).then((res) => {
console.log(res)
})
})
</script>
<button id="btnGet">发送get请求</button>
<button id="btnPost">发送post请求</button>