避免在“then”和“catch”中重复相同的代码

Question

Is there an option to avoid repeating this.$router.go() in the code below and run a piece of code whatever the result is?

await axios.put(`/user/` + this.data.id, this.user)
  .then((response) => {
    this.$router.go();
  })
  .catch((error) => {
    this.$router.go();
  });

Answer 1

You can put it into a named function ahead of time:

const handle = () => {
  this.$router.go();
};
await axios.put(`/user/` + this.data.id, this.user)
  .then(handle)
  .catch(handle);

You could also use .finally , if Axios supports it, it's a bit new , but a problem with .finally is that the Promise will "pass through" the .finally , so although you'll be able to call this.$router.go without repetition, if the axios call rejects, you'll end up with a rejected Promise. so you'll need to .catch afterwards to avoid the await from throwing:

await axios.put(`/user/` + this.data.id, this.user)
  .finally(() => {
    this.$router.go();
  })
  .catch(() => {});

Answer 2

You can use the finally method of a Promise:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/finally

Answer 3

...and run a piece of code whatever the result is?

In Axios you can do like this as per the official docs

axios.get('url')
  .then(function (response) {
    // handle success
  })
  .catch(function (error) {
    // handle error
  })
  .then(function () {
    // always executed
    this.$router.go();
  });

Update: Checked this after comment by @CertainPerformance

Axios now supports finally (Check under examples)

Answer 4

What you actually mean is this:

await axios.put(`/user/` + this.data.id, this.user)
  .then((response) => {
    this.$router.go();
  },(error) => {
    this.$router.go();
  });

because the only difference between the code you wrote and this one is: if this.$router.go() throws an error, then call this.$router.go() again. Doesn't make much sense.

And since you don't care about the response either, you can as well write:

await axios.put(`/user/` + this.data.id, this.user)
  .catch(() => {})
  .then(() => {
    this.$router.go();
  });

or better (IMO)

await axios.put(`/user/` + this.data.id, this.user).catch(noop);

this.$router.go();

assuming you have defined function noop(){} somewhere else for further use.

Even if it's said that you should not mix promise.then() and await , I prefer this over

try {
  await axios.put(`/user/` + this.data.id, this.user);
} catch (error) {}

this.$router.go();