vue axios二次パッケージの例コード

この時間はプロジェクトに必要なことを教えて、vueを使いました。
最初はフレームを組む時に使っていましたが、vue-resourceの後ろに公式のおすすめaxiosを見て、交換しました。ついでにパッキングしました。

//  axios
import 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 => {
 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をパッケージ化したのですか？ここではasync awaitを使って開発に失敗した場合、エラーはプロミゼの対象ではないです。ps：async awaitが戻ってくるのはpromiseです。この問題は後でやります。以下は要求インターフェースの一例である。

import req from '../api/requestType'
/**
 *     
 */
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)
},

ここに来たら簡単に自分のプロジェクトに合うaxiosを包装します。
パッケージの理由:
1、エラーコードは後端と相談してもいいです。ここで統一処理を提示します。必要でない面倒を省きます。
2、インターフェースの全報文と解読をすれば、ここで処理できます。
インターフェースの統一分類： 

const serviceModule = { 
 getLocation: { 
 url: ' service/location/transfor', 
 method: 'get' 
 } 
} 
const ApiSetting = {...serviceModule } 
 
export default ApiSetting 

分類の利点:
1、後期インターフェースのアップグレードやインターフェース名の変更はメンテナンスに便利です。
httpコール：

<script> 
import http from "../../lib/http.js"; 
import ApiSetting from "../../lib/ApiSetting.js"; 
export default { 
 created: function() { 
 http(ApiSetting.getLocation,{"srChannel": "h5",}) 
 .then((res)=>{ 
  console.log(res) 
 },(error)=>{ 
  console.log(error)  
 }) 
 }, 
 methods: { 
 
 } 
} 
</script> 

以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。