1、前端網(wǎng)絡(luò)請求封裝、異常統(tǒng)一處理
vue中采用axios處理網(wǎng)絡(luò)請求，避免請求接口重復(fù)代碼，以及各種網(wǎng)絡(luò)情況造成的異常情況的判斷，采用axios請求封裝和異常攔截操作；
axios 請求封裝
// 引入axios文件包
import axios from 'axios'
// POST 方法封裝 (參數(shù)處理)
export const postRequest = (url, params) => {
return axios({
method: 'post',
url: 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'
}
});
}
// POST 方法封裝 (文件上傳)
export const uploadFileRequest = (url, params) => {
return axios({
method: 'post',
url: url,
data: params,
headers: {
'Content-Type': 'multipart/form-data'
}
});
}
// GET 方法封裝
export const getRequest = (url) => {
return axios({
method: 'get',
url: url
});
}
// PUT 方法封裝
export const putRequest = (url, params) => {
return axios({
method: 'put',
url: 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'
}
});
}
// DELETE 方法封裝
export const deleteRequest = (url) => {
return axios({
method: 'delete',
url: url
});
}
2）axios請求異常統(tǒng)一處理
// 引入依賴包
import axios from 'axios'
import {Message} from 'element-ui'
// REQUEST 請求異常攔截
axios.interceptors.request.use(config=> {
//========== 所有請求之前都要執(zhí)行的操作 ==============
return config;
}, err=> {
//================== 錯誤處理 ====================
Message.error({message: '請求超時(shí)!'});
return Promise.resolve(err);
})
// RESPONSE 響應(yīng)異常攔截
axios.interceptors.response.use(data=> {
//============== 所有請求完成后都要執(zhí)行的操作 ==================
// 第一種方式
// 根據(jù)返回的code值來做不同的處理（和后端約定）
switch (data.code) {
case '0':
// exp: 修復(fù)iPhone 6+ 微信點(diǎn)擊返回出現(xiàn)頁面空白的問題
if (isIOS()) {
// 異步以保證數(shù)據(jù)已渲染到頁面上
setTimeout(() => {
// 通過滾動強(qiáng)制瀏覽器進(jìn)行頁面重繪
document.body.scrollTop += 1
}, 0)
}
// 這一步保證數(shù)據(jù)返回，如果沒有return則會走接下來的代碼，不是未登錄就是報(bào)錯
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)到h5登錄并帶上跳轉(zhuǎn)路由
const search = encodeSearchParams({
next: location.href,
})
location.replace(`/user/login`)
}
// 不顯示提示消息
data.description = ''
break
default:
}
// 若不是正確的返回code，且已經(jīng)登錄，就拋出錯誤
const err = new Error(data.description)
err.data = data
err.response = response
// 第二種方式，僅對200和error狀態(tài)處理
if (data.status && data.status == 200 && data.data.status == 'error') {
Message.error({message: data.data.msg});
return;
}
return data;
}, err=> {
//============== 錯誤處理 ====================
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 = '請求超時(shí)(408)'; break;
case 500: err.message = '服務(wù)器錯誤(500)'; break;
case 501: err.message = '服務(wù)未實(shí)現(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ò)超時(shí)(504)'; break;
case 505: err.message = 'HTTP版本不受支持(505)'; break;
default: err.message = `連接出錯(${err.response.status})!`;
}
} else {
err.message = '連接服務(wù)器失敗!'
}
Message.err( {message: err.message } )
return Promise.resolve(err);
})
請求出錯的時(shí)候我執(zhí)行的是：Promise.resolve(err);，而不是Promise.reject(err);，這樣無論請求成功還是失敗，在成功的回調(diào)中都能收到通知
2、VUE 項(xiàng)目中使用該方法
1）在main.js中導(dǎo)入所有請求方法
// 導(dǎo)入所有請求方法
import {getRequest} from './utils/api'
import {postRequest} from './utils/api'
import {deleteRequest} from './utils/api'
import {putRequest} from './utils/api'
2）將請求方法添加至 Vue.prototype 上
// 向VUE的原型上添加請求方法
Vue.prototype.getRequest = getRequest;
Vue.prototype.postRequest = postRequest;
Vue.prototype.deleteRequest = deleteRequest;
Vue.prototype.putRequest = putRequest;
3）發(fā)送請求（請求方法的調(diào)用）
// 發(fā)送網(wǎng)絡(luò)請求
this.postRequest('/login', {userName，password}).then(resp=> {
...
}
});
4）案例
import Vue from 'vue'
import cypressIndex from '../components/rootVue/cypressIndex'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
// axios請求的方法引入
import {getRequest} from '../components/utils/settings'
import {postRequest} from '../components/utils/settings'
Vue.use(ElementUI);
// 將axios方法添加到VUE原型上
Vue.prototype.getRequest = getRequest;
Vue.prototype.postRequest = postRequest;
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#cypressIndex',
render: h => h(cypressIndex)
})
