Vue中的请求拦截器和响应拦截器
时间: 2024-06-09 21:11:01 浏览: 184
Vue添加请求拦截器及vue-resource 拦截器使用
在Vue中,请求拦截器和响应拦截器用于在发送请求和接收响应时对数据进行处理。请求拦截器在发送请求之前执行,可以对请求进行预处理,比如添加请求头信息、设置请求超时时间等。而响应拦截器则在接收到响应之后执行,可以对响应数据进行处理,比如统一处理错误码、进行数据格式转换等。
在Vue中,可以使用axios库来实现请求拦截器和响应拦截器。下面是一个示例代码:
```javascript
// 添加请求拦截器
axios.interceptors.request.use(config => {
// 在发送请求之前做些什么
// 比如添加请求头信息
config.headers.Authorization = 'Bearer ' + getToken();
return config;
}, error => {
// 对请求错误做些什么
return Promise.reject(error);
});
// 添加响应拦截器
axios.interceptors.response.use(response => {
// 在接收到响应之后做些什么
// 比如统一处理错误码
if (response.data.code !== 200) {
// 处理错误逻辑
// ...
}
return response;
}, error => {
// 对响应错误做些什么
return Promise.reject(error);
});
```
这段代码中,我们通过axios.interceptors.request.use方法添加了一个请求拦截器,并在其中添加了请求头信息。类似地,通过axios.interceptors.response.use方法添加了一个响应拦截器,并在其中处理了错误码的逻辑。
阅读全文