Wie überschreibe ich diesen ES6-Code, um Safari-kompatibel zu sein?

Question

Ich habe einige Vue.js Code, der ES6 Pfeilfunktionen verwendet. Allerdings scheint Safari (und es scheint Chrome auf OSX in einem Fall) dies nicht zu mögen. Hier ist der Code:

fetchItemCount: function(){ 
       this.$http.get('/api/fetchItemCount') 
        .then(response => { 
         this.itemCount = response.data; 
        }) 
        .catch(response => { 

        }); 
      }, 

Ich habe mehrere Funktionen, die die Pfeilsyntax verwenden. Wie kann ich sie umschreiben, um sie zu vermeiden, aber immer noch die gleiche Arbeit zu machen?

Ich habe mit Babel versucht, den Code transpile aber das scheint Fehler (Kann nicht gesetzt Eigenschaft ‚Vue‘ undefinierter oder NULL-Verweis) einzuführen

Answer 1

Wie andere haben festgestellt, eine Transpiler wie babel verwenden würde das tun Trick aber da das hier nicht immer möglich ist ist wie es ohne Pfeilfunktionen aussehen würde.

fetchItemCount: function(){ 
    var that = this; 
    this.$http.get('/api/fetchItemCount') 
     .then(function(response) { 
      that.itemCount = response.data; 
     }) 
     .catch(function(response) { 

     }); 
}, 

Was die Pfeil-Funktion gibt Ihnen im Wesentlichen eine Funktion ist, die den this Umfang hält, wo er erklärt hat, zu reproduzieren, so dass wir müssen nur this im äußeren Umfang einer neuen Variablen zuweisen und verwenden, die innerhalb der Funktion.

Wie LinusBorg bemerkte in den Kommentaren, wenn vue-resource verwenden Sie müssen den var that = this; Teil nicht tun, da die Bibliothek this in dem Rückruf an den äußeren Rahmen für Sie ändern. Dies ist spezifisch für vue-resource Ressource und nicht, wie es im Allgemeinen mit Versprechungen gemacht wird, so dass es im Allgemeinen nicht mit anderen Bibliotheken arbeiten wird.

Answer 2

Eigentlich müssen Sie Ihren Code neu schreiben, zumindest nicht manuell. Was Sie tun können, ist, schreiben Sie Code wie das Beispiel, das Sie gaben und verwenden Sie einen Transpiler, wie Babel, um Ihren ES6-Code zu ES5 umzuschreiben.

Sie können es fast transparent für sich selbst machen, indem Sie einen Task-Manager wie Gulp oder Grunt verwenden.

Wenn Sie wissen müssen, wie Sie einen Task-Manager verwenden, werfen Sie einen Blick auf this article. Sie erhalten einen kurzen und fokussierten Überblick darüber, wie Sie Gulp verwenden können.

Nachdem Sie es gelesen haben, werden Sie sehen, wie einfach es ist, Dateien automatisch zu beobachten und ihren Inhalt durch ein Gulp-Skript zu straffen. Verwenden Sie einfach Gulp Babel plugin, um diese Aufgabe automatisch für Sie auszuführen.

Zum Beispiel:

const gulp = require('gulp'); 
const babel = require('gulp-babel'); 

gulp.task('transpile',() => { 
    return gulp.src('src/MY-VUE-SOURCE.js') 
     .pipe(babel({ 
      presets: ['es2015'] 
     })) 
     .pipe(gulp.dest('SOME_DESTINATION')); 
}); 

gulp.task('watch', function() { 
    gulp.watch(['src/**/*'], ['transpile']); 
}); 

Nach dem Ausführen schluck Uhr, die ausgeführt wird gehalten, bis Sie es manuell stoppen, jede Änderung, die Sie MY-VUE-SOURCE.js machen wird automatisch für Sie transpiled werden.