详细介绍axios（配置axios发送请求拦截器取消请求）和axios的源码分析

Posted 2022-01-19 一乐乐

✿ axios的github地址（更多细节可以参考github）：https://github.com/axios/axios

一、axios的配置介绍（重点属性：url、baseURL、params、headers、 data、timeout、proxy）

1、常用的默认配置的是：baseURL、method、timeout

（1）baseURL：设置url的基本结构（请求根地址），域名和协议，再结合属性url某个请求路径，axios会自动将baseURL 和 url 进行拼接，从而得出正确的请求路径。
（2）method：请求方式 get/post
（3） timeout：延时时间（超过多少时间就取消请求）【单位是毫秒】

2、介绍其他配置属性：

（1）params： 请求参数（查询的对象）
（2）transformRequest、transformResponse 对请求结果进行预处理、对响应结果进行预处理
（3）headers：请求头 （在身份验证时，可以在头信息加入一个标识）
（4）data：请求体（数据形式有json对象和字符串形式）
（5）responseType：响应的数据格式 json/text/document/stream等
（6）withCredentials：跨域亲戚是否携带cookies
（7）auth：请求基础验证（验证用户名和密码）
（8）adapter：自定义请求处理
（9）xsrfCookieName和xsrfHeaderName 设置cookie的名字，设置头信息名字（安全设置，保证请求来自自己的客户端，避免跨站(域)攻击【标识保护作用---标识：返回请求的返回结果带有服务端的sessionID，保护：某些网站会通过超链接向在哪服务器发送请求，由于没有拿到服务器的sessionID，请求失败】）
（10）socketPath：设置socket文件位置，向docker的守护进行发送请求，与代理proxy有优先级关系，两者同时设定，优先选socket
（11）httpAgent、httpsAgent 设置客户端信息
（12）proxy 代理：axios的代理是在服务端node.js 中【代理作用：抓取数据（爬虫），
使用一个ip向某个目标服务器发送请求以抓取数据时，可能会被禁掉ip------解决：借助多个中间代理进行切换，发送请求从而获取到目标服务器的数据。】
（13）cancelToken：取消请求

二、axios的使用：

✿ 使用axios前必知细节：

1、axios“函数对象”（可以用作函数使用，也可以用作对象使用【通过源码发现其使用了方法bind和方法utils.extend实现的（文章最后有axios的源码分析）】）
所以看到 axios作为函数对象，可以获取属性，例如 axios.defaults.baseURL 也可以获取方法，例如 axios.get(url[, config]) 】

2、[, ] 是可选参数列表 举例：axios.get(url[, config])，其中的[, config] 是可选参数

---

1、axios作为方法，axios()方法传入一个对象参数（带有method、url等属性）：

■ 举例：

<button class="btn btn-primary">Get请求</button>

//获取按钮
const btns = document.querySelectorAll(\'button\');
btns[0].onclick = function ()
    //调用axios方法(返回值是一个Promise对象)，发送AJAx请求
    axios(
        //请求类型
        method: \'GET\',
        //URL
        url:\'http://localhost:3000/posts/2\'
    ).then(response => 
        console.log(response)
    )
;

2、axios作为对象,调用其方法request(config)、post(url[, config])等

■ 举例：

<button class="btn btn-primary">Get请求</button>

//获取按钮
const btns = document.querySelectorAll(\'button\');
btns[0].onclick = function ()
    //调用axios对象调用request方法（方法中传入一个对象参数）
    axios.request(
        //请求类型
        method: \'GET\',
        //URL
        url:\'http://localhost:3000/posts/2\'
    ).then(response => 
        console.log(response)
    )
;

□ 第二种和第一种差不多啦

3、使用axios的实例对象（通过axios.create([config]) 进行创建）

//一般创建axios实例时，传入一些默认配置
const instance = axios.create(
baseURL: \'https://some-domain.com/api/\',
    timeout: 1000,
    headers: \'X-Custom-Header\': \'foobar\'
);
//instance 实例和 axios对象功能基本差不多
//使用axios的实例对象
instance(
    url: \'/getJoke\'
).then(response => 
    console.log(response);
)

✿ 使用axios() 方法 和创建 axios实例对象的区别？

axios.create(config) 对axios请求进行封装，创建axios实例对象的意义：不同请求接口可以拥有不同配置：例如服务器A提供了一个请求接口a，服务器B提供了一个请求接口b，这时候针对具体请求接口而创建axios实例,就可以拥有该请求接口的配置（默认配置+常用配置）。

三、axios的拦截器（对请求、响应做预处理）

1、请求拦截器：axios.interceptors.request.use(成功处理函数，失败处理函数)

■ 请求拦截：

1,可能是config中有一些信息是不符合服务器的要求

2,希望每次发送网络请求，在界面可以显示有一个请求的图标，就是那个转呀转的圆圈

3,一些网络请求必须要有特殊信息，例如登录（需要有token）

2、响应拦截器：axios.interceptors.response.use(成功处理函数，失败处理函数)

■ 响应拦截：

1,对响应的数据进行格式处理

四、axios的取消请求

■ 作用：取消掉某些用户，多次不断地点击请求按钮而发送请求给服务器造成压力

■ 取消方式：
例如通过构造函数来创建取消令牌：在配置对象中添加 cancelToken属性，然后拿到执行函数中的参数c（ 取消函数）

let cancel = null;
//检测上一次请求是否完成（没完成，取消当前的请求）
if(cancle != null)
    cancle();

//axios发送请求
axios.get(\'/user/12345\', 
    cancelToken: new axios.CancelToken(function executor(c)//参数c是取消函数        	cancel = c;
    )
).then(response => 
    console.log(response);
    cancel = null; //请求执行完毕，恢复cancel的初始值

);

五、axios的源码分析：

1、查看axios的实例对象new Axios(defaultConfig);

① 在类Axios 发现有配置对象和拦截器对象属性
② 在Axios.js 文件中，还发现Axios的原型：Axios.prototype动态添加了属性方法

request，getUri，

\'delete\', \'get\', \'head\', \'options\'，

\'post\', \'put\', \'patch\'

// 通过配置创建 axios 函数
var axios = createInstance(defaults);

function createInstance(defaultConfig) 
    //创建一个实例对象 context 可以调用 get  post put delete request
    var context = new Axios(defaultConfig);// context 不能当函数使用 
	……


//=============== 在 Axios 类内有属性 配置对象和拦截器对象 =============
function Axios(instanceConfig) 
    //实例对象上的 defaults 属性为配置对象
    this.defaults = instanceConfig;
    //实例对象上有 interceptors 属性用来设置请求和响应拦截器
    this.interceptors = 
        request: new InterceptorManager(),
        response: new InterceptorManager()
    ;


//================== 在Axios.js 文件中，还发现：======================
Axios.prototype.request = function request(config) 
	……

Axios.prototype.getUri = function getUri(config) 
	……

utils.forEach([\'delete\', \'get\', \'head\', \'options\'], function forEachMethodNoData(method) 
    Axios.prototype[method] = function (url, config) 
	……
   

utils.forEach([\'post\', \'put\', \'patch\'], function forEachMethodWithData(method) 
    Axios.prototype[method] = function (url, data, config) 
	……
   

2、接着是instance：

首先是通过方法bind将request方法赋值给instance（此时instance是一个函数变量）；
然后，通过方法extends 将Axios.prototype 上的方法添加到 instance身上（此时instance是一个
“函数对象”变量）；还将实例对象content的属性（配置对象和拦截器对象属性）添加到instance身上

function createInstance(defaultConfig) 
//创建Axios的实例对象 context
    var context = new Axios(defaultConfig);//context 是实例对象，不能当函数使用
//将request 方法的 this 指向 context 并返回新函数 (instance 与 Axios.prototype.request 代码一致)
    var instance = bind(Axios.prototype.request, context); //instance是函数，可以用作函数使用
//将Axios的原型 Axios.prototype 的方法都添加到 instance 函数身上
    utils.extend(instance, Axios.prototype, context); //instance是"函数对象"，可当函数使用，也可当对象使用
//将实例对象content的方法和属性添加到 instance 函数身上
  utils.extend(instance, context);

  return instance;

■ bind函数：

//返回一个新的函数,并将新函数 this 绑定到一个对象身上
module.exports = function bind(fn, thisArg) 
    return function wrap() 
        var args = new Array(arguments.length);
        for (var i = 0; i < args.length; i++) 
            args[i] = arguments[i];
        
        return fn.apply(thisArg, args);
    ;
;

■ extend函数：

function extend(a, b, thisArg) 
    forEach(b, function assignValue(val, key) 
        if (thisArg && typeof val === \'function\') 
            a[key] = bind(val, thisArg);
         else 
            a[key] = val;
        
    );
    return a;