Vue.js note14（axios拦截器&axios封装请求&封装url请求地址）

妖狐艹你老母 2023-03-03 08:40 106阅读 0赞

### 一、axios 拦截器 ###

官方文档：[http://www.axios-js.com/zh-cn/docs/\#%E6%8B%A6%E6%88%AA%E5%99%A8][http_www.axios-js.com_zh-cn_docs_E6_8B_A6_E6_88_AA_E5_99_A8]

拦截器定义好后的请求数据方法有两种：一种是定义好拦截器的页面内直接写service axios请求；另一种，是另外一个页面导入拦截器，然后封装service请求（其实就是axios请求）。

活跃于三个文件夹：view util api

##### 1、axios模块 #####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70]

##### 2、axios请求封装原理 #####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][20200729201214623.png]

##### 3、axios拦截器 #####

1.  请求拦截器  
    请求拦截器的作用是在请求发送前进行一些操作，例如在每个请求体里加上token，统一做了处理如果以后要改也非常容易。
2.  响应拦截器  
    响应拦截器的作用是在接收到响应后进行一些操作，例如在服务器返回登录状态失效，需要重新登录的时候，跳转到登录页。

##### 4、axios拦截器初体验 #####

在util工具文件夹中创建request.js文件用来编写拦截器。

import axios from "axios"
    // 创建axios 赋值给常量service 
    const service = axios.create();
    
    // 添加请求拦截器（Interceptors）
    service.interceptors.request.use(function (config) { 
        // 发送请求之前做写什么
        return config;
      }, function (error) { 
        // 请求错误的时候做些什么
        return Promise.reject(error);
      });
    
    // 添加响应拦截器
    service.interceptors.response.use(function (response) { 
        // 对响应数据做点什么
        return response;
      }, function (error) { 
        // 对响应错误做点什么
        return Promise.reject(error);
      });
      export default service

下面的是官网上给的：与我们写的略微不同的是，官网直接用axios 请求，而我们是创建了一个axios实例添加拦截器，并且后续axios封装，也是用实例来进行。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 2]  
**定义好后的使用方式有两种。**

第一种：在拦截器文件里进行测试。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 3]  
第二种：在页面中引用之后查看请求情况。看下个章节。  
![在这里插入图片描述][20200729201318477.png]

### 二、axios封装请求 ###

在项目中有很多请求，在管理的时候很不方便，那么我门需要对请求进行封装。  
在src下创建api文件夹，统一管理axios请求。  
注意：建议一个页面创建一个请求文件方便管理  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 4]  
在api文件夹的对应文件中引用拦截器文件。  
![在这里插入图片描述][20200729201413350.png]  
在封装请求文件中编写请求并暴露出来。  
我的：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 5]  
老师的：  
![在这里插入图片描述][2020072920141780.png]  
在需要的地方引用调用请求。  
比如我的：  
![在这里插入图片描述][2020073016530240.png]

老师的：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 6]

### 三、封装url请求地址 ###

我们请求数据时要写请求地址，如果我们直接使用，就如上面请求一样，从http协议开始如 `http://www.weather.com.cn/data/cityinfo/101320101.html` ，当有一天我们想要更改url请求地址的时候，你是不是要把所有请求里面的url全部重新更改一下，很麻烦对不对。

那有没有什么方法，让我们只更改一次域名如http://www.weather.com.cn，就可以在数据请求中全部替换掉？还真有，可以**把数据请求中的url地址封装一下**，允许我们以后只更新一次域名，全部的请求就可以更改掉。

**流程：**  
1、最好在自定义src/api中另新建一个文件夹，用来存放封装好的数据请求地址。  
![在这里插入图片描述][20200730155938124.png]  
用于封装数据请求地址。把当前与该域名有关的所有的请求地址放在api/url/index.js中。

2、可以定义一个或多个不同地址，然后暴露出来。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 7]  
![在这里插入图片描述][20200730163833968.png]  
3、使用这些已经封装好的url时，先导入文件（随便给个名字比如url），然后引用文件中某个对象地址。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 8]

4、如果配置了代理跨域  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 9]  
5、则把相关地方的url改了，用代理跨域自定义的接口名替代，比如我用的 /api  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 10]  
然后在请求中使用这个封装好的url地址，使用方法跟上面的一样。

### 总结 ###

主要就是这三项：axios拦截器、axios封装请求、封装url请求地址。

在axios请求中，一定注意封装性。然后拦截器肯定会有的，就算不同公司用的可能不一样。

[http_www.axios-js.com_zh-cn_docs_E6_8B_A6_E6_88_AA_E5_99_A8]: http://www.axios-js.com/zh-cn/docs/#%E6%8B%A6%E6%88%AA%E5%99%A8
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70]: /images/20230208/d303146eec95468cbf50150f0c0b7688.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 1]: /images/20230208/32b27e8d672e4dd9b5e2a8fedf2fe242.png
[20200729201214623.png]: /images/20230208/b36478584a414af384e6e9ad051fd000.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 2]: /images/20230208/131c2ece592247828d7c56b6d3b3fb7e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 3]: /images/20230208/ab3bf6630f464981bc81dd0d4052a0a8.png
[20200729201318477.png]: /images/20230208/b94a9e633f5f40128a8c48574bdfab2e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 4]: /images/20230208/8e6c7aa49d1e41989516162f3df69523.png
[20200729201413350.png]: /images/20230208/5fe283e3a9ce4f0c9710cbc050b1c114.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 5]: /images/20230208/87f9d9a2041849da95795761f1a6008f.png
[2020072920141780.png]: /images/20230208/e9e455db9e79442788145272ee9a51e8.png
[2020073016530240.png]: /images/20230208/4a1c4d9706064398ab20b87d68575ab5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 6]: /images/20230208/ec387cbb96584427a1504ba23e136221.png
[20200730155938124.png]: /images/20230208/99f1a5a9db7f42a1b2f3927be2c30bd3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 7]: /images/20230208/1b6f8fc7f01b450da20e9389723b8bb9.png
[20200730163833968.png]: /images/20230208/cdfad5a36c31491fa3cedf76a1f89678.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 8]: /images/20230208/dbfd0b5e802d420db82e9fd604f8c77a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 9]: /images/20230208/f6998952a230459ca5a7d043b4940e3c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 10]: /images/20230208/836783fa90f64115a32e5939b97ae672.png