/**
* axios封裝
*/
import axios from "axios";
import config from "../config";
import { ElMessage } from 'element-plus'
import router from "../router";
const TOKEN_INVALID = 'token 認(rèn)證失敗,請重新登陸!'
const ENTWORK_ERROR = '網(wǎng)絡(luò)請求異常,請稍后重試!'
//創(chuàng)建axios實(shí)例對象,添加全局配置
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)
}
})
/**
* 請求核心函數(shù)
* @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項(xiàng)目axios二次封裝
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。
相關(guān)閱讀更多精彩內(nèi)容
- ``` /** * axios封裝 */ import axios from "axios"; import co...
- vue項(xiàng)目經(jīng)常會用到axios來請求數(shù)據(jù),那么首先肯定需要對這個請求方法進(jìn)行一個二次封裝,這樣能節(jié)省不必要的重復(fù)操...
- 1. 安裝和使用 執(zhí)行安裝命令 npm i axios -S 在 mian.js 中引入 創(chuàng)建 .env.deve...
- 搭建VUE項(xiàng)目時(shí),需要考慮封裝一個全局的接口請求文件,可以對登錄進(jìn)行攔截以及請求的攔截,還有對通用的狀態(tài)錯誤碼和異...
- 首先我們需要對axios進(jìn)行安裝 使用 npm: $npminstallaxios 使用 bower: $ bow...