vue-router push route after axios post request

Question

When I wrote the following code:

axios.post('/user', { email: this.email })
.then(
    (response) => {
      if (!response.data) {
        this.$router.push({ path: '/register', params: { user: defaultUser } });
      } else {
        this.$router.push({ path: '/login', params: { user: response.data } });
      }
    }, 
    (error) => {
      console.log(error);
    }
);

The compiler shows error @typescript-eslint/no-floating-promises: Promises must be handled appropriately or explicitly marked as ignored with the void operator.

I also tried put a catch block after then block but it's still the same problem.

axios.post('/user', { email: this.email })
  .then((response) => {
    if (!response.data) {
      this.$router.push({ path: '/register', params: { user: defaultUser } });
    } else {
      this.$router.push({ path: '/login', params: { user: response.data } });
    }
  })
  .catch((error) => {
    console.log(error);
  });

I also figured out that the problem disappears when I comment out this.$router.push. So the problem might deal with redirecting route and resolving promise. Maybe it's better to rephrase the problem to 'how to redirect route without leaving unresolved promise'? I hope I make the question clear.

this should be of help https://stackoverflow.com/questions/43980188/what-could-this-be-about-tslint-error-promises-must-be-handled-appropriately — Jonathan Akwetey Okine, Aug 10 '20 at 19:53
@JonathanAkweteyOkine I have checked the post but I don't think it solved my problem. I've updated the question and hopefully made it clear. — ckouder, Aug 11 '20 at 14:47
Is the curly bracket at the bottom of your snippet from an outer function? — Daniel_Knights, Aug 11 '20 at 15:16
@Daniel_Knights Yes that's from an outer function. I made a change and just deleted it. — ckouder, Aug 11 '20 at 18:08

score 0 · Answer 1 · answered Aug 23 '20 at 19:19

OK finally I figured it out. this.$router.push() returns a promise which I didn't handle well. The final solution works as the following:

axios.post('/user', { email: this.email })
  .then((response) => {
    if (!response.data) {
      void this.$router.push({ path: '/register', params: { user: defaultUser } });
    } else {
      void this.$router.push({ path: '/login', params: { user: response.data } });
    }
  })
  .catch((error) => {
    console.log(error);
  });

Since having void would trigger eslint no-void syntax error, and I don't care about the return value of this promise, I suppressed the warning by adding /* eslint-disable no-void */.

vue-router push route after axios post request

1 Answers1