为了方便使用,自己mome了一份笔记。
前提:已经安装axios,基于Vue3 和 element-plus
token存放在stores下面的User文件,同时在store下面的index中
export * from ‘@/stores/User.js’
import axios from 'axios'
import { useUserStore } from '@/stores'
import { ElMessage } from 'element-plus'
import router from '@/router'
const baseURL = ''//基地址
const instance = axios.create({
baseURL,
timeout: 5000
})
// 添加请求拦截器
instance.interceptors.request.use(
function (config) {
// 在发送请求之前做些什么
const useUser = useUserStore()
if (useUser.token) {
config.headers.Authorization = useUser.token //接口文档中定义的请求头
}
return config
},
function (error) {
// 对请求错误做些什么
return Promise.reject(error)
}
)
// 添加响应拦截器
instance.interceptors.response.use(
function (response) {
// 2xx 范围内的状态码都会触发该函数。
// 对响应数据做点什么
if (response.data.code === 0) { //接口文档中定义的成功代码
return response
}
// 处理业务失败,给出错误提示,抛出错误
ElMessage.error(response.data.message || '服务异常') //接口文档中定义的失败代码
return Promise.reject(response.data)
},
function (error) {
// 超出 2xx 范围的状态码都会触发该函数。
// 对响应错误做点什么
// 401错误,权限不足,或token过期
if (error.response?.status === 401) { //接口文档中定义的token失效代码
router.push('/login')
}
// 错误的默认情况
ElMessage.error(error.response.data.message || '服务异常')
return Promise.reject(error)
}
)
export default instance
export { baseURL }