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