自封装axios函数
封装axios函数实现步骤
1. 准备阶段
理解axios函数的底层原理，包括Promise,XMLHttpRequest等概念
- XMLHttpRequest工作过程
先创建一个XMLHttpRequest实例对象，设置请求方式和url地址，绑定loadend事件，响应.reponse，最后在发送数据。如果请求方式为get，则需要将查询参数写在url网址后，如果请求方式为post，则寻要在发送请求前设置相应头 - promise工作
先创建一个promise实例对象，里面传递resolve，reject两个参数。resolve代表请求成功，调用then；reject代表请求失败，调用catch
自行准备接口
2. 实现无参get请求
利用promise的.then方法，封装axios函数，返回一个promise实例对象，赋予函数.then方法
- 如果method为空，则默认为get方法
- 判断ajax.status的值，如果访问成功，则用resolve传response，如果访问失败，则用reject抛错误
function myAxios(obj) {
return new Promise((resolve, reject) => { //确保自定义axios函数可以调用.then和.catch方法
const ajax = new XMLHttpRequest()
ajax.open(obj.method || 'get', obj.url) //如果method为空，则为get方法
ajax.addEventListener('loadend', (e) => {
if(ajax.status>=200&&ajax.status<300){ //判断相应是否成功
resolve(ajax.response)
}else{
reject(new Error(ajax.response))
}
})
ajax.send()
})
}
3.实现有参get请求
在配置请求方法前，对params进行判断，如果存在params，则将其转换为查询字符串，并且拼接到url网址后
const a = obj.params ? '?'+new URLSearchParams(obj.params) : '' //转换查询参数
ajax.open(obj.method || 'get', `${obj.url}${a}`) //查询参数拼接
4. 实现post请求
在数据发送前判断data是否存在，如果存在则先设置相应头，在将data数据以JSON字符串的形式发送出去
if(obj.data){
ajax.setRequestHeader('Content-Type', 'application/json')
ajax.send(JSON.stringify(obj.data)) //发送的数据为JSON字符串形式
}
else{
ajax.send()
}
完整实例代码
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>封装_简易axios函数_获取省份列表</title>
</head>
<body>
<script>
function myAxios(obj) {
return new Promise((resolve, reject) => {
const ajax = new XMLHttpRequest()
const a = obj.params ? '?' + new URLSearchParams(obj.params) : ''
ajax.open(obj.method || 'get', `${obj.url}${a}`)
ajax.addEventListener('loadend', (e) => {
if (ajax.status >= 200 && ajax.status < 300) {
resolve(ajax.response)
} else {
reject(new Error(ajax.response))
}
})
if (obj.data) {
ajax.setRequestHeader('Content-Type', 'application/json')
ajax.send(JSON.stringify(obj.data))
}
else {
ajax.send()
}
})
}
myAxios({
url: 'http://hmajax.itheima.net/api/register',
data: {
username: 'baiyuansong',
password: '1234567'
},
method: 'post'
}).then(res => {
console.dir(res)
})
</script>
</body>
</html>