学习记录-Ajax-自封装axios函数

2025/3/29 18:20:08 来源：https://blog.csdn.net/sinbowper/article/details/146421297 浏览: 次关键词：学习记录-Ajax-自封装axios函数

自封装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>