前端采用了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") } });}
新聞熱點
疑難解答
圖片精選