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

前端網絡請求封裝

前端采用了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 {
                // 否則跳轉到h5登錄並帶上跳轉路由
                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) {
          //
        })