มาดูตัวอย่างการใช้ axios ใน Vue.js กันครับ

Axios เป็น library ยอดนิยมสำหรับ HTTP requests ใน javascript

ในการใช้อันกับแรกเราก็ไปติดตั้งกันก่อน

npm install axios

จากนั้นเราก็ import ไปใน project เราสามารถใช้ axios.get() เพื่อ fetch data ได้ ตามตัวอย่าง

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
      })
  }
}

เราสามารถใช้ axios.post(), axios.put() และ axios.delete() สำหรับ request ชนิดต่าง ๆ คือ POST, PUT และ DELETE HTTP

เราสามารถสร้าง instance แล้วไว้ในส่วนกลาง แล้วสามารถเรียกใช้ได้ตามตัวอย่าง

import axios from 'axios'

const instance = axios.create({
  baseURL: 'http://example.com'
})

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

ดูรายละเอียดอื่น ๆ ได้ที่ https://github.com/axios/axios