Vue で axios のセカンダリカプセル化を実装する方法

この記事では、主に vue axios の二次カプセル化のサンプル コードを紹介します。これが非常に優れていると思うので、参考として紹介します。エディターをフォローして見てみましょう

この期間中に、プロジェクトのニーズを伝え、vue を使用しました。

最初にフレームワークを構築し始めたとき、私は vue-resource を使用していましたが、後で axios の公式推奨を見たのでそれに切り替えて、ちなみに

rreee

手順

1。リクエストの開始時に現在行われているリクエストと同じリクエスト URL をインターセプトするためのハッシュ判定が追加されました

2. 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)
  })
  })
  }
 }

での get および post パブリック設定の抽出 3.ここでの axios とは何ですか? 返されるのは、なぜ get と post のために promise をカプセル化する必要があるのでしょうか? 開発で async await を使用する場合、データ リクエストは失敗すると、返されたオブジェクトが Promise オブジェクトではないというエラーが報告されます。 (追記: Async await は Promise を返します。この問題については後ほど説明します。) 上記のエラーを回避するには、Promise オブジェクトを直接返すだけです。以下はリクエストインターフェースの例です

axios.defaults.baseURL = '/api'
//设置默认请求头
axios.defaults.headers = {
 'X-Requested-With': 'XMLHttpRequest'
}
axios.defaults.timeout = 10000

以下はデータの取得です

import req from '../api/requestType'
/**
 * 拼团详情
 */
export const groupDetail = param => {
 return req.get('/RestHome/GroupDetail',param)
}

この時点では、独自のプロジェクトに適したaxiosを単純にカプセル化しています

パッケージ化の理由:

1. エラーについて話し合うことができます。この統合プロンプトは均一に処理されるため、不要な手間が省けます

2. すべてのインターフェイス メッセージを暗号化および復号化する必要がある場合は、ここで処理できます

インターフェイスの統合分類:

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

分類の利点:

1. 後のインターフェースのアップグレード または、メンテナンスを容易にするためにインターフェース名を変更することもできます

http call:

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

上記は、将来皆さんのお役に立てれば幸いです。

関連記事:

Angular5.1の新機能の詳細な解釈

vueを使って数独ゲームを開発する方法

vuexを使用してメニュー管理を実装する方法

webpack3の詳細な解釈IE8と互換性のあるコンパイル(詳細なチュートリアル)

JSを使用して重複したjsonを削除する方法

以上がVue で axios のセカンダリカプセル化を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。