Vue プロジェクトで axios をカプセル化する方法 (http リクエストの統合管理)

エクスポートデフォルト{
    'users_add': '/users/add',
    'users_find': '/users/find',
    'users_update': '/users/update',
    'users_delete': '/users/delete'
}

'axios' から axios をインポートします
'./api' から api をインポートします

//axiosインスタンスオブジェクトを作成するlet instance = axios.create({
    baseURL: 'http://localhost:3000', //サーバーアドレス タイムアウト: 5000 //デフォルトのタイムアウト期間})

//リクエストインターセプターinstance.interceptors.request.use(config=>{
    //ここでリクエストインターセプトのコードを記述します。これは通常、読み込みウィンドウをポップアップするために使用されます。console.log('Requesting...')
    設定を返す
},エラー=>{
    console.error('リクエストが失敗しました',err)
})

//レスポンスインターセプターinstance.interceptors.response.use(res=>{
    //ここで応答データを処理します console.log('リクエストが成功しました!')
    return res //返されたオブジェクトはリクエストメソッドのレスポンスオブジェクトに渡されます},err=>{
    // 応答エラー処理 console.log('応答に失敗しました!', err)
    // Promise.reject(err) を返します。
})

//axios リクエスト メソッドをカプセル化します。パラメーターは構成オブジェクトです //option = {method,url,params} method はリクエスト メソッド、url はリクエスト インターフェイス、params はリクエスト パラメーターです async function http(option = {}) {
    結果 = null とする
    if(option.method === 'get' || option.method === 'delete'){
     // 取得および削除リクエストを処理する await instance[option.method](
                api[オプション.url],
                {パラメータ: オプション.パラメータ}
          ).then(res=>{
            結果 = res.data
        }).catch(エラー=>{
            結果 = エラー
        })
    }それ以外の場合(option.method === 'post' || option.method === 'put'){
     //POSTおよびPUTリクエストを処理する await instance[option.method](
                api[オプション.url],
                オプション.パラメータ
            ).then(res=>{
            結果 = res.data
        }).catch(エラー=>{
            結果 = エラー
        })
    }

    結果を返す
}

デフォルトのhttpをエクスポート

'vue' から Vue をインポートします
'./App.vue' からアプリをインポートします。
'./router' からルーターをインポートします
'./store' からストアをインポートします
'./http' から http をインポートします

Vue.config.productionTip = false
Vue.prototype.$http = http

Vue.use(Elementui)

新しいVue({
  ルーター、
  店、
  レンダリング: h => h(App)
}).$mount('#app')

<テンプレート>
  <div>
    <button @click="getDate">リクエストを送信</el-button>
  </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  メソッド: {
    日付を取得する(){
      this.$http({
        メソッド: 'get'、
        url: 'users_find'
      }).then(res=>{
        コンソール.log(res)
      })

    }
  }
}
</スクリプト>