เรามาดูวิธีการ call api ใน Vue.js กันครับ

จากตัวอย่างเราจะใช้ axios library ในการ call api ตามตัวอย่าง

import axios from 'axios'

export default {
  data() {
    return {
      message: '',
      loading: true
    }
  },
  created() {
    axios.get('http://example.com/data')
      .then(response => {
        this.message = response.data
        this.loading = false
      })
  }
}

อีกตัวอย่างหนึ่ง เป็นการแยก module สำหรับการเรียก api ออกมา

import axios from 'axios'

const API_URL = 'http://example.com'

export default {
    async getData() {
        try {
            const response = await axios.get(`${API_URL}/data`)
            return response.data
        } catch (error) {
            throw new Error(`API ${error}`)
        }
    },
    async postData(payload) {
        try {
            const response = await axios.post(`${API_URL}/data`, payload)
            return response.data
        } catch (error) {
            throw new Error(`API ${error}`)
        }
    }
}

จากนั้นเราก็ import มาใช้ได้เลย

import api from './api'

export default {
  data() {
    return {
      message: '',
      loading: true
    }
  },
  async created() {
    try {
        this.message = await api.getData()
        this.loading = false
    } catch (error) {
        console.log(error)
    }
  }
}