vue項目中對axios的二次封裝

標籤：ams   失敗   int   plain   問題   opener   head   lan   pos   

近來在使用vue重構公司m站時，使用了axios來進行資料的請求，由於項目的需要，對axios進行了二次封裝，點擊進入axios

//引入axiosimport axios from ‘axios‘ let cancel ,promiseArr = {}const CancelToken = axios.CancelToken;//請求攔截器axios.interceptors.request.use(config => {    //發起請求時，取消掉當前進行中的相同請求    if (promiseArr[config.url]) {        promiseArr[config.url](‘操作取消‘)        promiseArr[config.url] = cancel    } else {        promiseArr[config.url] = cancel    }      return config}, error => {    return Promise.reject(error)}) //響應攔截器即異常處理axios.interceptors.response.use(response => {    return response}, error => {    if (error && err.response) {      switch (err.response.status) {        case 400:          err.message = ‘錯誤請求‘          break;        case 401:          err.message = ‘未授權，請重新登入‘          break;        case 403:          err.message = ‘拒絕訪問‘          break;        case 404:          err.message = ‘請求錯誤,未找到該資源‘          break;        case 405:          err.message = ‘要求方法未允許‘          break;        case 408:          err.message = ‘請求逾時‘          break;        case 500:          err.message = ‘伺服器端出錯‘          break;        case 501:          err.message = ‘網路未實現‘          break;        case 502:          err.message = ‘網路錯誤‘          break;        case 503:          err.message = ‘服務不可用‘          break;        case 504:          err.message = ‘網路逾時‘          break;        case 505:          err.message = ‘http版本不支援該請求‘          break;        default:          err.message = `串連錯誤${err.response.status}`      }    } else {      err.message = "串連到伺服器失敗"    }    message.error(err.message)      return Promise.resolve(error.response)}) axios.defaults.baseURL = ‘/api‘//設定預設要求標頭axios.defaults.headers = {    ‘X-Requested-With‘: ‘XMLHttpRequest‘}axios.defaults.timeout = 10000 export default {  //get請求    get (url,param) {      return new Promise((resolve,reject) => {        axios({          method: ‘get‘,          url,          params: param,          cancelToken: new CancelToken(c => {            cancel = c          })        }).then(res => {          resolve(res)        })      })    },  //post請求    post (url,param) {      return new Promise((resolve,reject) => {        axios({          method: ‘post‘,          url,          data: param,          cancelToken: new CancelToken(c => {            cancel = c          })        }).then(res => {          resolve(res)        })      })     }  }

說明

1.為防止發起請求時，當前進行中的相同請求，在請求攔截器中加入了hash判斷，將相同請求url攔截
2.將axios中get，post公用配置抽離出來

axios.defaults.baseURL = ‘/api‘//設定預設要求標頭axios.defaults.headers = {    ‘X-Requested-With‘: ‘XMLHttpRequest‘}axios.defaults.timeout = 10000

3.get，post請求的封裝

可能你會問，這裡的axios返回的就是promise對象，為什麼還要再次對get,post封裝一次promise.因為我這邊的話，在開發中使用async await會出現資料請求失敗的情況，報的錯就是返回的不是promise對象。(ps：可async await返回的就是promise呀,這個問題後續再搞一下)就直接return了一個promise對象，以避免上面的錯誤。下面是請求介面的一個例子

import req from ‘../api/requestType‘/** 4. 拼團詳情 */export const groupDetail = param => {    return req.get(‘/RestHome/GroupDetail‘,param)}

下面是資料的擷取

async getData() {    const params = {        TopCataID: 0,        pageNumber: this.pageNumber,        pageSize: this.pageSize    }    const res = await groupList(params)},

1.在相應攔截器中對請求常見的錯誤進行了全域異常處理

axios.interceptors.response.use(response => {...

到這裡我們就簡單的封裝了一下適合自己項目的axios

原文連結：1190000012332982

vue項目中對axios的二次封裝