Vue程序中使用axios请求拦截可以简化HTTP请求处理、统一请求配置、添加通用处理逻辑、提高应用安全性。 其中，最常见的方法是在发送请求之前或接收响应之后进行拦截，以便进行特定的操作。例如，你可以在请求被发送到服务器之前，修改请求头信息或启动某种加载动画，在接收到响应后，统一处理错误或隐藏加载提示。
请求拦截主要利用axios提供的拦截器（interceptors）方法。通过axios的拦截器，你可以在请求发送之前对其进行处理，例如设置token、添加一些默认的请求参数、处理请求的序列化等。 这样不仅可以减少代码重复，还可以让请求处理流程更加清晰和易于维护。
一、配置请求拦截器
在Vue项目中，首先需要安装axios库，通过npm或yarn进行安装。
npm install axios --save
或
yarn add axios
然后，在项目中创建axios的配置文件，例如axios-config.js。
在axios配置文件中，你可以创建拦截器，并在其中添加请求拦截的逻辑。
import axios from 'axios';
// 创建axios实例
const service = axios.create({
baseURL: process.env.VUE_APP_API_URL, // api的base_url
timeout: 5000 // 请求超时时间
});
// 请求拦截器
service.interceptors.request.use(
config => {
// 在发送请求之前做些什么
const token = localStorage.getItem('token');
if (token) {
// 让每个请求携带token
config.headers['Authorization'] = 'Bearer ' + token;
}
return config;
},
error => {
// 对请求错误做些什么
Promise.reject(error);
}
);
export default service;
在上述代码中，我们首先导入了axios库，并通过axios.create方法创建了一个axios实例。在实例中，我们配置了API的基础URL和请求超时时间。随后，我们通过该实例的interceptors.request.use方法来创建请求拦截器。在请求拦截器中，我们添加了一个在发送请求前将token加入到请求头的逻辑。
二、应用拦截器处理请求
配置好请求拦截器后，我们接下来需要在Vue组件中应用它。
<script>
import service from '@/utils/axios-config';
export default {
name: 'ExampleComponent',
methods: {
fetchData() {
// 使用配置好的axios实例发起请求
service.get('/example-endpoint')
.then(response => {
// 处理响应数据
console.log(response);
})
.catch(error => {
// 处理错误
console.log(error);
});
}
}
}
</script>
在Vue组件的methods中，我们通过调用之前配置的service实例来发起请求。这里的service就是带有请求拦截器逻辑的axios实例，因此每次发送请求时都会自动附加token等信息。
三、处理全局响应拦截
除了请求拦截，axios还允许我们设置响应拦截器。就像请求拦截一样，响应拦截器用于在接收到响应后，但在then或catch处理之前执行特定逻辑。
// 响应拦截器
service.interceptors.response.use(
response => {
// 对响应数据做点什么
// 可以在这里进行一些操作，例如统一的错误处理、数据格式化等
return response;
},
error => {
// 对响应错误做点什么
// 你可以在这里处理所有请求的异常情况
return Promise.reject(error);
}
);
在响应拦截器中可以进行错误统一处理。如果后端返回的状态码表示未授权或会话过期，则可以在这里重定向到登录页面或者显示相应的错误提示。
四、综合应用请求与响应拦截
将请求和响应拦截器结合起来，你可以构建一个强大的网络请求功能，它将在整个Vue应用程序中提供有力的网络通信支持。
例如，可以统一处理网络请求的loading状态，统一设置请求的Content-Type，统一处理响应数据的格式等。通过axios拦截器的使用，可以显著提高应用程序的数据交互质量和用户体验。
// 简化配置文件示例
axios.interceptors.request.use(function (config) {
// 显示加载动画
store.commit('SHOW_LOADER', true);
return config;
}, function (error) {
// 关闭加载动画
store.commit('SHOW_LOADER', false);
return Promise.reject(error);
});
axios.interceptors.response.use(function (response) {
// 关闭加载动画
store.commit('SHOW_LOADER', false);
return response;
}, function (error) {
// 关闭加载动画
store.commit('SHOW_LOADER', false);
// 统一错误处理
handleGlobalError(error);
return Promise.reject(error);
});
总之，axios请求拦截是一种非常实用的机制，它允许开发人员按照项目需求自定义请求和响应的处理方式，提升了代码的可维护性和应用的健壮性。通过精心设计拦截逻辑，我们可以为用户提供更加流畅和安全的网络请求体验。
相关问答FAQs：
如何在Vue程序中使用axios请求拦截器？
-
什么是axios请求拦截器？
请求拦截器是在发送请求之前对请求进行预处理的一种机制。我们可以通过请求拦截器来添加请求头、修改请求参数等操作，以实现统一的请求处理逻辑。 -
如何使用axios请求拦截器？
首先，在Vue项目中安装axios依赖：npm install axios。然后，在需要拦截请求的地方引入axios库：import axios from 'axios'。接着，通过axios.interceptors.request.use方法来添加拦截器：axios.interceptors.request.use((config) => { // 在发送请求前做些什么 ... return config; }, (error) => { // 对请求错误做些什么 ... return Promise.reject(error); }); -
如何进行请求拦截操作？
在拦截器中，我们可以对请求进行操作，比如添加请求头、修改请求参数等。例如，我们可以在请求头中添加token：axios.interceptors.request.use((config) => { // 在发送请求前做些什么 config.headers.Authorization = 'Bearer ' + getToken(); return config; }, (error) => { // 对请求错误做些什么 return Promise.reject(error); });还可以对请求的参数进行修改，例如添加公共参数：
axios.interceptors.request.use((config) => { // 在发送请求前做些什么 config.params = { ...config.params, key: 'value' }; return config; }, (error) => { // 对请求错误做些什么 return Promise.reject(error); });当然，还可以对请求进行其他处理，如对请求错误进行统一处理、添加loading等。
总之，通过axios的请求拦截器，我们可以方便地对请求进行统一处理，提高开发效率，并且提升了程序的可维护性。
