axios對請求各種異常情況處理的封裝方法

import axios from 'axios'
import { Toast } from 'mint-ui'
//請求時(shí)的攔截
axios.interceptors.request.use(config => {
 return config;
}, err => {
 Toast('請求超時(shí)!' );
 return Promise.resolve(err);
})
//響應(yīng)時(shí)的攔截
axios.interceptors.response.use(data => {
 // 返回響應(yīng)時(shí)做一些處理
 // 第一種方式
 const data = response.data

 // 根據(jù)返回的code值來做不同的處理（和后端約定）
 switch (data.code) {
 case '0':
 // 舉例
 // exp: 修復(fù)iPhone 6+ 微信點(diǎn)擊返回出現(xiàn)頁面空白的問題
 if (isIOS()) {
 // 異步以保證數(shù)據(jù)已渲染到頁面上
 setTimeout(() => {
 // 通過滾動(dòng)強(qiáng)制瀏覽器進(jìn)行頁面重繪
 document.body.scrollTop += 1
 }, 0)
 }
 // 這一步保證數(shù)據(jù)返回，如果沒有return則會(huì)走接下來的代碼，不是未登錄就是報(bào)錯(cuò)
 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?${search}`)
 }

 // 不顯示提示消息
 data.description = ''
 break

 default:
 }
 // 若不是正確的返回code，且已經(jīng)登錄，就拋出錯(cuò)誤
 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)異常時(shí)做一些處理
 if (err && err.response) {
 switch (err.response.status) {
 case 400: err.message = '請求錯(cuò)誤(400)'; break;
 case 401: err.message = '未授權(quán)，請重新登錄(401)'; break;
 case 403: err.message = '拒絕訪問(403)'; break;
 case 404: err.message = '請求出錯(cuò)(404)'; break;
 case 408: err.message = '請求超時(shí)(408)'; break;
 case 500: err.message = '服務(wù)器錯(cuò)誤(500)'; break;
 case 501: err.message = '服務(wù)未實(shí)現(xiàn)(501)'; break;
 case 502: err.message = '網(wǎng)絡(luò)錯(cuò)誤(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 = `連接出錯(cuò)(${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")
 }
 });
}

var _this = this;
this.loading = true;
this.postRequest('/login', {
 username: this.loginForm.username,
 password: this.loginForm.password
}).then(resp=> {
 _this.loading = false;
 if (resp && resp.status == 200) {
 _this.getRequest("/config/hr").then(resp=> {
 if (resp && resp.status == 200) {
 var data = resp.data;
 _this.$store.commit('login', data);
 var path = _this.$route.query.redirect;
 _this.$router.replace({path: path == '/' || path == undefined ? '/home' : path});
 }
 })
 }

import {get} from './utils/api'
import {postRequest} from './utils/api'
import {deleteRequest} from './utils/api'
import {putRequest} from './utils/api'

Vue.prototype.getRequest = getRequest;
Vue.prototype.postRequest = postRequest;
Vue.prototype.deleteRequest = deleteRequest;
Vue.prototype.putRequest = putRequest;

this.postRequest('/login', {
 username: this.loginForm.username,
 password: this.loginForm.password
}).then(resp=> {
 ...
 }
});

_this.get(
 this.url_s+"/Notice/findTotalCount",{
 userId:localStorage.getItem("userid"),
 openId: localStorage.getItem('openId')
 }
 )
 .then(function(res) {
 //
 })