在Vue中如何使用axios请求拦截

比眉伴天荒 2021-12-24 08:13 452阅读 0赞

# **一、前言** #

--------------------

#### 在这里和大家分享一下axios拦截在**实际项目**中的使用 (转载出处: [https://segmentfault.com/a/1190000016787376][https_segmentfault.com_a_1190000016787376] ) ####

很多人都看过axios的官方文档中拦截器这一栏，有的人可能会有点懵，因为文档只告诉你有这个东西，而不告诉你在什么情况下使用。很多初学者就会放弃使用axios拦截器，毕竟拦截器是可以不使用的，但是使用拦截器，会在页面中减少很多不必要的代码。

# **二、说在前面的** #

--------------------

#### 项目使用的ui框架是iview ####

以下友好提示均使用iview ui的message提示组件，例如this.$Message.xxx  
/api/request 仅仅只是例子接口，实际开发用后台提供的接口。  
code是后台状态码，我这里也只是例子，不要问我为毛我的返回码和你的怎么不一样这样的问题哈...这些都需要和后台沟通约定的。  
使用的请求头是：axios.defaults.headers\['Content-Type'\] = 'application/x-www-form-urlencoded';至于为什么使用这个请求头可以看看我的另外一篇文章[关于axios会发送两次请求，有个OPTIONS请求的问题][axios_OPTIONS]  
因为使用的是这个请求头所以需要用**qs模块**，不然后台不认这个数据。

# **三、不使用请求拦截** #

--------------------

#### 如果不使用请求拦截，也是可以的，但是会多了非常多的代码，我们以登录页为例。 ####

![bVbiAXv_w_427_h_337][]  
一个单纯，没有花里胡哨的页面，|ω・）

//双向数据绑定获取值
    let httpRequest = {};
    httpRequest.loginName = this.loginName
    httpRequest.password= this.password
    
    this.$axios.post("/api/request", this.$qs.stringify(httpRequest)).then(data => {
        //特殊错误处理，状态为10时为登录超时
        if(data.data.code === 10){
            this.$Message.error("登录已超时，请重新登录")
            this.$router.push("/login")
        //其余错误状态处理    
        }else if(data.data.code != 0){
            this.$Message.error(data.data.msg)
        //请求成功
        }else if(data.data.code === 0){
            //进行成功业务逻辑
        }
        //.......
    });

如果不使用请求拦截，那么对每一条该请求的每一个状态都要特殊处理，如果请求特殊状态有数十个，每个页面有很多请求，那么页面会变得很长很臃肿，不好维护。

# **三、使用请求拦截** #

--------------------

相同的请求返回代码我们可以抽取出来，写在请求拦截中  
当我们设置了拦截之后，在我们的组件代码中可以简化很多，还是以**登录界面**为例：

#### 在**main.js**中 ####

//请求发送拦截，把数据发送给后台之前做些什么......
    axios.interceptors.request.use((request) => {
    
      //这个例子中data是loginName和password
      let REQUEST_DATA = request.data
      //统一进行qs模块转换
      request.data = qs.stringify(REQUEST_DATA)
      //再发送给后台
      return request;
    
    }, function (error) {
      // Do something with request error
      return Promise.reject(error);
    });
    
    //请求返回拦截，把数据返回到页面之前做些什么...
    axios.interceptors.response.use((response) => {
      //特殊错误处理，状态为10时为登录超时
      if (response.data.code === 10) {
        iView.Message.error("登录已超时，请重新登录");
        router.push("/login")
      //其余错误状态处理    
      } else if (response.data.code != 0) {
        iView.Message.error(response.data.msg)
      //请求成功
      } else if(response.data.code === 0){
        //将我们请求到的信息返回页面中请求的逻辑
        return response;
      }
     //......
    
    }, function (error) {
      return Promise.reject(error);
    });
    //双向数据绑定获取值
    let httpRequest = {};
    httpRequest.loginName = this.loginName
    httpRequest.password= this.password
    
    this.$axios.post("/api/request", httpRequest).then(data => {
        //这是要先判断data，如果请求的数据状态code不为0,会被拦截，则data为undefined
        if(data){
            //进行请求返回成功逻辑
        }
    });

这样我们就对axios请求添加了拦截，可以减少很多代码逻辑，页面可读性更高，可维护性也更高

# **四、其他** #

--------------------

这就是axios拦截的最基础的用法，当然也不止于此，我们也可以进行扩展延伸，做更多的事情，只要你的业务有需求，axios拦截总能帮到你，这些就需要举一反三，工具是死的人是活的，我可以再举个小例子，比如设置**请求签名**。

请求签名是前台和后台约定的一种沟通方式，对数据进行加密，可以一定程度上保证数据的安全性

还是以这个登录页面为例

//双向数据绑定获取值
    let httpRequest = {};
    httpRequest.loginName = this.loginName
    httpRequest.password= this.password
    
    this.$axios.post("/api/request", httpRequest).then(data => {
        //这是要先判断data，如果请求的数据状态code不为0,会被拦截，则data为undefined
        if(data){
            //进行请求返回成功逻辑
        }
    });

我们把httpRequest这个data信息数据发送给后台之前，进行签名，并加密数据  
在**main.js**中，我们对发送的数据进行拦截

//请求发送拦截
    axios.interceptors.request.use((request) => {
    
      //获取请求的数据，这里是loginName和password
      let REQUEST_DATA = request.data
      //获取请求的地址，这里是/api/request
      let REQUEST_URL = request.url
       
      //设置签名并进行qs转换，且赋值给request的data，签名函数另外封装
      request.data = qs.stringify(requestDataFn(REQUEST_DATA, REQUEST_URL))
      //发送请求给后台
      return request;
    
    }, function (error) {
      // Do something with request error
      return Promise.reject(error);
    });
    
    //已封装好的签名函数
    function requestDataFn(data, method) {
    
      let postData = {}
    
      //时间戳，时间戳函数不作展示，也是已封装好的
      postData.timestamp = getNowFormatDate();
    
      //请求用户的session以及secretKey信息,为空是未登录，登录后我把它存在localStorage中，这个存在哪里都可以，这里只作为例子。
      postData.session = localStorage.getItem('session') || '';
      postData.secretKey = localStorage.getItem('secretKey') || '';
      
      //请求的地址，这里是/api/request
      postData.method = method;
        
      //请求的数据这里是loginName和password，进行base64加密
      let base64Data = Base64.encode(JSON.stringify(data));
       
      //设置签名并进行md5加密
      let signature = md5.hex(postData.secretKey + base64Data + postData.method + postData.session + postData.timestamp + postData.secretKey);
       
      //把数据再次进行加密
      postData.data = encodeURI(base64Data);
    
      postData.signature = signature;
       
      return postData
    }

这样我们就完成了对数据加密以及签名，这样再发送给后台。

**注意：这里只作为例子展示，如果需要用到签名，如何签名，是前台和后台沟通的结果!**  
axios请求拦截的用处远远不止这样，具体如何使用，还需要在实际工作，实际项目中随机应变啦。

转载于:https://www.cnblogs.com/Vayne-N/p/11089455.html

[https_segmentfault.com_a_1190000016787376]: https://segmentfault.com/a/1190000016787376
[axios_OPTIONS]: https://segmentfault.com/a/1190000016040998
[bVbiAXv_w_427_h_337]: /images/20211223/376c5081a7834092808055e846b93231.png