axios請求封裝和異常統一處理

當先後端分離時，權限問題的處理也和咱們傳統的處理方式有一點差別。筆者前幾天恰好在負責一個項目的權限管理模塊，如今權限管理模塊已經作完了，我想經過5-6篇文章，來介紹一下項目中遇到的問題以及個人解決方案，但願這個系列可以給小夥伴一些幫助。本系列文章並非手把手的教程，主要介紹了核心思路並講解了核心代碼，完整的代碼小夥伴們能夠在GitHub上star並clone下來研究。另外，本來計劃把項目跑起來放到網上供小夥伴們查看，可是以前買服務器爲了省錢，內存只有512M，兩個應用跑不起來(已經有一個V部落開源項目在運行)，所以小夥伴們只能將就看一下下面的截圖了，GitHub上有部署教程，部署到本地也能夠查看完整效果。

---

項目地址：https://github.com/lenve/vhr

前面幾篇文章，咱們已經基本解決了服務端的問題，本文咱們主要來聊聊前端網絡請求的封裝。

本文是本系列的第四篇，建議先閱讀前面的文章有助於更好的理解本文：

1.SpringBoot+Vue先後端分離，使用SpringSecurity完美處理權限問題(一)
2.SpringBoot+Vue先後端分離，使用SpringSecurity完美處理權限問題(二)
3.SpringSecurity中密碼加鹽與SpringBoot中異常統一處理

前端網絡請求封裝

前端採用了axios來處理網絡請求，爲了不在每次請求時都去判斷各類各樣的網絡狀況，好比鏈接超時、服務器內部錯誤、權限不足等等不一而足，我對axios進行了簡單的封裝，這裏主要使用了axios中的攔截器功能。

封裝後的網絡請求工具js以下：

import axios from 'axios'
import {Message} from 'element-ui'

axios.interceptors.request.use(config=> {
  return config;
}, err=> {
  Message.error({message: '請求超時!'});
  return Promise.resolve(err);
})
axios.interceptors.response.use(data=> {
  if (data.status && data.status == 200 && data.data.status == 'error') {
    Message.error({message: data.data.msg});
    return;
  }
  return data;
}, err=> {
  if (err.response.status == 504||err.response.status == 404) {
    Message.error({message: '服務器被吃了⊙﹏⊙∥'});
  } else if (err.response.status == 403) {
    Message.error({message: '權限不足,請聯繫管理員!'});
  }else {
    Message.error({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 getRequest = (url) => {
  return axios({
    method: 'get',
    url: `${base}${url}`
  });
}

封裝以後的錯誤信息這個你們一目瞭然，沒啥好說的，惟一要說的是當出錯的時候我執行的是：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...，我將請求方法掛到Vue上，具體操做以下：

1.在main.js中導入全部的請求方法，以下：

import {getRequest} 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了，直接經過下面這種方式便可：

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

OK，如此以後，網絡請求處理就so easy了。

關注公衆號，能夠及時接收到最新文章: