Vue.js Wiederverwendbare Funktionen erstellen

Question

Mein Code ist schrecklich. Ich bin neu auf diesem Vue.js. Wie Sie sehen können, habe ich zwei AJAX-Aufrufe, die eine Funktion werden müssen. Wie ich es machen werde. Ich kann zum Beispiel nicht verwenden

var app = this 
this.allAdmissions('http://localhost/school/api/admissions', app.admission) 

und dann in meinen Methoden werde ich nur

allAdmissions: _.debounce(function(url, value){ 

       axios.get(url) 
        .then(function(response){ 
         value = response.data.admissions 

        }) 
        .catch(function(error){ 
         console.log(error) 
        }) 
      }), 

Es funktioniert nicht. Ich muss eine Funktion erstellen, um diese beiden zu kombinieren.

var app = new Vue({ 
    el: '#app', 
    data: { 
     value: '', 
     admissions: [], 
     schoolyear: [] 
    }, 

    created: function(){ 
     this.allAdmissions('http://localhost/school/api/admissions') 
     this.allSchoolYear('http://localhost/school/api/schoolyear') 
    }, 
    methods: { 

     allAdmissions: _.debounce(function(url){ 
       var app = this 
       axios.get(url) 
        .then(function(response){ 
         app.admissions = response.data.admissions 

        }) 
        .catch(function(error){ 
         console.log(error) 
        }) 
      }), 
     allSchoolYear: _.debounce(function(url){ 
       var app = this 
       axios.get(url) 
        .then(function(response){ 
         app.schoolyear = response.data.schoolYear 

        }) 
        .catch(function(error){ 
         console.log(error) 
        }) 
      }) 



    } 
}) 

Answer 1

Ich sehe, dass Sie verspricht für die Ajax-Anforderung verwenden, die ein großer Schritt vorwärts ist. Ich würde vorschlagen, ein separates js-Objekt mit einer einzigen (öffentlichen) Eingabepunkt-Methode zu erstellen, um die Logik des Erstellens beider Anfragen zu konsolidieren. Dieses einzelne Objekt würde ein zusammengesetztes Versprechen zurückgeben, das aufgelöst wird, wenn beide Anforderungen erfüllt sind. Werfen Sie einen Blick auf Promise.All für dieses. Dann würden Sie Ihre benutzerdefinierte Methode vom Bereit-Hook in der Vue-Instanz aufrufen. https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Promise/all.

was Sie bekommen wird, ist Code, der leichter zu verstehen ist und für Tippfehler oder andere Flussfehler, die Sie gemacht haben, zu debuggen.

Ein weiterer Vorschlag ist, dass Sie Pfeilfunktionen für Ihre Rückrufe wie folgt verwenden.

.then((response) => { 
    this.admissions = response.data.admissions 
}) 

, was das Sie tun können, ist die Bindung

var app = this 

überspringen, so dass ‚dies‘ den Verweis auf Ihre aktuelle vue Instanz behält.