Klasse Import in Vue Komponente

Question

ich separate Klasse für axios Anfragen machen wollen, die wie "Service" arbeitet

Vue Komponente:

<template> 
    <div v-for="user in users"> 
     {{ user.firstname }} - {{ user.lastname }} - {{ user.middlename }} 
    </div> 
</template> 

<script> 
    import ConnectionService from './ConnectionService'; 
    const connectionService = new ConnectionService(); 

    export default { 
     mounted() { 
      console.log('Component is mounted'); 
     }, 

     created() { 
      this.users = connectionService.getSingleInstance('http://laravelapi/user'); 
      console.log("This are users " + this.users); 
     }, 

     data() { 
      return { 
       users: [], 
      } 
     } 
    } 
</script> 

und der Service ist folgende:

export default class ConnectionService { 

    getSingleInstance(path) { 
     console.log('This is path ' + path); 

     let axios_data = {}; 
     axios.get(path).then(response => axios_data = response.data.result); 

     console.log('This is data ' + axios_data); 
     console.log(axios_data); 

     return axios_data; 
    } 


} 

Wie ich in meiner Konsole sehen kann, bekomme ich die Daten von axios xhr Anfrage, aber dann werden sie nicht an die Vue-Komponente übergeben, weil ich leere Objekt in der Zeichenfolge console.log ("Das sind Benutzer" + dies). Benutzer);

Wie COnnectionService richtig importieren und dann in Vue-Komponente verwenden?

Answer 1

Ändern der nächste in Ihrer vue Komponente:

created() { 
    connectionService.getSingleInstance('http://laravelapi/user') 
     .then(function(response){ 
      this.users = response 
      console.log("This are users " + this.users); 
     }) 
     .catch(function(error){ 
      console.log(error) 
     }); 
} 

Wie getSingleInstance ein Objekt zurückgibt Ich empfehle Benutzer wie folgt erklärt: user: Object oder user: {} statt user: []

Es scheint, dass Sie Versprechen verwenden, weil .get ist eine asynchrone Funktion. So installieren Q verspricht Paket sehen: Q

Wie in Ihrem Beispiel verwenden:

import Q from 'q' 

export default class ConnectionService { 
    getSingleInstance(path) { 
     var deferred = Q.defer() 
     console.log('This is path ' + path); 

     axios.get(path) 
      .then(
       function(response) { 
        deferred.resolve(response.data.result) 
       }, 
       function(error){ 
        deferred.reject(error) 
       }) 
     return deferred.promise 
    } 
} 

Wie man sehen kann ich den Pfeil Syntax geändert haben (=>), weil ich eher wie dieses klären.

Ich kann es nicht testen und ich bin kein Experte (ich versuche nur zu helfen), aber ich denke, es sollte funktionieren.