axios封装(vue3项目)
我们在使用axios的时候,一般需要在request中统一封装拦截器,处理一些请求头带token和时间格式
/**
* axios二次封装
*/
import axios from 'axios'
import config from '../config'
import { ElMessage } from 'element-plus'
const TOKEN_INVALID = 'Token认证失败,请重新登录'
const NETWORK_ERROR = '网络请求异常,请稍后重试'
import router from './../router'
// 创建axios实例对象,添加全局配置
const service = axios.create({
baseURL:config.baseURL,
timeout:8000
})
// 请求拦截
service.interceptors.request.use((req)=>{
// 也可以处理一些时间戳格式
const headers = req.headers
if(!headers.Authorization){
headers.Authorization = 'Bear token'
}
return req;
})
// 响应拦截
service.interceptors.response.use((res)=>{
const {code,data,msg} = res.data;
if(code === 200){
return data;
}else if(code === 40001){
// 登录过期或者失效
ElMessage.error(TOKEN_INVALID);
setTimeout(() => {
router.push('/login')
}, 1500);
return Promise.reject(TOKEN_INVALID)
}else{
ElMessage.error(msg || NETWORK_ERROR);
return Promise.reject(TOKEN_INVALID)
}
})
/**
* 请求的核心函数
* @param {*} options 请求配置
*/
function request(options) {
options.method = options.method || 'get'
if(options.method.toLowerCase() === 'get'){
options.params = options.data
}
if(config.env === 'prod'){
service.defaults.baseURL = config.baseApi
}else{
service.defaults.baseURL = config.mock ? config.mockApi : config.baseApi
}
return service(options)
}
['get','post','put','delete','patch'].forEach((item)=>{
request[item] = (url,data,options)=>{
return request({
url,data,...options,method:item
})
}
})
export default request
我们在调用的时候就可以先全局挂载$request,
// 挂载在全局vue2
// app.config.globalProperties.$request = request
// 挂载在全局vue3
window.$request = request
组件内部调用的方式:
//vue3中setup中没有this
$request.get('/login',{name:'jack'},{mock:true}).then((res)=>{
console.log(res);
})