深入理解并优化Axios实例配置与拦截器使用
在前端开发中,与后端API的交互是一项核心任务。Axios作为一个流行的HTTP客户端库,被广泛用于处理这些交互。本文将详细介绍如何创建一个Axios实例,并为其配置基础设置,如API的基础路径和请求超时时间。同时,我们还将探讨如何为这个实例添加请求拦截器和响应拦截器,以便在请求发送前后和响应接收前后执行一些自定义逻辑。
创建并配置Axios实例
首先,我们使用axios.create
方法创建了一个新的Axios实例,并命名为service
。这个实例被配置了baseURL
和timeout
属性,分别用于设置API的基础路径和请求的超时时间。
const service = axios.create({
baseURL: '/api', // API的基础路径
timeout: 10000, // 请求超时时间
});
请求拦截器的应用
在发送请求之前,我们设置了一个请求拦截器。这个拦截器会检查用户是否已登录,如果用户已登录,就将token添加到请求头中,以便后端进行身份验证。
service.interceptors.request.use(
(config) => {
const userStore = useUserStore();
if (userStore.token) {
config.headers.Authorization = `Bearer ${userStore.token}`;
}
return config;
},
(error) => {
console.error('请求拦截器错误:', error);
return Promise.reject(error);
}
);
响应拦截器的实现
当请求得到响应后,我们设置了一个响应拦截器。这个拦截器会首先检查响应的数据类型是否为Blob,如果是则直接返回数据。然后,它会根据响应的success
字段来判断请求是否成功,并据此执行相应的操作,如显示成功或错误消息。
service.interceptors.response.use(
(response) => {
if (response.data instanceof Blob) {
return response.data;
}
const { success, message, data } = response.data;
if (success) {
// 原本这里应该有显示成功消息的逻辑,但由于ElMessage的引入问题被注释掉了
return data;
} else {
// 原本这里应该有显示错误消息的逻辑,但由于ElMessage的引入问题被注释掉了
return Promise.reject(new Error(data || '未知错误'));
}
},
(error) => {
console.error('响应拦截器错误:', error);
if (error.response && error.response.status === 401) {
// 401错误处理逻辑,包括清除token和跳转到登录页面
// 原本这里应该有显示错误消息的逻辑,但由于ElMessage的引入问题被注释掉了
useUserStore().clearToken();
router.push('/login');
return Promise.reject(new Error('无效的token'));
}
// 其他错误处理逻辑
// 原本这里应该有显示错误消息的逻辑,但由于ElMessage的引入问题被注释掉了
return Promise.reject(error);
}
);
注意:在响应拦截器中,原本应该使用ElMessage
来显示成功或错误消息,但由于某些原因(可能是element-plus
库的引入问题),这部分逻辑被注释掉了。在实际应用中,你可以根据需要取消注释并正确引入ElMessage
。
导出并使用配置好的Axios实例
最后,我们将配置好的Axios实例导出,以便在其他地方使用。
export default service;
通过上述步骤,我们创建并配置了一个Axios实例,并为其添加了请求拦截器和响应拦截器。这使得我们能够更方便地处理HTTP请求和响应,并在需要时执行一些自定义逻辑。