How to avoid automatic reload after nested AXIOS call?

Viewed 309

Well, I have the same problem. When I create a petition with axios it works properly, but when I have nested axios petitions the page refreshes automatically. And I can't figure out what is the problem.

I am using evt.preventDefault() and return false; but none of them seem work.

When I call this single function everything works fine:

    addSport(payload) {
      const path = 'http://localhost:5000/sports';
      axios.post(path, payload)
        .then(() => {
          this.getSports();
          this.message = 'Sport Added!';
          this.showMessage = true;
          return false;
        })
        .catch((error) => {
          // eslint-disable-next-line
          console.error(error);
        });
      return false;
    }

and I call it:

      this.uploadImage(formData, this.addSports, payload);

But, when I try to use this one, the page is reloading after two calls are executed:

    uploadImage(formData, callback, payload) {
      const path = 'http://localhost:5000/upload';
      axios.post(path, formData)
        .then((response) => {
          callback({
            sport_id: payload.sport_id,
            name: payload.name,
            logo_url: response.data.logo_url,
          });
          return false;
        })
        .catch((error) => {
          // eslint-disable-next-line
          console.error(error);
        });
      return false;
    },
    addSport(payload) {
      const path = 'http://localhost:5000/sports';
      axios.post(path, payload)
        .then(() => {
          this.getSports();
          this.message = 'Sport Added!';
          this.showMessage = true;
          return false;
        })
        .catch((error) => {
          // eslint-disable-next-line
          console.error(error);
        });
      return false;
    }

The way I call it is:

    this.uploadImage(formData, this.updateDeporte, payload);

Can anyone help me to figure out how can I fix that?

0 Answers
Related