> 源于coderWhy教学视频思想，对axios做一个简单的小结，再次感谢coderwhy大神 Axios官网（中文）：[Axios (axios-http.com)](https://axios-http.com/zh/) ### 基本安装 ```bash //npm方式 npm install axios //yarn方式 yarn add axios ``` ### 基本使用 ```javascript axios(config) axios.request(config) axios.get(config) axios.post(config) ``` 缺点是耦合度太高，相同配置需多次重复，且不灵活 ### 封装思想 > - 直接使用axios，依赖性太强，如果今后更换网络请求库会很麻烦 > - 一些公共的请求功能，每次请求都需要重写配置 > - 将`aixos`进行加一层封装，将axios封装为自定义的`request`，将来直接使用request来发送网络请求就行，日后想要更换网络请求库，可以直接修改`request`层，将一些公共的功能封装在request层，如网络请求头添加`Authorization`（即`token`），加载`loading`效果等等，拦截器可以灵活封装 ![image-20211024150938188](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/cee81d5268e041e28591593ae17d75ac~tplv-k3u1fbpfcp-zoom-1.image) 使用Typescript进行封装的一些前置知识梳理 1. `axios(config)`中`config`的类型为`AxiosRequestConfig`，具体见官网:[请求配置 | Axios 中文文档 (axios-http.cn)](https://www.axios-http.cn/docs/req_config) 常用的有几个：`url,method,baseUrl,data,timeout`等默认配置可以进行升级改造，新建一个接口实现`AxiosRequestConfig`，在其中添加一些新的配置 2. `AxiosResponse`---`axios`默认的返回值类型，接收泛型`T`默认为`any`，代表的是实际接收到的返回数据类型，一般会将`T`设置为`IDataType`。 ```typescript //一般情况下我们只使用data export interface AxiosResponse { data: T; status: number; statusText: string; headers: any; config: AxiosRequestConfig; request?: any; } //一般在使用中，我们会将返回数据类型定义为如下形式 export interface IDataType { status: string msg: string data: T } ``` 日常使用中，我们不会使用`AxiosResponse`作为封装后的返回值数据类型，会提取其中的`data`，可以通过在响应成功拦截器中返回`result.data`来实现(后面会详细介绍)，而`data`的类型即为`IDataType` 3. 封装统一使用原生实例的`request`方法来进行 ```typescript //T默认是any类型，返回值默认是AxiosResponse request> (config: AxiosRequestConfig): Promise; ``` 封装后实现的效果如下： ```typescript //T即为IDataType类型，返回的是一个Promise xxRequest.get(config: xxRequestConfig): Promise ``` ### 一、封装一（去耦合） 1. 创建自定义网络请求类JJRequest，将axios实例包装在内 ```typescript //service/request/request.ts class JJRequest { instance: AxiosInstance constructor(config: AxiosRequestConfig) { this.instance = axios.create(config) } //返回的Promise中结果类型为AxiosResponse request(config: AxiosRequestConfig): Promise { return new Promise((resolve, reject) => { this.instance .request(config) .then((res) => { resolve(res) }) .catch((err) => { reject(err) }) }) } } ``` 2. 创建实例（仅配置基本的`baseURL`和`timeout`，属于实例级别配置） ```typescript //service/index.ts //使用环境配置 const jjRequest = new JJRequest({ baseURL: process.env.VUE_APP_BASE_URL, timeout: process.env.VUE_APP_TIME_OUT }) ``` 3. 具体使用 ```typescript //main.ts jjRequest .request({ url: '/xxx' }) .then((res) => { console.log(res) }) ``` ***查看结果：可以看出结果为`AxiosResponse`类型*** ![image-20211024185624638](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4308d94f70844d30b7512890da2019c2~tplv-k3u1fbpfcp-zoom-1.image) ### 二、封装二（添加全局级别拦截）原生的拦截器位于`axiosInstance`实例中，使用方法是（来源官网:[拦截器 | Axios 中文文档 (axios-http.cn)](https://www.axios-http.cn/docs/interceptors)）注意：响应成功和响应失败的判别标准，以状态码`2xx`为界限，超出的响应失败 ```typescript // 添加请求拦截器 axios.interceptors.request.use(function (config) { // 在发送请求之前做些什么 return config; }, function (error) { // 对请求错误做些什么 return Promise.reject(error); }); // 添加响应拦截器 axios.interceptors.response.use(function (response) { // 2xx 范围内的状态码都会触发该函数。 // 对响应数据做点什么 return response; }, function (error) { // 超出 2xx 范围的状态码都会触发该函数。 // 对响应错误做点什么 return Promise.reject(error); }); ``` 全局拦截在`JJRequest`的构造函数中实现 ```typescript //service/request/request.ts //省略前后部分代码 //.... constructor(config: AxiosRequestConfig) { this.instance = axios.create(config) //全局请求拦截 this.instance.interceptors.request.use( (config) => { console.log(config) return config }, (error) => { console.log('全局请求失败拦截', error) } ) //全局响应拦截 this.instance.interceptors.response.use( (res) => { //res为AxiosResponse类型，含有config\data\headers\request\status\statusText属性 console.log(res) //改造返回的数据类型，即将AxiosResponse的data返回 return res.data }, (error) => { console.log('全局响应失败拦截') console.log(error.request)// console.log(error.response) return error } ) //加入泛型限定，返回数据类型为T， request(config: AxiosRequestConfig): Promise { return new Promise((resolve, reject) => { this.instance .request(config) .then((res) => { resolve(res) }) .catch((err) => { reject(err) }) }) } } ``` 实际使用时如下 ```typescript //main.ts==>返回的数据类型限定为IDataType jjRequest .request({ url: '/xxx' }) .then((res) => { console.log(res) }) .catch((err) => { console.log('=====', err) }) ``` 同封装一的接口在`main.ts`中运行后效果如下，只剩下`AxiosResponse`中的`data`，此处为自定义的`IDataType`类型，暂时还未明确加入泛型，后面会加入 ![image-20211025195609391](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/83f7adb570e548b2bf475062a32b2ea5~tplv-k3u1fbpfcp-zoom-1.image) 演示响应失败的拦截：（将后端接口中的`/xxx`改为了`/xxxx`，则前端访问`/xxx`将出现响应失败`404`） ![image-20211025200928153](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/12c2553e02b14a3eb8c53a96db9fd1c3~tplv-k3u1fbpfcp-zoom-1.image) ### 三、封装三（自定义实例级别的拦截器，添加token）需实现的效果如下： ```typescript //service/index.ts const jjRequest = new JJRequest({ baseURL: process.env.VUE_APP_BASE_URL, timeout: process.env.VUE_APP_TIME_OUT, //实例级别的拦截器，在创建axios实例的时候携带拦截器 interceptors:{ requestInterceptor: ... requestInterceptorCatch: ... responseInterceptor: ... responseInterceptorCatch: ... } }) ``` 因为原生的`AxiosRequestConfig`中没有拦截器配置这个属性，因此需要自定义改造，一是**自定义拦截器接口**，二是**自定义请求配置接口** 1. 自定义拦截器接口（共四个拦截器，四个函数） ```typescript interface IJJRequestInterceptors { //请求成功 requestInterceptor?: (config: AxiosRequestConfig) => AxiosRequestConfig //请求失败 requestInterceptorCatch?: (error: any) => any //响应成功 responseInterceptor?: (res: T) => T //响应失败 responseInterceptorCatch?: (error: any) => any } ``` 2. 自定义请求配置接口，可选属性，可配可不配 ```typescript interface IJJRequestConfig extends AxiosRequestConfig { interceptors?: IJJRequestInterceptors } ``` 3. 改造网络请求类 ```typescript class JJRequest { instance: AxiosInstance //该属性从实例中获取 interceptors?: IJJRequestInterceptor constructor(config: IJJRequestConfig) { this.instance = axios.create(config) //从实例配置config中获取拦截器配置 this.interceptors = config.interceptors //全局请求拦截 this.instance.interceptors.request.use(..., ...) //全局响应拦截 this.instance.interceptors.response.use(..., ...) //实例级别拦截 this.instance.interceptors.request.use( this.interceptors?.requestInterceptor, this.interceptors?.requestInterceptorCatch ) this.instance.interceptors.response.use( this.interceptors?.responseInterceptor, this.interceptors?.responseInterceptorCatch ) } } ``` 4. 创建实例 ```typescript const jjRequest = new JJRequest({ baseURL: process.env.VUE_APP_BASE_URL, timeout: process.env.VUE_APP_TIME_OUT, interceptors: { requestInterceptor: (config) => { //此处token在开发中可从localStorage中获取，token一般从服务器获取存在vuex中，然后转存到localStorage中，自己封装关于localStorage的方法，此处用一个常量代替 //const token = localCache.getCache('token') const token = 'this ia a token' if (token) { config.headers.Authorization = `Bearer ${token}` } return config } } }) ``` **结果展示** ![image-20211025205705544](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/16e64bebd6d04faf89ae733e176735b2~tplv-k3u1fbpfcp-zoom-1.image) ### 四、封装四（单个请求调用级别的拦截）实现调用级别的拦截，需要在`request`方法中做文章，将其参数类型也由`AxiosRequestConfig`升级为`IJJRequestConfig`，实现的思路是直接调用该方法 ```typescript //service/request/request.ts //... request(config: IJJRequestConfig): Promise { return new Promise((resolve, reject) => { //请求拦截设置位置 if (config.interceptors?.requestInterceptor) { config = config.interceptors.requestInterceptor(config) } this.instance .request(config) .then((res) => { //响应拦截设置位置 if (config.interceptors?.responseInterceptor) { res = config.interceptors.responseInterceptor(res) } resolve(res) }) .catch((err) => { console.log('=====', err) reject(err) }) }) } ``` 调用时如下 ```typescript jjRequest .request({ url: '/xxx', //单个请求调用级别单独设置拦截器 interceptors: { //直接返回IDataType类型结果中的data属性项 responseInterceptor: (res) => res.data } }) .then((res) => { console.log(res) }) .catch((err) => { console.log('=====', err) }) ``` 结果如下 ![image-20211025213317041](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5a673fda6f26453eb812a4f6a18be4d2~tplv-k3u1fbpfcp-zoom-1.image) ### 五、封装五（封装get、post等，方便调用） ``` //service/request/request.ts //.... get(config: IJJRequestConfig): Promise { return this.request({ ...config, method: 'GET' }) } post(config: IJJDRequestConfig): Promise { return this.request({ ...config, method: 'POST' }) } //其余patch、delete等参照一样的，实际调用时可直接使用jjRequest.get(config)来请求数据 ``` > 对`axios`的封装划分了三层 > > - 全局层 > - 实例层 > - 单个请求层 > > **将来可以根据实际情况做相应的封装，主要考虑的是将封装放在哪一层来做，本文主要是写一写封装的思想** > > 例如`loading`加载效果，可以在全局来做，也可以在实例层来做，也可以在单个请求处来做，看具体需求！此处就不在做具体的封装，仅做抛砖引玉的作用！ ### 补充：拦截的执行顺序 ![image-20211025220552357](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/391861809e044f328347b84384807fbb~tplv-k3u1fbpfcp-zoom-1.image) \ 对于axios的封装还有很多，比如关于重复请求的封装、参数序列化等，按需进行即可。ps:主要是我还不会，哈哈。。来自一个业余程序爱好者小弟的小结，不足之处，请各位大佬指正！