快捷導(dǎo)航

axios對(duì)請(qǐng)求各種異常情況處理的封裝方法

更新時(shí)間：2018年09月25日 09:35:25 作者：嘵番茄

今天小編就為大家分享一篇axios對(duì)請(qǐng)求各種異常情況處理的封裝方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

前端采用了axios來(lái)處理網(wǎng)絡(luò)請(qǐng)求，為了避免在每次請(qǐng)求時(shí)都去判斷各種各樣的網(wǎng)絡(luò)情況，比如連接超時(shí)、服務(wù)器內(nèi)部錯(cuò)誤、權(quán)限不足等等不一而足，我對(duì)axios進(jìn)行了簡(jiǎn)單的封裝，這里主要使用了axios中的攔截器功能。

封裝后的網(wǎng)絡(luò)請(qǐng)求工具js如下

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

 // 根據(jù)返回的code值來(lái)做不同的處理（和后端約定）
 switch (data.code) {
  case '0':
   // 舉例
   // exp: 修復(fù)iPhone 6+ 微信點(diǎn)擊返回出現(xiàn)頁(yè)面空白的問(wèn)題
   if (isIOS()) {
    // 異步以保證數(shù)據(jù)已渲染到頁(yè)面上
    setTimeout(() => {
     // 通過(guò)滾動(dòng)強(qiáng)制瀏覽器進(jìn)行頁(yè)面重繪
     document.body.scrollTop += 1
    }, 0)
   }
   // 這一步保證數(shù)據(jù)返回，如果沒(méi)有return則會(huì)走接下來(lái)的代碼，不是未登錄就是報(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 = '請(qǐng)求錯(cuò)誤(400)'; break;
   case 401: err.message = '未授權(quán)，請(qǐng)重新登錄(401)'; break;
   case 403: err.message = '拒絕訪問(wèn)(403)'; break;
   case 404: err.message = '請(qǐng)求出錯(cuò)(404)'; break;
   case 408: err.message = '請(qǐng)求超時(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);
})

//如果需要可以封裝一些請(qǐng)求的方法
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")
  }
 });
}

封裝之后的錯(cuò)誤信息這個(gè)大家一目了然，沒(méi)啥好說(shuō)的，唯一要說(shuō)的是當(dāng)出錯(cuò)的時(shí)候我執(zhí)行的是：Promise.resolve(err);，而不是Promise.reject(err);

這是什么原因呢？因?yàn)榉庋baxios一個(gè)重要的目的就是希望能夠?qū)﹀e(cuò)誤進(jìn)行統(tǒng)一處理，不用在每一次發(fā)起網(wǎng)絡(luò)請(qǐng)求的時(shí)候都去處理各種異常情況，將所有的異常情況都在工具js中進(jìn)行統(tǒng)一的處理。但是這種方式也帶來(lái)一個(gè)問(wèn)題，就是我在發(fā)起網(wǎng)絡(luò)請(qǐng)求的時(shí)候，一般都會(huì)開(kāi)啟一個(gè)進(jìn)度條，當(dāng)網(wǎng)絡(luò)請(qǐng)求結(jié)束時(shí)，不論請(qǐng)求成功還是失敗，我都要將這個(gè)進(jìn)度條關(guān)閉掉，而失敗的處理我都統(tǒng)一寫在工具js里邊了，因此就沒(méi)在請(qǐng)求失敗時(shí)關(guān)閉進(jìn)度條了，解決這個(gè)問(wèn)題，有兩種方案：

1.直接在request的攔截器中開(kāi)啟一個(gè)fullscreen的loading，然后在response的攔截器中將其關(guān)閉，即我將進(jìn)度條也封裝到工具js中了，但是非常不推薦這種方式，因?yàn)檫@種方式的用戶體驗(yàn)非常之差，有興趣的小伙伴可以自己試一下就知道了。

2.第二種解決方案就是大家看到的，我返回一個(gè)Promise.resolve(err)，則這個(gè)請(qǐng)求不會(huì)就此結(jié)束，錯(cuò)誤的message我已經(jīng)彈出來(lái)了，但是這條消息還是會(huì)繼續(xù)傳到then中，也就是說(shuō)，無(wú)論請(qǐng)求成功還是失敗，我在成功的回調(diào)中都能收到通知，這樣我就可以將loading關(guān)閉了，比如下面這個(gè)登錄請(qǐng)求：

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插件

由于我對(duì)axios進(jìn)行了封裝，因此在每一個(gè)需要使用axios的地方，都需要導(dǎo)入相應(yīng)的請(qǐng)求，略顯麻煩，參考https://cn.vuejs.org/v2/guide/plugins.html，我將請(qǐng)求方法掛到Vue上，具體操作如下：

1.在main.js中導(dǎo)入所有的請(qǐng)求方法，如下：

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;

如此之后，以后再需要發(fā)送網(wǎng)絡(luò)請(qǐng)求，就不需要導(dǎo)入api了，直接通過(guò)下面這種方式即可：

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對(duì)請(qǐng)求各種異常情況處理的封裝方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: