当前位置：首页 > article >正文

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

article 2025/4/2 10:55:39

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