Vuejs a function is triggering an infinite loop

Question

I've created a function to get a user's IP address and save to a database, but instead of saving to the database, my home page is quickly and infinitely refreshing. I've tried removing watchers that may be causing this, but this did not solve the problem.

All the relevant parts that are triggering this loop:

1 - When home is mounted:

mounted() {
    document.documentElement.scrollTop = 0;
    IpService.getIpAddress().then((data) => {
      const ip = localStorage.getItem("ip");
      this.ip = data.data.ip;
      if (!ip) {
        VisitorsService.add(this.ip).then(()=> {
         localStorage.setItem("ip",this.ip);
        })
      }

    });
  },

2 - ip service to get user's ip:

export default class ipService {
    static getIpAddress() {
        return axios.get("https://www.cloudflare.com/cdn-cgi/trace", {
            responseType: "text",
            transformResponse: data =>
                Object.fromEntries(data.trim().split("\n").map(line => line.split("=")))
        })
    }
}

3 - This is the part where is happening the issue, if I remove this the problem stops, but it's necessary that this method works

  static add(ip) {
        return axios({
            url: APIConstants.baseURL + "visitors/add",
            method: "POST",
            data: {
                ip: ip
            }
        });
    }

Conclusion: I have no idea why adding a simple axios function is causing an infinite loop on my home page. If I remove that function the issue stop. I would like to know if anyone has an idea on how can I fix this terrible loop?

Trying first stackover solution: A user suggested to use everything async it might solve the issue:

1 - mounted at home

  async mounted() {
    document.documentElement.scrollTop = 0;

    let data = await IpService.getIpAddress();
    this.ip = data.data.ip;
    //The issue happens only after this add()
    await VisitorsService.add(this.ip);
  },

2 - ipService class

const axios = require('axios');

export default class ipService {
    static async getIpAddress() {
        return await axios.get("https://www.cloudflare.com/cdn-cgi/trace", {
            responseType: "text",
            transformResponse: data =>
                Object.fromEntries(data.trim().split("\n").map(line => line.split("=")))
        })
    }
}

3 - Visitor service where the is the issue:

static async add(ip) {
        return axios({
            url: APIConstants.baseURL + "visitors/add",
            method: "POST",
            data: {
                ip: ip
            }
        });
    }

New conclusion changing everything to async still keep the loop problem.

You look to have async dependencies and I have to wonder if [this question and its answer](https://stackoverflow.com/q/64117116/), one about making asynchronous calls in view setup also has relevance to your problem? I am curious if you've tried `await`ing axios to return the data before completing the page's mounting? Also, is use of [Suspense](https://vuejs.org/guide/built-ins/suspense.html) necessary? Note however that I am no Vue js 3 expert, just a very curious learner. Let's see what the real experts have to say. — Hovercraft Full Of Eels, Apr 14 '22 at 17:21
Today i'm too headache maybe i'm doing eroeneous calls mixing async with sync, I'll try to fix it and let you know — Adriel Kirch, Apr 14 '22 at 19:29
Best if you can create and post a decent MRE code post. Check out the MRE, [mre] link, and also, check out this meta post: [How do I create a Vue.js Stack Snippet?](https://meta.stackoverflow.com/questions/417263/how-do-i-create-a-vue-js-stack-snippet) — Hovercraft Full Of Eels, Apr 14 '22 at 20:47

score 0 · Answer 1 · answered Apr 14 '22 at 17:34

It's a re-rendering issue ,the user who posted this topic had a similar issue

Infinite loop on axios call, React

You should probably always use an async function and await request calls

export default class ipService = async () => {
    static getIpAddress() {
        return await axios.get("https://www.cloudflare.com/cdn-cgi/trace", {
            responseType: "text",
            transformResponse: data =>
                Object.fromEntries(data.trim().split("\n").map(line => line.split("=")))
        })
    }
}

I will edit the question to show how I made I async but the issue is there yet ) = — Adriel Kirch, Apr 14 '22 at 19:57

Vuejs a function is triggering an infinite loop

1 Answers1