vue写一个拦截器
在Vue中,我们可以使用axios拦截器来拦截请求和响应,并在拦截器中添加一些统一处理的逻辑。以下是一个简单的拦截器示例:
import axios from 'axios'
// 创建axios实例
const instance = axios.create({
baseURL: 'https://api.example.com',
timeout: 5000
})
// 添加请求拦截器
instance.interceptors.request.use(config => {
// 在请求发送之前做一些处理
config.headers.Authorization = localStorage.getItem('token')
return config
}, error => {
return Promise.reject(error)
})
// 添加响应拦截器
instance.interceptors.response.use(response => {
// 在响应之前做一些处理
return response
}, error => {
if (error.response) {
switch (error.response.status) {
case 401:
// 如果返回401未授权,则清除token并跳转到登录页面
localStorage.removeItem('token')
router.replace({
path: '/login',
query: { redirect: router.currentRoute.fullPath }
})
break
case 404:
// 如果返回404未找到,则提示用户相关信息
alert('请求的资源未找到')
break
default:
// 其他错误则直接提示用户
alert(error.response.data.message)
}
}
return Promise.reject(error)
})
export default instance
上面的代码中,我们首先创建了一个axios实例,并在该实例中添加了请求拦截器和响应拦截器。在请求拦截器中,我们可以通过修改请求配置来添加一些请求头或请求参数等信息。在响应拦截器中,我们根据返回的响应状态码来进行统一处理,比如清除token并跳转到登录页面、提示用户相关信息等。最后,我们导出该axios实例,方便其他地方进行使用。
原文地址: https://www.cveoy.top/t/topic/FP2 著作权归作者所有。请勿转载和采集!