自己封裝的模塊化 axios 請求，詳細(xì)
新增 http.js 文件用于封裝 axios
Import axios from ‘a(chǎn)xios’
Import qs from ‘qs’
// 根據(jù)以下定義的基礎(chǔ)地址 方便項目調(diào)試
switch?(process.env.NODE_ENV)?{
????case?"production":
????????axios.defaults.baseURL?=?'http://127.0.0.1:8090'
????????break;
????case?"test":
????????axios.defaults.baseURL?=?'http://127.0.0.2:8080'
????????break;
????default:
????????axios.defaults.baseURL?=?'http://jsonplaceholder.typicode.com/'// 默認(rèn)運行地址
}
//超時時間
axios.defaults.timeout?=?10000;
//跨域是否允許攜帶憑證
axios.defaults.withCredentials?=?true;
設(shè)置請求傳遞數(shù)據(jù)的格式(主要看服務(wù)器要求什么格式邪媳，我們處理后給服務(wù)器)
axios.defaults.headers['Content-Type']?=?'application/x-www-form-urlencoded'
?//告知服務(wù)器請求主體的數(shù)據(jù)格式xxx=xxx&xxx=xxx 只對?post請求有作用?
//transformRequest 用于改變post請求
axios.defaults.transformRequest?=?data?=>?qs.stringify(data)?
/*?
請求攔截器 比如你媽媽給你100塊錢囑咐你到我這買東西 你可以買也可以不買 也可以只買不到100塊錢的東西? 想干什么 就干什么 為所欲為 一般我用的比較少
網(wǎng)絡(luò)請求都會先走這個方法 在里面能為請求頭加一些自定義的內(nèi)容發(fā)送給服務(wù)器?比如：Token校驗啥的
*/
axios.interceptors.request.use(config?=>?{
????let?token?=?localStorage.getItem('token') // 比如獲取本地的token 然后 把 token 給請求頭
????token?&&?(config.headers.Authorization?=?token)
????return?config
},?error?=>?{
????return?Promise.reject(error)
})
/*?
響應(yīng)攔截器 服務(wù)器收到請求了 比如 你給我100 塊錢了 我給你找零給你東西劫扒，但是我也可以不給你東西 還把你打一頓
*/
還有很多返回值 去axios 文檔上看?
axios.interceptors.response.use(res?=>?{
????return?res.data
},?error?=>?{
????let?{?res?}?=?error
????if?(res)?{
//如果服務(wù)器返回的有結(jié)果?根據(jù)公司需求來寫
????????switch?(res.status)?{
????????????case?401://當(dāng)前請求需要用戶驗證(一般是沒有登錄)?做一些提示
????????????????console.log('需要驗證?msg?提示窗口什么的?跳轉(zhuǎn)登錄頁什么的');
????????????????break;
????????????case?403://服務(wù)器收到請求,但是拒絕執(zhí)行(一般是令牌過期)
? ? ? ? ? ? ? ? ? ?console.log('清除令牌什么的');
????????????????break;
????????????case?404: // 你可以寫個頁面啥的專門用來提示 404
????????????????break;
????????}
????}?else?{
????????//服務(wù)器返回的沒有結(jié)果?1:服務(wù)器炸了?2:本地沒有網(wǎng)絡(luò),這里做一下斷網(wǎng)處理
????????if?(!window.navigator.onLine)?{
// 斷網(wǎng)處理: 你可以像404那樣新只能一個頁面 然后你懂的.....
????????????return
????????}
//如果斷網(wǎng)也沒有?就是服務(wù)器的問題了?返回服務(wù)器報錯信息
????????return?Promise.reject(error)
????}
})
//配置好后 把封裝好的axios暴露出去?供外部使用
export?default?axios;
Package.json文件
??"scripts":?{
????"serve":?"vue-cli-service?serve",
????"serve:test":?"set?NODE_ENV=test&&vue-cli-service?serve",
????"serve:production":?"set?NODE_ENV=production&&vue-cli-service?serve",
??},
運行：
npm run serve:test
npm run serve:production
nnpm run serve
使用：
新增放置登錄接口的頁面：
新增LoginApi.js
import?axios?from?'./http'
function?login(params)?{
????return?axios.get('login',?params)
}
export?default?{
????login
}
新增放置所有API的頁面：
//定義所有數(shù)據(jù)請求
import?LoginApi from?'./LoginApi’
export?default?{
????LoginApi
}
將定義所有數(shù)據(jù)請求的JS文件掛載到vue全局對象上
import?api?from?'./utils/api'
vue.prototype.$api?=?api
頁面中使用
this.$api.LoginApi.login(參數(shù)).then(res=>{})
