สำหรับนักพัฒนาเว็บไซค์พอพัฒนามาระยะหนึ่งจะเกิดปัญหาว่าเราจะมีวิธีการดึงหรือการส่งข้อมูลได้อย่างไรโดยวิธีการดึงจะมีข้อมูลมากมายแต่สำหรับ Axios จะเป็นเครื่องมือของฝั่ง client ที่จะทำการ call api ไปยัง server และวันนี้จะมาทำความเข้าใจกันว่ามันต้องเริ่มกันยังไง

Axios คืออะไร?
Axios คือ HTTP library ตัวหนึ่งในภาษา JavaScript ที่ใช้ในการรับส่งข้อมูลและทำการติดต่อกับ Server ได้อย่างง่ายดาย

Features หลัก

• รองรับ Promise API
• การแปลงข้อมูล reauest และ response
• รองรับการ cancel request
• ทำ Intercept headers ได้
• ป้องกัน XSRF
• รองรับ TypeScript

Browser Support

Latest ✔	Latest ✔	Latest ✔	Latest ✔	Latest ✔	11 ✔

การติดตั้ง

ถ้าใช้ npm:

$ npm install axios

ถ้าใช้ bower:

$ bower install axios

ถ้าใช้ yarn:

$ yarn add axios

ถ้าใช้ jsDelivr CDN:

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

ถ้าใช้ unpkg CDN:

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

ตัวอย่าง

ถ้าเราใช้งานแบบ CommonJS เวลา import ด้วย require() 

const axios = require('axios').default;

แบบ ES Module

import axios from 'axios';

ตัวอย่าง GET request

const url = 'https://your-api';

axios.get(url).then((response) => {
  // ถ้าทำงานสำเร็จ
  console.log(response);
})
.catch((error) => {
   // ถ้าทำงานไม่สำเร็จ เกิดข้อผิดพลาด
});

ใช้งาน GET request แบบส่ง Params

const url = 'https://your-api/test?getdata=123&getdatatest=1234';

axios.get(url).then((response) => {
  // ถ้าทำงานสำเร็จ
  console.log(response);
})
.catch((error) => {
   // ถ้าทำงานไม่สำเร็จ เกิดข้อผิดพลาด
});

ซึ่งจะเขัยนออกมาเป็นแบบ option ได้ดังนี้

const url = 'https://your-api/test';

const options = {
  params: {
    getdata: 123,
    getdatatest :123
  }
};

axios.get(url, options).then((response) => {
  // handle success// ถ้าทำงานสำเร็จ
  console.log(response);
})
.catch((error) => {
   // ถ้าทำงานไม่สำเร็จ เกิดข้อผิดพลาด
});

สามารถเขียนแบบ async/await

async function getUser() {
  try {
    const response = await axios.get('https://your-api');
    console.log(response);
  } catch (error) {
    console.error(error);
  }
}

POST Request แบบ JSON

การส่ง POST Request แบบ JSON ใช้ การส่ง payload 

const payload = { title: 'Hello world by Axios ' };
axios.post('https://your-api/posts', payload);

โดยปกติ แล้ว default ตัว payload จะเป็น JSON และก็ Content-Type จะเป็น application/json

POST Request แบบ application/x-www-form-urlencoded

ส่ง POST Request แบบ application/x-www-form-urlencoded ได้นอกเหนือจาก JSON โดยการใช้ URLSearchParams (ไม่ได้รองรับทุก Browser)

const params = new URLSearchParams({ title: 'Hello world by Axios ' });
axios.post('https://your-api/posts', params);

POST Request แบบ multipart/form-data

การส่งแบบ multipart/form-data เราจะใช้ FormData ใน Browser เราสามารถเรียกใช้ FormData API ได้ ส่วนถ้าเป็น Node.js ต้องใช้ Library เพิ่มเติม เช่น form-data

const formData = new FormData();
formData.append('title', 'Hello world by Axios');

axios.post('https://your-api/posts', formData);

ถ้าเป็น Node.js จะใช้ form-data library

const FormData = require('form-data');
const form = new FormData();

axios.post('https://your-api/posts', form)

Method ของ Axios

axios ยังรองรับ HTTP Method สามารถเขียนได้ดังนี้

axios.get(url);

axios.post(url, payload);

axios.put(url, payload);

axios.patch(url, payload);

axios.delete(url);

การ Custom Instance

สามารถ custom instance กำหนดค่า config เองได้ เช่น กำหนด headers 

// Set config defaults when creating the instance
const instance = axios.create({
  baseURL: 'https://api.example.com',
  headers: {
    'My-Custom-Header': 'custom-header'
  }
 
});

instance.defaults.headers.common['Authorization'] = 'token';

การจัดการ Error

ตัว Error ที่ server ตอบกลับมาจะเข้า catch() กรณีที่ไม่ใช่ HTTP 2xx โดยเราจะได้ response อยู่ในรูปแบบ error.response ตัวอย่างเช่น

axios.get('/something-api')
.catch(function (error) {
  if (error.response) {
    // คำขอถูกสร้างขึ้นและเซิร์ฟเวอร์ตอบกลับด้วยรหัสสถานะ
    //  ทีอยู่จากช่วง 2xx
    console.log(error.response.data);
    console.log(error.response.status);
    console.log(error.response.headers);
  } else if (error.request) {
    // มีการร้องขอแต่ไม่ได้รับการตอบสนอง
    // `error.request` เป็นอินสแตนซ์ของ XMLHttpRequest ในเบราว์เซอร์และอินสแตนซ์ 
    // http.ClientRequest ใน node.js
    console.log(error.request);
  } else {
    // มีบางอย่างเกิดขึ้นในการตั้งค่าคำขอที่ทำให้เกิดข้อผิดพลาด
    console.log('Error', error.message);
  }
  console.log(error.config);
});

หรือเราสามารถ ใช้ toJSON เพื่อจัดการข้อมูลของ HTTP error ได้

axios.get('/someting-api').catch(function (error) {
  console.log(error.toJSON());
});

การ Cancel Request

เป็น feature ที่ค่อนข้างมีประโยชน์ กรณีที่เราทำการเรียก request ไปแล้ว และอยากยกเลิกมัน ก็สามารถทำได้ผ่านตัว AbortController

const controllercancel = new AbortController();

axios.get('/path/to/api', {
   signal: controllercancel.signal
}).then(function(response) {
   //...
});
// ยกเลิกการร้องขอ
controllercancel.abort();

ทั้งหมดนี้ก็เป็นการใช้งาน axios แบบคร่าวๆ ซึ่งการใช้งานจริงๆ หรือการประยุกต์ใช้งานในรายละเอียดอื่นๆ สามารถอ่านเพิ่มเติมได้ที่ Docs ของ axios