0
233
VistasLa solicitud de Axios entra en un bucle infinito en VueJs
Creé una función axios que obtiene imágenes y las muestra en una página web. El problema es que, cuando el axios realiza la solicitud, entra en un ciclo infinito de solicitudes y nunca se detiene. El número en la burbuja azul sigue aumentando rápidamente.
No estoy seguro de cuál es el problema. Cualquier ayuda será apreciada.
este es un componente de diapositiva que muestra fotos en un control deslizante
<Slide v-for="(post, index) in getAllInstaPosts" :key="index" :class="`slide slide-${index}`" :aria-hidden="index === 0 ? false : true" >obtiene su información de este método en la propiedad calculada: intenté usar la palabra clave asíncrona aquí, pero el compilador seguía quejándose: asíncrono inesperado
getAllInstaPosts () { return (this.item.pdp && this.item.pdp === true) ? this.getInstaPostsForProduct() : this.allInstaPosts }esta función en la propiedad de métodos que crea la solicitud.
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; }1 Respuestas
Responde la pregunta0
- Las funciones de propiedad calculadas deben ser sincrónicas. No puede devolver la respuesta de una función asíncrona
- Las propiedades calculadas deben estar lo más cerca posible de las funciones puras. La creación de efectos secundarios, como la alteración de las propiedades de los datos, conduce a bucles infinitos, ya que las propiedades calculadas se vuelven a calcular cada vez que cambia cualquiera de sus dependencias.
La solución es almacenar el estado en sus propiedades de datos y actualizarlo en el momento apropiado, como cuando cambia su ruta actual.
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" } } };