So kapseln Sie Axios in ein Vue-Projekt (einheitliche Verwaltung von HTTP-Anfragen)

Standard exportieren {
    'users_add': '/Benutzer/Hinzufügen',
    'users_find': '/Benutzer/finden',
    'users_update': '/Benutzer/Update',
    'users_delete': '/Benutzer/löschen'
}

Axios von „Axios“ importieren
API aus „./api“ importieren

//Erstellen Sie ein Axios-Instanzobjekt let instance = axios.create({
    baseURL: 'http://localhost:3000', //Serveradressen-Timeout: 5000 //Standard-Timeout-Dauer})

//Interceptor anfordern instance.interceptors.request.use(config=>{
    //Schreiben Sie hier den Code zum Abfangen von Anforderungen, der im Allgemeinen zum Öffnen des Ladefensters verwendet wird console.log('Angefordert ...')
    Konfiguration zurückgeben
},err=>{
    console.error('Anforderung fehlgeschlagen',err)
})

//Antwort-Interceptor-Instanz.interceptors.response.use(res=>{
    //Verarbeite hier die Antwortdaten console.log('Anfrage erfolgreich!')
    return res //Das zurückgegebene Objekt wird an das Antwortobjekt der Anforderungsmethode übergeben},err=>{
    // Fehlerbehandlung bei der Antwort console.log('Antwort fehlgeschlagen!', err)
    // Promise.reject(err) zurückgeben;
})

//Kapselt die Axios-Anforderungsmethode, Parameter ist ein Konfigurationsobjekt //Option = {Methode,URL,Parameter} Methode ist Anforderungsmethode, URL ist Anforderungsschnittstelle, Parameter ist Anforderungsparameter asynchrone Funktion http(Option = {}) {
    let result = null
    wenn(option.method === 'holen' || option.method === 'löschen'){
     //Get- und Delete-Anfragen verarbeiten, warte auf Instanz [Option.Methode](
                api[option.url],
                {params: option.params}
          ).dann(res=>{
            Ergebnis = res.data
        }).catch(err=>{
            Ergebnis = Fehler
        })
    }sonst wenn(option.method === 'post' || option.method === 'put'){
     //Post- und Put-Anfragen verarbeiten, auf Instanz warten [Option.Methode](
                api[option.url],
                option.params
            ).dann(res=>{
            Ergebnis = res.data
        }).catch(err=>{
            Ergebnis = Fehler
        })
    }

    Ergebnis zurückgeben
}

Standard-HTTP exportieren

Vue von „vue“ importieren
App aus „./App.vue“ importieren
Router aus „./router“ importieren
Store aus „./store“ importieren
importiere http von './http'

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

Vue.use(Elementui)

neuer Vue({
  Router,
  speichern,
  rendern: h => h(App)
}).$mount('#app')

<Vorlage>
  <div>
    <button @click="getDate">Anfrage senden</el-button>
  </div>
</Vorlage>

<Skript>
Standard exportieren {
  Methoden: {
    getDate(){
      dies.$http({
        Methode: 'get',
        URL: „Benutzer_finden“
      }).dann(res=>{
        Konsole.log(res)
      })

    }
  }
}
</Skript>