溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
前端采用了axios來處理網絡請求，為了避免在每次請求時都去判斷各種各樣的網絡情況，比如連接超時、服務器內部錯誤、權限不足等等不一而足，我對axios進行了簡單的封裝，這里主要使用了axios中的攔截器功能。
封裝后的網絡請求工具js如下
import axios from 'axios'
import { Toast } from 'mint-ui'
//請求時的攔截
axios.interceptors.request.use(config => {
return config;
}, err => {
Toast('請求超時!' );
return Promise.resolve(err);
})
//響應時的攔截
axios.interceptors.response.use(data => {
// 返回響應時做一些處理
// 第一種方式
const data = response.data
// 根據返回的code值來做不同的處理（和后端約定）
switch (data.code) {
case '0':
// 舉例
// exp: 修復iPhone 6+ 微信點擊返回出現頁面空白的問題
if (isIOS()) {
// 異步以保證數據已渲染到頁面上
setTimeout(() => {
// 通過滾動強制瀏覽器進行頁面重繪
document.body.scrollTop += 1
}, 0)
}
// 這一步保證數據返回，如果沒有return則會走接下來的代碼，不是未登錄就是報錯
return data
// 需要重新登錄
case 'SHIRO_E5001':
// 微信生產環境下授權登錄
if (isWeChat() && IS_PRODUCTION) {
axios.get(apis.common.wechat.authorizeUrl).then(({ result }) => {
location.replace(global.decodeURIComponent(result))
})
} else {
// 否則跳轉到h6登錄并帶上跳轉路由
const search = encodeSearchParams({
next: location.href,
})
location.replace(`/user/login?${search}`)
}
// 不顯示提示消息
data.description = ''
break
default:
}
// 若不是正確的返回code，且已經登錄，就拋出錯誤
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 => {
// 當響應異常時做一些處理
if (err && err.response) {
switch (err.response.status) {
case 400: err.message = '請求錯誤(400)'; break;
case 401: err.message = '未授權，請重新登錄(401)'; break;
case 403: err.message = '拒絕訪問(403)'; break;
case 404: err.message = '請求出錯(404)'; break;
case 408: err.message = '請求超時(408)'; break;
case 500: err.message = '服務器錯誤(500)'; break;
case 501: err.message = '服務未實現(501)'; break;
case 502: err.message = '網絡錯誤(502)'; break;
case 503: err.message = '服務不可用(503)'; break;
case 504: err.message = '網絡超時(504)'; break;
case 505: err.message = 'HTTP版本不受支持(505)'; break;
default: err.message = `連接出錯(${err.response.status})!`;
}
} else {
err.message = '連接服務器失敗!'
}
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")
}
});
}
封裝之后的錯誤信息這個大家一目了然，沒啥好說的，唯一要說的是當出錯的時候我執行的是：Promise.resolve(err);，而不是Promise.reject(err);
這是什么原因呢？因為封裝axios一個重要的目的就是希望能夠對錯誤進行統一處理，不用在每一次發起網絡請求的時候都去處理各種異常情況，將所有的異常情況都在工具js中進行統一的處理。但是這種方式也帶來一個問題，就是我在發起網絡請求的時候，一般都會開啟一個進度條，當網絡請求結束時，不論請求成功還是失敗，我都要將這個進度條關閉掉，而失敗的處理我都統一寫在工具js里邊了，因此就沒在請求失敗時關閉進度條了，解決這個問題，有兩種方案：
1.直接在request的攔截器中開啟一個fullscreen的loading，然后在response的攔截器中將其關閉，即我將進度條也封裝到工具js中了，但是非常不推薦這種方式，因為這種方式的用戶體驗非常之差，有興趣的小伙伴可以自己試一下就知道了。
2.第二種解決方案就是大家看到的，我返回一個Promise.resolve(err)，則這個請求不會就此結束，錯誤的message我已經彈出來了，但是這條消息還是會繼續傳到then中，也就是說，無論請求成功還是失敗，我在成功的回調中都能收到通知，這樣我就可以將loading關閉了，比如下面這個登錄請求：
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});
}
})
}
添加Vue插件
由于我對axios進行了封裝，因此在每一個需要使用axios的地方，都需要導入相應的請求，略顯麻煩，參考https://cn.vuejs.org/v2/guide/plugins.html，我將請求方法掛到Vue上，具體操作如下：
1.在main.js中導入所有的請求方法，如下：
import {get} from './utils/api'
import {postRequest} from './utils/api'
import {deleteRequest} from './utils/api'
import {putRequest} from './utils/api'
2.把它們添加到 Vue.prototype 上，如下：
Vue.prototype.getRequest = getRequest; Vue.prototype.postRequest = postRequest; Vue.prototype.deleteRequest = deleteRequest; Vue.prototype.putRequest = putRequest;
如此之后，以后再需要發送網絡請求，就不需要導入api了，直接通過下面這種方式即可：
Post方法：
this.postRequest('/login', {
username: this.loginForm.username,
password: this.loginForm.password
}).then(resp=> {
...
}
});
GET方法：
_this.get(
this.url_s+"/Notice/findTotalCount",{
userId:localStorage.getItem("userid"),
openId: localStorage.getItem('openId')
}
)
.then(function(res) {
//
})
以上這篇axios對請求各種異常情況處理的封裝方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
