axios原理和封装axios

目录

axios原理

axios引用地址

axios的使用

封装axios函数

小结

---

axios原理

官方定义：Axios是一个基于promise 的 HTTP 库，可以用在浏览器和 node.js中。

原理：axios本质上也是对原生XHR(XMLHttpRequest)的封装，只不过它是Promise的实现版本，符合最新的ES规范。

axios引用地址

axios库地址： http://ttps://cdn.jsdelivr.net/npm/axios/dist/axios.min.js

axios的使用

1、引入axios库

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

2、axios库使用语法

axios({
        //method默认GET
        method:'请求方式',
        url: '目标资源地址',
        params: {
            参数名1: 值1,
            参数名2: 值2
        }
        }).then((result) => {
        // 对服务器返回的数据做后续处理
        })

3、代码实例

axios({
            url:'http://hmajax.itheima.net/api/city',
            // 查询参数    参数名：pname 
            params: {
                pname: '四川省'
            }
        }).then((reslut) => {
            console.log(reslut.data.list);
            document.querySelector('.box').innerHTML = reslut.data.list.join('<br>');
        })

封装axios函数

模拟 axios 函数封装，更深入了解 axios 内部运作原理

// 定义myAxios函数，接收配置对象，返回Promise对象
        function myAxios(config){
            return new Promise((resolve,reject) => {
                // 发起XHR请求，默认请求方法为GET
                const xhr = new XMLHttpRequest()
                // 判断 params 选项 携带参数查询
                if(config.params) {
                    // 基于 URLSearchParams 转换查询参数字符串
                    const paramsObj = new URLSearchParams(config.params)
                    const queryString = paramsObj.toString()
                    // // 把查询参数字符串拼接到url?后面
                    config.url += `?${queryString}`
                }
                xhr.open(config.method || 'GET',config.url)
                xhr.addEventListener('loadend',() => {
                    // 调用成功/失败的处理程序
                    if(xhr.status >= 200 && xhr.status < 300) {
                        resolve(JSON.parse(xhr.response))
                    } else {
                        reject(new Error(xhr.response))
                    }
                })
                // 判断有data选项，携带请求体
                if(config.data) {
                    // 转换数据类型，在send中发送
                    const jsonString = JSON.stringify(config.data)
                    xhr.setRequestHeader('content','application/json')
                    xhr.send(jsonString)
                } else {
                    // 如果没有请求体数据，正常向服务器发起请求
                    xhr.send()
                }
                
            }) 
        }

小结

作者开发小白，刚接触AJAX相关知识，对最近了解知识做一个总结，一直使用axios，剖析axios在XMLHttpRequest原生原理