0
231
ViewsAxios request goes into infinite loop on VueJs
I have created an axios function that fetches images and displays them on a webpage. The problem is, when the axios makes the request, it goes into an infinite loop of requests and never stops. The number in the blue bubble just keeps increasing rapidly.
I am not sure what the problem. Any help will be appreciated.
this a Slide component that renders photos in a slider
<Slide
v-for="(post, index) in getAllInstaPosts"
:key="index"
:class="`slide slide-${index}`"
:aria-hidden="index === 0 ? false : true"
>
it get it's information from this method in computed property - I tried using async keyword in here, but the compiler kept complaining - unexpected async
getAllInstaPosts () {
return (this.item.pdp && this.item.pdp === true) ? this.getInstaPostsForProduct() : this.allInstaPosts
}
this function in methods property that creates the request.
getInstaPostsForProduct () { // <- makes a call to foursixty api to fetch insta posts of a certain product
axios.get(`https://foursixty.com/api/v2/${foursixty.sitename}/timeline/?for_url=https://www.${foursixty.domainName}/${this.$router.currentRoute.path}`)
.then(response => {
if (response.status === 200) {
this.postsForUrl = response.data.results
console.log('DATA:' + response.data)
}
})
.catch((err) => {
Logger.error(err);
})
return this.postsForUrl;
}
·
Juan Pablo Isaza
1 answers
Answer question0
- Computed property functions must be synchronous. You cannot return the response from an async function
- Computed properties should be as close to pure functions as possible. Creating side-effects like altering data properties leads to infinite loops since computed properties are recomputed every time any of their dependencies change.
The solution is to store state in your data properties and update it at the appropriate time such as when your current route changes
export default {
data: () => ({
allInstaPosts: [], // ¯\_(ツ)_/¯
postsForUrl: [],
item: {
pdp: true // ¯\_(ツ)_/¯
}
}),
computed: {
getAllInstaPosts () {
return this.item.pdp ? this.postsForUrl : this.allInstaPosts;
}
},
methods: {
async getInstaPostsForProduct () {
this.postsForUrl = []; // empty the array
try {
const { data: { results } } = await axios.get(
`https://foursixty.com/api/v2/${foursixty.sitename}/timeline/`,
{
params: {
for_url: `https://www.${foursixty.domainName}/${this.$route.path}`
}
}
);
this.postsForUrl = results;
} catch (err) {
Logger.error(err);
}
}
},
watch: {
$route: { // watch for route changes and trigger the request
immediate: true,
handler: "getInstaPostsForProduct"
}
}
};
·
Juan Pablo Isaza
Report
Answer question