import axios from 'axios'
/**
* @description: 用法
* @param {String} url 請求路徑
* @param {Object} params 參數(shù) (直接傳就行,內(nèi)部已做處理)
* @param {Object} options 配置項(xiàng)(可以覆蓋默認(rèn)值)
* @param {Boolean} loading 是否啟用 loading
* @return:
*/
// demo
// get(url, params, options, loading)
// get("aaa/bbb", { a: b }, { baseURL: "xxx", timeout: 2000 }, false)
// post("aaa/bbb", { a: b }, { baseURL: "xxx", timeout: 2000 }, false)
// 實(shí)例化默認(rèn)設(shè)置
let axiosInstance = axios.create({
timeout: 15000,
baseURL: '/abc/',
headers: {
"content-type": "application/json;charset=utf-8"
}
})
// 請求攔截(可以在這里添加每次請求都攜帶的參數(shù))
axiosInstance.interceptors.request.use(
config => {
// 登錄流程控制中,根據(jù)本地是否存在token判斷用戶的登錄情況
// 但是即使token存在,也有可能token是過期的,所以在每次的請求頭中攜帶token
// 后臺根據(jù)攜帶的token判斷用戶的登錄情況,并返回給我們對應(yīng)的狀態(tài)碼
// 而后我們可以在響應(yīng)攔截器中,根據(jù)狀態(tài)碼進(jìn)行一些統(tǒng)一的操作。
// const token = store.state.token;
// token && (config.headers.Authorization = token);
return config
},
err => Promise.reject(err)
)
// 提取公共方法【3】
const common = (o, loading) => {
if (loading === true) __LOADING__(true)
return axiosInstance(o)
// 狀態(tài)碼 2xx 此處為網(wǎng)絡(luò)請求的狀態(tài)碼,后臺返回的狀態(tài)碼在內(nèi)層 res.data 中
.then(res => {
if (res.status === 200 && res.data.success === true) {
return Promise.resolve(res)
} else {
return Promise.reject(res) // 注意這里是 reject,拋出的錯誤會在下面的 catch 抓取,因此這里無需錯誤提示
}
})
// 狀態(tài)碼 !=2xx
.catch(err => {
__MSG__(err.data.message||"請求異常")
return Promise.reject(err)
}).finally(() => {
if (loading === true) __LOADING__(false)
})
}
// 核心處理 【2】
const core = method => {
let o = null;
if (method === "get") {
return (url, params, options, loading = true) => {
// 處理請求參數(shù),get / post 方法區(qū)別在于 params 和 data 字段
o = {
url, method, params, ...options
}
// 傳入請求相關(guān)參數(shù) 和 loading 開關(guān)
return common(o, loading)
}
} else if (method === "post") {
return (url, data, options, loading = true) => {
o = {
url, method, data: data || {}, ...options // 這里必須對 data 進(jìn)行處理,否則會導(dǎo)致 content-type 無效
}
return common(o, loading)
}
}
}
// 【1】
const get = core('get')
const post = core('post')
export { axiosInstance, get, post }
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在實(shí)戰(zhàn)項(xiàng)目中的運(yùn)用,所舉例項(xiàng)目是基于vue全家桶(vue-router+vuex+...
- 一、基于框架:vue二、基于http庫:axios三、基本用法:1.通過node安裝: 2. 在項(xiàng)目目錄的src文...
- 01 博客作者尤寺凈在文章中談到過一個同事。 她和這位同事在公司里并無交集, 但上班時(shí)常常會在電梯里碰到她。 如果...