vue中axios拦截器

在Vue中使用axios进行HTTP请求时，拦截器（Interceptors）是一个非常有用的功能。拦截器允许你在请求发送之前或响应返回之后执行一些操作，比如添加请求头、处理错误、转换响应数据等。

以下是如何在Vue 3项目中使用axios拦截器的基本步骤：

安装axios

如果你还没有安装axios，可以通过npm或yarn来安装它。

npm install axios
# 或者
yarn add axios

创建axios实例

在你的Vue项目中，创建一个axios实例，并在该实例上设置拦截器。

// src/api/axios.js
import axios from 'axios';

const apiClient = axios.create({
baseURL: 'https://api.example.com', // 你的API基础URL
timeout: 1000, // 请求超时时间
headers: {
'Content-Type': 'application/json',
// 其他请求头
}
});

// 请求拦截器
apiClient.interceptors.request.use(
config => {
// 在发送请求之前做些什么，比如添加认证token
const token = localStorage.getItem('auth_token');
if (token) {
config.headers['Authorization'] = `Bearer ${token}`;
}
return config;
},
error => {
// 对请求错误做些什么
return Promise.reject(error);
}
);

// 响应拦截器
apiClient.interceptors.response.use(
response => {
// 对响应数据做点什么，比如转换数据格式
return response.data;
},
error => {
// 对响应错误做点什么，比如处理认证失败
if (error.response && error.response.status === 401) {
// 未授权，重定向到登录页面
router.push('/login');
}
return Promise.reject(error);
}
);

export default apiClient;

在Vue组件中使用axios实例

在你的Vue组件中，你可以导入并使用上面创建的axios实例来发送请求。

// src/components/SomeComponent.vue
<template>
<!-- 组件模板 -->
</template>

<script>
import apiClient from '../api/axios';

export default {
name: 'SomeComponent',
data() {
return {
data: null,
};
},
methods: {
fetchData() {
apiClient.get('/some-endpoint')
.then(response => {
this.data = response;
})
.catch(error => {
console.error('There was an error!', error);
});
}
},
mounted() {
this.fetchData();
}
};
</script>

注意事项

• 使用拦截器时要注意不要引入循环依赖或内存泄漏。
• 在拦截器中处理错误时，要确保错误被适当地捕获和处理，以避免应用崩溃。
• 如果你的应用需要在多个地方使用axios，建议创建一个中心化的axios实例，并在需要的地方导入使用，这样可以保持代码的一致性和可维护性。

以上就是在Vue 3中使用axios拦截器的基本方法。根据你的应用需求，你可以进一步自定义拦截器的行为。