Following a Vue tutorial , in which fetch
an API that returns an image of cats is made, I suddenly came to a curious situation.
new Vue({
el: '#app',
data: {
catSrc: null,
},
...
this.catSrc = null;
let res = fetch("https://api.thecatapi.com/v1/images/search",{
method: "GET",
headers: {
"x-api-key": API_KEY,
"Accept":"application/json",
},
})
.then(function(response) {
return response.json();
})
.then(function(data){
return data[0].url;
});
let getImg = () => {
res.then((result) => {
this.catSrc = result;
});
};
getImg();
The above does and I manage to return the value of the promise to the Vuefetch
dynamic variable , but since I first thought of "converting" the arrow function, the alternative never returned the value that the arrow function does return.
Can someone explain to me why of this?
The "normal" function I tried to use was:
let getImg = function () {
res.then(function (result) {
this.catSrc = result;
});
};
getImg();