0

I am wondering how to switch the created function that is already asynchronours via .then, to async await.

created() {
    this.$http.get("wp/v2/posts").then(
      response => {
        for (let post in response.data) {
          this.posts.push(response.data[post]);
        }
        this.$store.dispatch({
          type: "updatePost",
          value: this.posts
        });
      },
      error => {
        alert(error);
      }
    );
}

I could easily add async created() and await this.$http.get, but couldn't figure out on the error => {} part since the curly braces for responses will also be gone.

HNG
  • 251
  • 3
  • 15
  • Any specific reason you are switching ? they both are similar and action the same way (pretty much). i wonder why you choose to swtich. – Always Helping Feb 11 '22 at 02:54
  • 2
    with `await` you should use `try`/`catch`. – tromgy Feb 11 '22 at 02:55
  • @AlwaysHelping hey, I don't have a specific reason for switching, just an exercise and out of curiosity. – HNG Feb 11 '22 at 02:58
  • 1
    i see. fair enough. As suggested above you can do this and handle errors too using `try/catch` block explained here: https://stackoverflow.com/questions/40884153/try-catch-blocks-with-async-await – Always Helping Feb 11 '22 at 02:59
  • 1
    Alright, let me try to post the answer below. Thanks for the suggestions guys – HNG Feb 11 '22 at 03:00
  • Everything you can write with async/await, you can write with raw promises. Here `error =>` won't handle errors from `response =>` – Estus Flask Feb 11 '22 at 07:28

2 Answers2

1

Thanks for the suggestion on try and catch. Please correct me if I am wrong with this:

async created() {
    const response = await this.$http.get("wp/v2/posts")
    
    try {
      for (let post in response.data) {
        this.posts.push(response.data[post]);
      }
      this.$store.dispatch({
        type: "updatePost",
        value: this.posts
      });
    }
    catch (error) {
      alert(error);
    }
}
HNG
  • 251
  • 3
  • 15
  • You forgot to chain dispatch promise. This doesn't affect much here because Vuex is supposed to suppress errors iirc, but any way, this is a correct thing to do – Estus Flask Feb 11 '22 at 07:26
  • Hi @EstusFlask, may I ask how do u dispatch promise in this case? – HNG Feb 11 '22 at 15:54
0

I think you can use this instead of using try:

async created() {
  await this.$http.get("wp/v2/posts").then(response => {
    for (let post in response.data) {
      this.posts.push(response.data[post]);
    }
    this.$store.dispatch({
      type: "updatePost",
      value: this.posts
    });
  }).catch(function () {
    alert(error);
  })
}
MR Mark II
  • 433
  • 3
  • 13
  • I thought we should only either use async and await OR .then? and not both at the same time – HNG Feb 11 '22 at 07:04
  • I use an await-catch structure like this in my project and it works. Test the answers in your project to be sure! – MR Mark II Feb 11 '22 at 07:07
  • async/await is supposed to replace raw promises (then/catch) entirely, particularly because they result in more complex code that is prone to mistakes. Here you still forgot to chain dispatch promise. – Estus Flask Feb 11 '22 at 07:23