M\u00f6chte man via JS\/VueJS \u00fcber Axios einen API-Call machen und anschlie\u00dfend eine Funktion aufrufen, kommt einem unter Umst\u00e4nden der Scope in die Quere. Dazu folgendes Beispiel, so wie ich es im ersten Versuch definieren w\u00fcrde:<\/p>\n\n\n\n
axios.post(‚http:\/\/localhost:4000\/api\/customer\/get\/‘) .
.then(function (response) {
this.customer_data = response.data;
})<\/p>\n\n\n\n
Problem ist die Anweisung this.customer_data, denn this bezieht sich auf das Axios Objekt und nicht auf das \u00fcbergeordnete Objekt\/Scope.<\/p>\n\n\n\n\n\n\n\n
Die L\u00f6sung ist eigentlich ziemlich einfach. Tats\u00e4chlich gibt es zwei Varianten, wobei die zweite mit der Arrow-Funktion etwas besser ist.<\/p>\n\n\n\n
L\u00f6sung 1<\/strong><\/p>\n\n\n\n \u00dcber that ist man also dann wieder im Scope der dar\u00fcber liegenden Hierarchie.<\/p>\n\n\n\n L\u00f6sung 2<\/strong><\/p>\n\n\n\n Im Prinzip ist die Defintion wie das urspr\u00fcngliche 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\u00dferhalb der Funktion, in der es referenziert wird. <\/p>\n","protected":false},"excerpt":{"rendered":" M\u00f6chte man via JS\/VueJS \u00fcber Axios einen API-Call machen und anschlie\u00dfend eine Funktion aufrufen, kommt einem unter Umst\u00e4nden der Scope in die Quere. Dazu folgendes Beispiel, so wie…<\/p>\n","protected":false},"author":4,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[88,89],"tags":[],"class_list":["post-1405","post","type-post","status-publish","format-standard","hentry","category-javascript","category-vuejs"],"_links":{"self":[{"href":"https:\/\/www.weschkalnies.de\/blog\/wp-json\/wp\/v2\/posts\/1405","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.weschkalnies.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.weschkalnies.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.weschkalnies.de\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.weschkalnies.de\/blog\/wp-json\/wp\/v2\/comments?post=1405"}],"version-history":[{"count":6,"href":"https:\/\/www.weschkalnies.de\/blog\/wp-json\/wp\/v2\/posts\/1405\/revisions"}],"predecessor-version":[{"id":1444,"href":"https:\/\/www.weschkalnies.de\/blog\/wp-json\/wp\/v2\/posts\/1405\/revisions\/1444"}],"wp:attachment":[{"href":"https:\/\/www.weschkalnies.de\/blog\/wp-json\/wp\/v2\/media?parent=1405"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.weschkalnies.de\/blog\/wp-json\/wp\/v2\/categories?post=1405"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.weschkalnies.de\/blog\/wp-json\/wp\/v2\/tags?post=1405"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}let that = this;
axios.post('http:\/\/localhost:4000\/api\/customer\/get\/') .
.then(function (response) {
that.customer_data = response.data;
})<\/code><\/p>\n\n\n\naxios.post('http:\/\/localhost:4000\/api\/customer\/get\/') .
then((response) => {
this.customer_data = response.data;
}) <\/code><\/p>\n\n\n\n