VueでAxiosのインスタンスを作成すると動作しない

Question

VueでAJAXを使用しています。 Youによって書かれたarticleでは、彼はVue.prototype.$http = axiosと設定でき、私はVueインスタンスでthis.$httpを使用できると述べました。それはうまく動作します。

しかし、私は私がthis.$http.get('/relativeURL')を使用する場合には動作しません

Vue.prototype.$http = axios.create({ 
    baseURL: 'https://app.herokuapp.com/' 
}) 

のように、$httpにaxiosインスタンスを作成する場合。それは私が設定した設定にアクセスすることができないようです。つまり、それはに送信されません

他の方法では、Vue.prototype.$axios = axios.create({config})のような他のオブジェクトでaxiosインスタンスを設定した場合。それは正常に動作します。

誰かがこれがなぜ起こるのか説明できますか？

Answer 1

あなたは

Vue.prototype.$https = axios.create({ 
    baseURL: 'https://app.herokuapp.com/' 
}) 

を設定し、プロパティ名に

this.$http... 

誤植を使用（HTTPSからHTTP対）。

$ httpとしてください。 this.axios.get ...

Answer 2

Vueインスタンスレベルで定義すると、独自のメリットがあるかもしれませんが、グローバル名前空間を汚染したくありません。今、あなたはそれをしたい場所をインポートすることができます

バックエンドapi.js

import axios from 'axios' 
export default axios.create({ 
    baseURL: 'http://YourAPiIp:9090/api/v1', 
    timeout: 100000, 
    headers: { 
    'Content-Type': 'application/json' 
    } 
}) 

：私のアプローチは、私のような、私はaxiosインスタンスごとに異なるファイルがあるgatewayフォルダを、持って、何をしていますそれを使用してください：

import backendApi from '../../gateways/backend-api'