/**
* axios封装
*/
import axios from "axios";
import config from "../config";
import { ElMessage } from 'element-plus'
import router from "../router";
const TOKEN_INVALID = 'token 认证失败,请重新登陆!'
const ENTWORK_ERROR = '网络请求异常,请稍后重试!'
//创建axios实例对象,添加全局配置
const service = axios.create({
baseURL:config.baseApi,
timeout:8000
})
//请求拦截
service.interceptors.request.use((req)=>{
const headers = req.headers
if(!headers.Authorizantion) headers.Authorizantion = 'aurora yan'
return req
})
service.interceptors.response.use((res)=>{
const {data,code,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 || ENTWORK_ERROR)
return Promise.reject(msg || ENTWORK_ERROR)
}
})
/**
* 请求核心函数
* @param {*} options 请求配置
* @returns
*/
const 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,
method:item,
...options
})
}
})
export default request
vue3+elementPlus+vite项目axios二次封装
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
推荐阅读更多精彩内容
- ``` /** * axios封装 */ import axios from "axios"; import co...
- vue项目经常会用到axios来请求数据,那么首先肯定需要对这个请求方法进行一个二次封装,这样能节省不必要的重复操...
- 1. 安装和使用 执行安装命令 npm i axios -S 在 mian.js 中引入 创建 .env.deve...
- 搭建VUE项目时,需要考虑封装一个全局的接口请求文件,可以对登录进行拦截以及请求的拦截,还有对通用的状态错误码和异...