vue_axios請求封裝、異常攔截統一處理

時間 2021-08-13

標籤 javascript css 前端 vue java ios element-ui axios 後端 api 欄目軟件設計简体版

原文原文鏈接

一、前端網絡請求封裝、異常統一處理

vue中採用axios處理網絡請求，避免請求接口重複代碼，以及各類網絡狀況形成的異常狀況的判斷，採用axios請求封裝和異常攔截操做；javascript

axios 請求封裝

//  引入axios文件包
import axios from 'axios'

// POST 方法封裝  (參數處理)
export const postRequest = (url, params) => {
  return axios({
    method: 'post',
    url: 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'
    }
  });
}

// POST 方法封裝  (文件上傳)
export const uploadFileRequest = (url, params) => {
  return axios({
    method: 'post',
    url: url,
    data: params,
    headers: {
      'Content-Type': 'multipart/form-data'
    }
  });
}

//  GET 方法封裝
export const getRequest = (url) => {
  return axios({
    method: 'get',
    url: url
  });
}

//  PUT 方法封裝
export const putRequest = (url, params) => {
  return axios({
    method: 'put',
    url: 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'
    }
  });
}

//  DELETE 方法封裝
export const deleteRequest = (url) => {
  return axios({
    method: 'delete',
    url: url
  });
}

2）axios請求異常統一處理

// 引入依賴包
import axios from 'axios'
import {Message} from 'element-ui'

//  REQUEST 請求異常攔截
axios.interceptors.request.use(config=> {
 //==========  全部請求以前都要執行的操做  ==============
  return config;
}, err=> {
 //==================  錯誤處理  ====================
  Message.error({message: '請求超時!'});
  return Promise.resolve(err);
})

//  RESPONSE 響應異常攔截
axios.interceptors.response.use(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`)
            }

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

        default:
    }
    // 若不是正確的返回code，且已經登陸，就拋出錯誤
    const err = new Error(data.description)

    err.data = data
    err.response = response

  // 第二種方式，僅對200和error狀態處理
  if (data.status && data.status == 200 && data.data.status == 'error') {
    Message.error({message: data.data.msg});
    return;
  }
  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 = '鏈接服務器失敗!'
    }
  Message.err( {message: err.message } )
  return Promise.resolve(err);
})

請求出錯的時候我執行的是：Promise.resolve(err);，而不是Promise.reject(err);，這樣不管請求成功仍是失敗，在成功的回調中都能收到通知css

二、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的原型上添加請求方法
Vue.prototype.getRequest = getRequest;
Vue.prototype.postRequest = postRequest;
Vue.prototype.deleteRequest = deleteRequest;
Vue.prototype.putRequest = putRequest;

3）發送請求（請求方法的調用）

//  發送網絡請求
this.postRequest('/login', {userName，password}).then(resp=> {
        ...
    }
});

4）案例前端

import Vue from 'vue'
import cypressIndex from '../components/rootVue/cypressIndex'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

//  axios請求的方法引入
import {getRequest} from '../components/utils/settings'
import {postRequest} from '../components/utils/settings'

Vue.use(ElementUI);

//  將axios方法添加到VUE原型上
Vue.prototype.getRequest = getRequest;
Vue.prototype.postRequest = postRequest;
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#cypressIndex',
  render: h => h(cypressIndex)
})