axios對請求各種異常情況處理的封裝方法-創(chuàng)新互聯(lián)
前端采用了axios來處理網(wǎng)絡(luò)請求，為了避免在每次請求時都去判斷各種各樣的網(wǎng)絡(luò)情況，比如連接超時、服務(wù)器內(nèi)部錯誤、權(quán)限不足等等不一而足，我對axios進行了簡單的封裝，這里主要使用了axios中的攔截器功能。
封裝后的網(wǎng)絡(luò)請求工具js如下
import axios from 'axios'
import { Toast } from 'mint-ui'
//請求時的攔截
axios.interceptors.request.use(config => {
return config;
}, err => {
Toast('請求超時!' );
return Promise.resolve(err);
})
//響應(yīng)時的攔截
axios.interceptors.response.use(data => {
// 返回響應(yīng)時做一些處理
// 第一種方式
const data = response.data
// 根據(jù)返回的code值來做不同的處理（和后端約定）
switch (data.code) {
case '0':
// 舉例
// exp: 修復(fù)iPhone 6+ 微信點擊返回出現(xiàn)頁面空白的問題
if (isIOS()) {
// 異步以保證數(shù)據(jù)已渲染到頁面上
setTimeout(() => {
// 通過滾動強制瀏覽器進行頁面重繪
document.body.scrollTop += 1
}, 0)
}
// 這一步保證數(shù)據(jù)返回，如果沒有return則會走接下來的代碼，不是未登錄就是報錯
return data
// 需要重新登錄
case 'SHIRO_E5001':
// 微信生產(chǎn)環(huán)境下授權(quán)登錄
if (isWeChat() && IS_PRODUCTION) {
axios.get(apis.common.wechat.authorizeUrl).then(({ result }) => {
location.replace(global.decodeURIComponent(result))
})
} else {
// 否則跳轉(zhuǎn)到h6登錄并帶上跳轉(zhuǎn)路由
const search = encodeSearchParams({
next: location.href,
})
location.replace(`/user/login?${search}`)
}
// 不顯示提示消息
data.description = ''
break
default:
}
// 若不是正確的返回code，且已經(jīng)登錄，就拋出錯誤
const err = new Error(data.description)
err.data = data
err.response = response
// 第二種方式，我采取的
if (data.status && data.status == 200 && data.data.status == 'error') {
Toast(data.data.msg);
return data;
}
return data;
},err => {
// 當(dāng)響應(yīng)異常時做一些處理
if (err && err.response) {
switch (err.response.status) {
case 400: err.message = '請求錯誤(400)'; break;
case 401: err.message = '未授權(quán)，請重新登錄(401)'; break;
case 403: err.message = '拒絕訪問(403)'; break;
case 404: err.message = '請求出錯(404)'; break;
case 408: err.message = '請求超時(408)'; break;
case 500: err.message = '服務(wù)器錯誤(500)'; break;
case 501: err.message = '服務(wù)未實現(xiàn)(501)'; break;
case 502: err.message = '網(wǎng)絡(luò)錯誤(502)'; break;
case 503: err.message = '服務(wù)不可用(503)'; break;
case 504: err.message = '網(wǎng)絡(luò)超時(504)'; break;
case 505: err.message = 'HTTP版本不受支持(505)'; break;
default: err.message = `連接出錯(${err.response.status})!`;
}
} else {
err.message = '連接服務(wù)器失敗!'
}
Toast(err.message);
return Promise.resolve(err);
})
//如果需要可以封裝一些請求的方法
let base = '';
export const postRequest = (url, params) => {
return axios({
method: 'post',
url: `${base}${url}`,
data: params,
transformRequest: [function (data) {
let ret = ''
for (let it in data) {
ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
}
return ret
}],
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
});
}
export const uploadFileRequest = (url, params) => {
return axios({
method: 'post',
url: `${base}${url}`,
data: params,
headers: {
'Content-Type': 'multipart/form-data'
}
});
}
export const putRequest = (url, params) => {
return axios({
method: 'put',
url: `${base}${url}`,
data: params,
transformRequest: [function (data) {
let ret = ''
for (let it in data) {
ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
}
return ret
}],
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
});
}
export const deleteRequest = (url) => {
return axios({
method: 'delete',
url: `${base}${url}`
});
}
export const get = (url,params) => {
return axios({
method: 'get',
url: `${base}${url}?`,
params: params,
headers:{
'Content-Type': 'application/x-www-form-urlencoded',
'Access-Token': localStorage.getItem("AccessToken")
}
});
}另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。
網(wǎng)頁題目：axios對請求各種異常情況處理的封裝方法-創(chuàng)新互聯(lián)
標(biāo)題來源：http://m.jiaotiyi.com/article/jopij.html