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

vue中采用axios處理網絡請求，避免請求接口重復代碼，以及各種網絡情況造成的異常情況的判斷，采用axios請求封裝和異常攔截操作；

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);，這樣無論請求成功還是失敗，在成功的回調中都能收到通知

2、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)

})

總結

以上是生活随笔為你收集整理的ios 请求失败封装_vue_axios请求封装、异常拦截统一处理的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。