河南品牌网站建设佛山制作网站公司
目录
- 自封装axios函数
- 封装axios函数实现步骤
- 1. 准备阶段
- 2. 实现无参get请求
- 3.实现有参get请求
- 4. 实现post请求
- 完整实例代码
自封装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>