Vueでaxiosをカプセル化するいくつかの方法

'axios' から axios をインポートします
'element-ui' から { Message, Loading } をインポートします
const ConfigBaseURL = 'https://localhost:3000/' //デフォルトのパス。envを使用して環境を決定することもできます。let loadingInstance = null //ここでは読み込み中です。
//createメソッドを使用してaxiosインスタンスを作成します export const Service = axios.create({
  timeout: 7000, // リクエストタイムアウト baseURL: ConfigBaseURL,
  メソッド: 'post'、
  ヘッダー: {
    'コンテンツタイプ': 'application/json;charset=UTF-8'
  }
})
// リクエストインターセプターを追加する Service.interceptors.request.use(config => {
  loadingInstance = Loading.service({
    ロック: 真、
    テキスト: '読み込み中...'
  })
  設定を返す
})
// レスポンスインターセプターを追加する Service.interceptors.response.use(response => {
  ロードインスタンスを閉じる()
  // console.log(応答)
  応答データを返す
}, エラー => {
  console.log('TCL: エラー', エラー)
  const msg = error.Message !== undefined ? error.Message : ''
  メッセージ（{
    メッセージ: 'ネットワークエラー' + メッセージ、
    タイプ: 'エラー'、
    期間: 3 * 1000
  })
  ロードインスタンスを閉じる()
  Promise.reject(error) を返します。
})

'./Service' から {Service} をインポートします。
エクスポート関数 getConfigsByProductId(productId) {
  戻り値 Service({
    url: '/manager/getConfigsByProductId',
    パラメータ: { 製品ID: 製品ID }
  })
}
エクスポート関数 getAllAndroidPlugins() {
  戻り値 Service({
    url: '/manager/getAndroidPlugin',
    メソッド: 'get'
  })
}
エクスポート関数 addNewAndroidPlugin(data) {
  戻り値 Service({
    url: '/manager/addAndroidPlguin',
    データ: JSON.stringify(データ)
  })
}

'@/api/request.js' から {getAllAndroidPlugins、getConfigsByProductId、addNewAndroidPlugin} をインポートします。

すべてのAndroidプラグインを取得する()
.then(res=>{

})

'@/api/Service.js' から {Service} をインポートします。
Vue.prototype.$axios=サービス

//サービス.js
'axios' から axios をインポートします
const ConfigBaseURL = 'https://localhost:3000/' // デフォルトのパス。env を使用して環境を決定することもできます // create メソッドを使用して axios インスタンスを作成します export const Service = axios.create({
  timeout: 7000, // リクエストタイムアウト baseURL: ConfigBaseURL,
  メソッド: 'post'、
  ヘッダー: {
    'コンテンツタイプ': 'application/json;charset=UTF-8'
  }
})
// リクエストインターセプターを追加する Service.interceptors.request.use(config => {
  設定を返す
})
// レスポンスインターセプターを追加する Service.interceptors.response.use(response => {
  // console.log(応答)
  応答データを返す
}, エラー => {
  Promise.reject(error) を返します。
})

'await-to-js' からインポート
エクスポート関数isObj(obj) {
  const typeCheck = typeof obj!=='undefined' && typeof obj === 'object' && obj !== null 
  戻り値 typeCheck && Object.keys(obj).length > 0
}
非同期関数_get(url, qs,headers)をエクスポートします。
  定数パラメータ = {
    URL、
    メソッド: 'get'、
    パラメータ: qs ? qs : ''
  }
  if (headers) { params.headers = headers }
  const [err, res] = await to(Service(params))
  もし (!err && res) {
    戻り値
  } それ以外 {
    console.log(err) を返します
  }
}

非同期関数_get(url, qs,headers)をエクスポートします。
  定数パラメータ = {
    URL、
    メソッド: 'get'、
    パラメータ: isObj(qs) ? qs: {}
  }
  if (isObj(headers)) {params.headers = headers}
  const [err, res] = await to(Service(params))
  もし (!err && res) {
    戻り値
  } それ以外 {
    console.log(err) を返します
  }
}

非同期関数_post(url, qs, body)をエクスポートします。
  定数パラメータ = {
    URL、
    メソッド: 'post'、
    パラメータ: isObj(qs) ? qs: {},
    データ: isObj(body) ? 本文: {}
  }
  const [err, res] = await to(Service(params))
  もし (!err && res) {
    戻り値
  } それ以外 {
    console.log(err) を返します
  }
}

//a.vue
<スクリプト>
'./Service' からインポート{_get}
エクスポートデフォルト{
	方法:{
    	非同期テスト(){
        const res = _get('http://baidu.com') を待機します
       }
    }
}
</スクリプト>