vue axios拦截器介绍

末蓝、 2022-01-23 11:51 273阅读 0赞

axios的拦截器是一个作用非常大，非常好用的东西。分为请求拦截器和响应拦截器两种。  
我一般把拦截器写在main.js里。

## 1. 请求拦截器 ##

请求拦截器的作用是在请求发送前进行一些操作，例如在每个请求体里加上token，统一做了处理如果以后要改也非常容易。

<table> 
 <tbody> 
  <tr> 
   <td> <p><code>axios.interceptors.request.use(</code><code>function</code> <code>(config) { </code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>// 在发送请求之前做些什么，例如加入token</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>.......</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code> <code>config;</code></p> <p><code>&nbsp;&nbsp;</code><code>}, </code><code>function</code> <code>(error) { </code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>// 对请求错误做些什么</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code> <code>Promise.reject(error);</code></p> <p><code>&nbsp;&nbsp;</code><code>});</code></p> </td> 
  </tr> 
 </tbody> 
</table>

## 2. 响应拦截器 ##

响应拦截器的作用是在接收到响应后进行一些操作，例如在服务器返回登录状态失效，需要重新登录的时候，跳转到登录页。

<table> 
 <tbody> 
  <tr> 
   <td> <p><code>axios.interceptors.response.use(</code><code>function</code> <code>(response) { </code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>// 在接收响应做些什么，例如跳转到登录页</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>......</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code> <code>response;</code></p> <p><code>&nbsp;&nbsp;</code><code>}, </code><code>function</code> <code>(error) { </code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>// 对响应错误做点什么</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code> <code>Promise.reject(error);</code></p> <p><code>&nbsp;&nbsp;</code><code>});</code></p> </td> 
  </tr> 
 </tbody> 
</table>

## 3. 移除拦截器 ##

<table> 
 <tbody> 
  <tr> 
   <td> <p><code>var</code> <code>myInterceptor = axios.interceptors.request.use(</code><code>function</code> <code>() { </code><code>/*...*/</code><code>});</code></p> <p><code>axios.interceptors.request.eject(myInterceptor);</code></p> </td> 
  </tr> 
 </tbody> 
</table>

## 4. 为axios实例添加拦截器 ##

<table> 
 <tbody> 
  <tr> 
   <td> <p><code>var</code> <code>instance = axios.create();</code></p> <p><code>instance.interceptors.request.use(</code><code>function</code> <code>() { </code><code>/*...*/</code><code>});</code></p> </td> 
  </tr> 
 </tbody> 
</table>

拦截器真的非常重要非常好用~

原文地址：https://segmentfault.com/a/1190000016980755