เรามาดูวิธีการใช้ async await ใน Vue.js กันครับ

async/await เป็นวิธีการ handle asynchronous code ใน javascript

ไปดูตัวอย่างกันตามด้านล่าง

<template>
  <div>
    <button @click="fetchData">Fetch Data</button>
    <p v-if="loading">Loading...</p>
    <p v-else>{{ message }}</p>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      message: '',
      loading: false
    }
  },
  methods: {
    async fetchData() {
      this.loading = true
      try {
        const response = await axios.get('http://example.com/data')
        this.message = response.data
      } catch (error) {
        console.log(error)
      } finally {
        this.loading = false
      }
    }
  }
}
</script>

เรายังสามารถใช้ async/await ใน created() lifecycle ได้ด้วย ดังตัวอย่าง

created() {
    this.fetchData()
}

เรายังสามารถใช้ Promise.all() สำหรับเรียก api หลาย ๆ request ได้ด้วย ดังตัวอย่าง

async fetchData() {
  this.loading = true
  try {
    const [response1, response2] = await Promise.all([
      axios.get('http://example.com/data1'),
      axios.get('http://example.com/data2')
    ])
    this.message = response1.data
    this.message2 = response2.data
  } catch (error) {
    console.log(error)
  } finally {
    this.loading = false
  }
}