VueJS/JS/Axios: Scope

Möchte man via JS/VueJS über Axios einen API-Call machen und anschließend eine Funktion aufrufen, kommt einem unter Umständen der Scope in die Quere. Dazu folgendes Beispiel, so wie ich es im ersten Versuch definieren würde:

axios.post(‚http://localhost:4000/api/customer/get/‘) .
.then(function (response) {
this.customer_data = response.data;
})

Problem ist die Anweisung this.customer_data, denn this bezieht sich auf das Axios Objekt und nicht auf das übergeordnete Objekt/Scope.

Die Lösung ist eigentlich ziemlich einfach. Tatsächlich gibt es zwei Varianten, wobei die zweite mit der Arrow-Funktion etwas besser ist.

Lösung 1

let that = this;
axios.post('http://localhost:4000/api/customer/get/') .
.then(function (response) {
that.customer_data = response.data;
})

Über that ist man also dann wieder im Scope der darüber liegenden Hierarchie.

Lösung 2

axios.post(‚http://localhost:4000/api/customer/get/‘) .
then((response) => {
this.customer_data = response.data;
})

Im Prinzip ist die Defintion wie das ursprüngliche nicht funktionierende Beispiel nur mit einer Arrow-Funktion. In einer klassischen Funktion ist der Scope von this an das Objekt gebunden, in dem die Funktion aufgerufen wird. Bei eine Arrow-Funktion hingegen liegt der Scope von this außerhalb der Funktion, in der es referenziert wird.