Vue axios请求拦截和相应拦截

在Vue项目中，可以使用axios来进行网络请求。拦截器是axios提供的一个功能，可以在发送请求前和接收响应后对请求进行拦截处理。拦截器可以用来增加请求头，统一处理错误，添加loading动画等。

请求拦截器会在每个请求发送之前被执行，可以在请求头中添加一些信息或进行一些全局性的操作。相应拦截器会在每个请求接收到响应后被执行，可以对响应的数据进行一些处理。

在Vue项目中，可以在main.js文件中配置axios的拦截器。首先需要导入axios和vue实例，然后使用axios的interceptors属性来添加拦截器。示例代码如下：

```
import axios from 'axios'
import Vue from 'vue'

// 请求拦截器
axios.interceptors.request.use(
? config => {
? ? // 在请求发送之前可以进行一些操作，比如添加token到请求头
? ? config.headers.Authorization = 'Bearer ' + getToken()
? ? return config
? },
? error => {
? ? // 如果请求出错，可以做一些处理
? ? return Promise.reject(error)
? }
)

// 响应拦截器
axios.interceptors.response.use(
? response => {
? ? // 对响应的数据进行一些处理，比如将结果统一封装成{ data, code, message }的格式
? ? const res = response.data
? ? if (res.code !== 200) {
? ? ? // 错误处理
? ? ? return Promise.reject(new Error(res.message || '请求出错'))
? ? } else {
? ? ? return res
? ? }
? },
? error => {
? ? // 如果响应出错，可以做一些处理
? ? return Promise.reject(error)
? }
)

Vue.prototype.$http = axios
```

在上述代码中，`axios.interceptors.request.use`方法用来添加请求拦截器，`axios.interceptors.response.use`方法用来添加相应拦截器。在请求拦截器中，可以通过`config`参数来修改请求的配置信息，比如在请求头中添加Authentication信息。在相应拦截器中，可以通过`response`参数来获取响应的数据，并进行一些处理，比如判断响应的状态码，统一封装响应的数据格式等。

这样配置了拦截器后，每个请求发送之前都会先执行请求拦截器的操作，然后再发送请求。每个响应返回后都会执行相应拦截器的操作，然后返回处理后的结果。

需要注意的是，在拦截器中返回一个`Promise.reject()`，可以中断请求并返回一个错误信息。这样在后续的请求操作或者`catch`方法中可以捕获到这个错误信息。