axios 源码分析的总结

Bertha 。 2022-08-31 12:21 125阅读 0赞

#### 一、axios 源码分析的总结 ####

1.  `axios` 与 `Axios` 的关系，如下所示：

*  从语法上来说: `axios` 不是 `Axios` 的实例
 *  从功能上来说: `axios`是 `Axios` 的实例
 *  `axios` 是 `Axios.prototype.request` 函数 `bind()` 返回的函数
 *  `axios` 作为对象有 `Axios` 原型对象上的所有方法, 有 `Axios` 对象上所有属性

1.  `instance`与 `axios` 的相同点，如下所示：

*  都是一个能发任意请求的函数: `request(config)`
 *  都有发特定请求的各种方法: `get()/post()/put()/delete()`
 *  都有默认配置和拦截器的属性: `defaults/interceptors`

1.  `instance` 与 `axios` 的不同点，如下所示：

*  默认配置很可能不一样
 *  `instance`没有 `axios` 后面添加的一些方法: `create()/CancelToken()/all()`

1.  `axios` 运行的整体流程，如下所示：

*  整体流程:  
    `request(config) ==> dispatchRequest(config) ==> xhrAdapter(config)`
 *  `request(config)`:  
    将请求拦截器 / `dispatchRequest()` / 响应拦截器 通过 `promise` 链串连起来, 返回 `promise`
 *  `dispatchRequest(config)`:  
    转换请求数据 ===> 调用 `xhrAdapter()` 发请求 ===> 请求返回后转换响应数据. 返回 `promise`
 *  `xhrAdapter(config)`:  
    创建 `XHR` 对象, 根据 `config` 进行相应设置, 发送特定请求, 并接收响应数据, 返回 `promise`

1.  `axios` 的请求拦截器是什么，如下所示：

*  在真正发送请求前执行的回调函数
 *  可以对请求进行检查或配置进行特定处理
 *  成功的回调函数，传递的默认是 `config`(也必须是)
 *  失败的回调函数, 传递的默认是 `error`

1.  `axios` 的响应拦截器是什么，如下所示：

*  在请求得到响应后执行的回调函数
 *  可以对响应数据进行特定处理
 *  成功的回调函数, 传递的默认是 `response`
 *  失败的回调函数, 传递的默认是 `error`

1.  `axios` 的请求/响应数据转换器是什么，如下所示：

*  请求转换器，对请求头和请求体数据进行特定处理的函数，代码如下：

if (utils.isObject(data)) { 
       setContentTypeIfUnset(headers, 'application/json;charset=utf-8');
       return JSON.stringify(data);
    }

*  响应转换器，将响应体 `json` 字符串解析为 `js` 对象或数组的函数，代码如下：

response.data = JSON.parse(response.data)

1.  `response` 的整体结构，代码如下：

{ 
        data,
        status,
        statusText,
        headers,
        config,
        request
     }

1.  `error` 的整体结构，如下所示：

{ 
       message,
       response,
       request,
    }

1.  如何取消未完成的请求，如下所示：

*  当配置了 `cancelToken` 对象时, 保存 `cancel` 函数，如下：
    
     *  创建一个用于将来中断请求的 `cancelPromise`
     *  并定义了一个用于取消请求的 `cancel` 函数
     *  将 `cancel` 函数传递出来
 *  调用 `cancel()` 取消请求，如下：
    
     *  执行 `cancel` 函数, 传入错误信息 `message`
     *  内部会让 `cancelPromise` 变为成功, 且成功的值为一个 `Cancel` 对象
     *  在 `cancelPromise` 的成功回调中中断请求, 并让发请求的 `proimse` 失败, 失败的 `reason` 为 `Cancel` 对象