Axios (อ่านว่า แอก-ซี-โอส) คือ Open Source JavaScript Libary สำหรับ HTTP Request เรียกง่าย ๆ ก็คือ ตัวที่ใช้สำหรับเชื่อมต่อกับ API Service เพื่อการรับส่งข้อมูลแบบ RESTful API โดยที่เจ้า axios จะทำหน้าที่เป็นตัวกลางในการจัดการทั้ง method, data, headers, security และอื่น ๆ ที่เกี่ยวข้องกับการรับส่งข้อมูล ความเจ๋งของ axios ก็คือรองรับ Promises async/await ได้ และยังรองรับ TypeScript อีกด้วย

มี Feature เด่นมีอะไรบ้าง

• สร้าง XMLHttpRequests ใน Browser
• สร้าง HTTP Request ใน Node.js
• รองรับ Promise API
• รองรับ Intercept, Transform ได้ทั้ง request, response
• สามารถยกเลิกการ Request ได้ (Cancellation)
• แปลงข้อมูลเป็น JSON อัตโนมัติ
• รองรับ TypeScript
  

การติดตั้ง

     yarn add axios   //for Expo

การเรียกใช้ Http Request แบบต่าง ๆ

api.js

import axios from "axios"

// GET Method 
axios
  .get("http://localhost:7000/users")
  .then(response => {
    console.log("response: ", response)
    // do something about response.data
  })
  .catch(err => {
    console.error(err)
  })

// POST Method
axios
  .post("http://localhost:7000/users", { firstName: "example", lastname: "example", age: 10 })
  .then(response => {
    console.log("response: ", response)
    // do something about response.data
  })
  .catch(err => {
    console.error(err)
  })

// PUT Method
axios
  .put("http://localhost:7000/users/:id", { firstName: "example", lastname: "example", age: 10 })
  .then(response => {
    console.log("response: ", response)
    // do something about response.data
  })
  .catch(err => {
    console.error(err)
  })

// PATCH Method
axios
  .put("http://localhost:7000/users/:id", { age: 20 })
  .then(response => {
    console.log("response: ", response)
    // do something about response.data
  })
  .catch(err => {
    console.error(err)
  })

// DELETE Method
axios
  .delete("http://localhost:7000/users/:id", { age: 20 })
  .then(response => {
    console.log("response: ", response)
    // do something about response.data
  })
  .catch(err => {
    console.error(err)
  })