在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`方法中可以捕获到这个错误信息。