跟着B站学前端之axios源码解析

axios 是一个轻量的 HTTP客户端

axios是一个基于 Promise 来管理 http 请求的简洁、易用且高效的代码封装库。

为什么要封装?

为了统一使用，易于维护，减少冗余重复的代码工作：
如果每发起一次HTTP请求，就要把这些比如设置超时时间、设置请求头、根据项目环境判断使用哪个请求地址、错误处理等等（一堆配置与错误处理）操作，都需要写一遍

如何封装

封装的同时，你需要和 后端 协商好一些约定，请求头，状态码，请求超时时间.......

1. 设置接口请求前缀：根据开发、测试、生产环境的不同，前缀需要加以区分
2. 请求头 : 来实现一些具体的业务，必须携带一些参数才可以请求(例如：会员业务)
3. 状态码: 根据接口返回的不同status ， 来执行不同的业务，这块需要和后端约定好
4. 请求方法：根据get、post等方法进行一个再次封装，使用起来更为方便
5. 请求拦截器: 根据请求的请求头设定，来决定哪些请求可以访问
6. 响应拦截器： 这块就是根据 后端`返回来的状态码判定执行不同业务

实现一个简易mini版axios

// 构建一个Axios构造函数，核心代码为request
class Axios {
    constructor(){

    }
    request(config){
        return new Promise(resolve=>{
            const {url, methord, data} = config || {}
            let xhr = new XMLHttpRequest()
            xhr.open(methord, url, true)
            xhr.onload = function(){
                resolve(xhr.responseText)
            }
            xhr.send(data)
        })
    }
}
//最终导出axios的方法，即实例的request方法
function CreateAxiosFn(){
    let axios = new Axios()
    return axios.request.bind(axios)
}
// 得到最后的全局变量axios
let axios = CreateAxiosFn()

// 使用示例：
axios({url:'url', methord:'post',data:{} })

axios源码解析

前言：之前一直使用axios这个库来配合vue框架进行接口数据请求，最多是根据项目对axios进行了二次封装，只学到了简单的运用，对其实现与源码一直没有学习。这次根据B站相关课程，逐个知识点击破。不只解析了源码，还做了源码的模拟实现。

笔记参考：
【基础】vue项目对axios进行二次封装，request全局接口请求文件如何写？
【进阶】如何模拟实现一个发送请求的axios库？

知识要点如下：

1. axios的构造过程
2. axios如何发送请求
3. axios拦截器及其实现原理
4. axios如何取消请求
5. 自行封装一个完整的axios库