Axios: มันคืออะไร, คำขอ HTTP และพื้นฐานการทำงานกับ API

Axios คืออะไร?

Axios เป็นไลบรารี JavaScript ที่ออกแบบมาสำหรับการทำคำขอ HTTP จากเบราว์เซอร์และสภาพแวดล้อม Node.js มันถูกสร้างบน XMLHttpRequest ในเบราว์เซอร์และโมดูล http ใน Node.js โดยให้ API ที่เป็นหนึ่งเดียวสำหรับทั้งสองแพลตฟอร์ม

ข้อดีหลักของ Axios เหนือ fetch ดั้งเดิมคือการจัดการ JSON อัตโนมัติ, การสนับสนุนตัวดักจับ และการจัดการข้อผิดพลาดที่สะดวกกว่า แตกต่างจาก fetch, Axios ไม่ต้องการการเรียก .then สองครั้งเพื่อรับเนื้อหาคำตอบ JSON และโยนข้อยกเว้นโดยอัตโนมัติเมื่อเกิดข้อผิดพลาด HTTP (4xx, 5xx)

ไลบรารีรองรับวิธีการ HTTP หลักทั้งหมด: GET, POST, PUT, DELETE, PATCH และ HEAD สามารถใช้ได้ทั้งในโปรเจกต์ง่าย ๆ และในแอปพลิเคชันองค์กรขนาดใหญ่ที่มีคำขอหลายแสนครั้งต่อวัน

คุณลักษณะสำคัญของ Axios

• Promise API — การดำเนินการทั้งหมดส่งคืน Promise, ทำให้โค้ดแบบอะซิงโครนัสง่ายขึ้น
• การสนับสนุน TypeScript — การกำหนดประเภทอย่างสมบูรณ์สำหรับทุกวิธีการและการตั้งค่า
• ตัวดักจับ — มิดเดิลแวร์สำหรับประมวลผลคำขอและคำตอบ
• การแปลง — การแปลงข้อมูลอัตโนมัติทั้งอินพุตและเอาต์พุต

สถาปัตยกรรม Axios และหลักการทำงาน

สถาปัตยกรรม Axios อิงอยู่บนแนวคิดของอะแดปเตอร์ ไลบรารีจะแยกชั้นการส่งข้อมูล: ใช้ XMLHttpRequest ในเบราว์เซอร์และโมดูล http หรือ https ใน Node.js ซึ่งให้อินเทอร์เฟสเดียวโดยไม่ขึ้นอยู่กับสภาพแวดล้อมรันไทม์

แต่ละคำขอจะผ่านห่วงโซ่ของตัวดักจับที่สามารถแก้ไขการตั้งค่าคำขอหรือคำตอบ หลังจากตัวดักจับ คำขอจะถูกส่งต่อไปยังอะแดปเตอร์ซึ่งทำการเรียก HTTP จริง จากนั้นคำตอบจะผ่านตัวดักจับคำตอบก่อนที่จะถึงโค้ดของแอปพลิเคชัน

วงจรชีวิตของคำขอ Axios

1. การสร้างการตั้งค่า — วิธีการ, URL, ส่วนหัว, เนื้อหาคำขอ
2. ตัวดักจับคำขอ — การแก้ไขการตั้งค่า, การเพิ่มโทเคน
3. การเรียก HTTP — การดำเนินการผ่านอะแดปเตอร์ของเบราว์เซอร์หรือ Node.js
4. ตัวดักจับคำตอบ — การแปลงคำตอบ, การจัดการข้อผิดพลาด
5. การส่งคืนผลลัพธ์ — Promise ถูกแก้ไขด้วยข้อมูลหรือถูกปฏิเสธ

คุณสมบัติหลักของ Axios

Axios รวมคุณสมบัติในตัวมากมายที่ทำให้มันเป็นตัวเลือกที่สะดวกสำหรับการทำงานกับ HTTP ในแอปพลิเคชันมือถือและเว็บ มาดูคุณสมบัติหลักกัน

การแปลงข้อมูลอัตโนมัติ

เมื่อส่งคำขอ, Axios จะแปลงวัตถุ JavaScript เป็นสตริง JSON โดยอัตโนมัติโดยใช้ JSON.stringify เมื่อรับคำตอบ, ไลบรารีจะแยกวิเคราะห์ JSON กลับเป็นวัตถุ ซึ่งช่วยประหยัดนักพัฒนาจากการทำให้เป็นอนุกรมและดีซีเรียลไลซ์ข้อมูลด้วยตนเอง

การป้องกัน CSRF

ในสภาพแวดล้อมเบราว์เซอร์, Axios จะเพิ่มส่วนหัว XSRF-TOKEN จากคุกกี้โดยอัตโนมัติ ปกป้องแอปพลิเคชันจากการปลอมแปลงคำขอข้ามไซต์ ในการทำเช่นนี้ เพียงแค่กำหนดค่าเซิร์ฟเวอร์ให้ส่งโทเคนในคุกกี้ชื่อ XSRF-TOKEN

หมดเวลาและการยกเลิกคำขอ

ไลบรารีรองรับการตั้งเวลาหมดเขตผ่านพารามิเตอร์ timeout และการยกเลิกคำขอผ่าน AbortController ซึ่งสำคัญโดยเฉพาะในแอปพลิเคชันมือถือที่มีการเชื่อมต่อไม่เสถียร ซึ่งคำขอที่ค้างอยู่จะกินแบตเตอรี่และข้อมูล

การติดตั้งและการตั้งค่า Axios

การติดตั้ง Axios ทำได้ผ่านตัวจัดการแพ็กเกจใดก็ได้ ไลบรารีพร้อมใช้งานในรีจิสทรี npm และสามารถใช้ได้ทั้งในโปรเจกต์ Node.js และเบราว์เซอร์ สำหรับ TypeScript, ประเภทถูกรวมอยู่ในแพ็กเกจหลัก — ไม่จำเป็นต้องมีการพึ่งพาเพิ่มเติม

หลังการติดตั้ง, คุณสามารถสร้างอินสแตนซ์ด้วยการตั้งค่าพื้นฐาน: URL ฐาน, หมดเวลาเริ่มต้น, ส่วนหัวทั่วไป ซึ่งช่วยหลีกเลี่ยงการทำซ้ำพารามิเตอร์เดียวกันในทุกคำขอและจัดการการตั้งค่า HTTP ไคลเอนต์จากส่วนกลาง

# ติดตั้งผ่าน npm
npm install axios

# ติดตั้งผ่าน yarn
yarn add axios

# ติดตั้งผ่าน pnpm
pnpm add axios

การสร้างอินสแตนซ์ด้วยการตั้งค่า

ขอแนะนำให้สร้างอินสแตนซ์ Axios แยกต่างหากสำหรับแต่ละบริการ API ซึ่งช่วยให้สามารถกำหนด URL ฐาน, ส่วนหัวมาตรฐาน และหมดเวลาที่จะนำไปใช้กับคำขอทั้งหมดของอินสแตนซ์นี้โดยไม่ต้องทำซ้ำในการเรียกแต่ละครั้ง

import axios from 'axios';

const api = axios.create({
  baseURL: 'https://api.example.com/v1',
  timeout: 10000,
  headers: {
    'Content-Type': 'application/json',
    'Accept': 'application/json'
  }
});

ตัวอย่างโค้ดกับ Axios

ตัวอย่างคำขอ แสดงรูปแบบหลักของการใช้ Axios ตัวอย่างทั้งหมดใช้ไวยากรณ์ async/await ซึ่งทำให้โค้ดแบบอะซิงโครนัสอ่านง่ายขึ้นเมื่อเทียบกับลูกโซ่ .then()

คำขอ GET พร้อมพารามิเตอร์

เพื่อดึงข้อมูลจากเซิร์ฟเวอร์, ใช้วิธีการ axios.get พารามิเตอร์คำขอจะถูกส่งผ่านวัตถุ params ซึ่งจะถูกแปลงเป็นสตริงคำค้นหาโดยอัตโนมัติ คำตอบประกอบด้วยข้อมูลในฟิลด์ data, สถานะใน status และส่วนหัวใน headers

interface User {
  id: number;
  name: string;
  email: string;
}

async function getUsers() {
  try {
    const response = await api.get<User[]>('/users', {
      params: { page: 1, limit: 10 }
    });
    return response.data;
  } catch (error) {
    console.error('ข้อผิดพลาดในการโหลดผู้ใช้', error);
    throw error;
  }
}

คำขอ POST พร้อมเนื้อหา

เพื่อส่งข้อมูลไปยังเซิร์ฟเวอร์, ใช้ axios.post อาร์กิวเมนต์ที่สองคือวัตถุที่มีข้อมูล ซึ่ง Axios จะทำให้เป็นอนุกรมเป็น JSON โดยอัตโนมัติ Content-Type ถูกตั้งเป็น application/json โดยค่าเริ่มต้น

interface CreateUserDto {
  name: string;
  email: string;
  role: string;
}

async function createUser(data: CreateUserDto) {
  const response = await api.post<User>('/users', data);
  return response.data;
}

ตัวดักจับ

ตัวดักจับ คือฟังก์ชันมิดเดิลแวร์ที่ทำงานสำหรับแต่ละคำขอหรือคำตอบ ซึ่งช่วยให้สามารถเพิ่มโทเคนการตรวจสอบสิทธิ์, บันทึกคำขอ และจัดการข้อผิดพลาดจากส่วนกลาง ตัวดักจับคำขอจะเพิ่มส่วนหัว Authorization ด้วยโทเคนที่ดึงมาจากที่เก็บข้อมูล

// ตัวดักจับคำขอ — เพิ่มโทเคนการตรวจสอบสิทธิ์
api.interceptors.request.use(
  (config) => {
    const token = getToken();
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  (error) => Promise.reject(error)
);

// ตัวดักจับคำตอบ — จัดการข้อผิดพลาด 401
api.interceptors.response.use(
  (response) => response,
  (error) => {
    if (error.response?.status === 401) {
      redirectToLogin();
    }
    return Promise.reject(error);
  }
);

การจัดการข้อผิดพลาดใน Axios

การจัดการข้อผิดพลาด ใน Axios สร้างบนกลไกข้อยกเว้น แตกต่างจาก fetch, Axios จะจับข้อผิดพลาด HTTP (4xx, 5xx) โดยอัตโนมัติและส่งต่อไปยังบล็อก catch วัตถุข้อผิดพลาดประกอบด้วยข้อมูลเกี่ยวกับคำตอบของเซิร์ฟเวอร์, คำขอ และบริบทการดำเนินการ

สิ่งสำคัญคือต้องแยกแยะข้อผิดพลาดสามประเภท: ข้อผิดพลาดคำตอบของเซิร์ฟเวอร์ (response), ข้อผิดพลาดคำขอ (request) และข้อผิดพลาดการตั้งค่า (config) แบบแรกเกิดขึ้นเมื่อการเรียก HTTP ถูกดำเนินการสำเร็จแต่ส่งคืนรหัสข้อผิดพลาด, แบบที่สองเมื่อไม่มีคำตอบจากเซิร์ฟเวอร์, และแบบที่สามเมื่อการตั้งค่าคำขอไม่ถูกต้อง

import axios, { AxiosError } from 'axios';

async function safeRequest() {
  try {
    return await api.get('/data');
  } catch (error) {
    if (error instanceof AxiosError) {
      if (error.response) {
        console.warn('ข้อผิดพลาดคำตอบ', error.response.status);
      } else if (error.request) {
        console.warn('ไม่มีคำตอบจากเซิร์ฟเวอร์');
      } else {
        console.warn('ข้อผิดพลาดการตั้งค่า');
      }
    }
  }
}

การเปรียบเทียบ Axios กับ Fetch API

การเปรียบเทียบ Axios กับ Fetch API ดั้งเดิมช่วยให้เข้าใจว่าแต่ละเทคโนโลยีเหมาะสมเมื่อใด Fetch เป็น API ที่ติดตั้งในเบราว์เซอร์ซึ่งไม่ต้องการการติดตั้ง Axios เป็นไลบรารีของบุคคลที่สามที่มีคุณสมบัติเพิ่มเติม สำหรับคำข้อง่าย ๆ, fetch ก็เพียงพอ; สำหรับแอปพลิเคชันที่ซับซ้อนที่มีตัวดักจับและการจัดการข้อผิดพลาดจากส่วนกลาง, Axios สะดวกกว่า

Fetch ไม่ถือว่าข้อผิดพลาด HTTP (4xx, 5xx) เป็นข้อยกเว้น — คุณต้องตรวจสอบ response.ok Fetch ต้องการการเรียก .then() สองครั้งเพื่อรับ JSON: response.json() จากนั้นส่งคืน Promise พร้อมข้อมูล Axios ทำสิ่งนี้โดยอัตโนมัติ Fetch ไม่รองรับความคืบหน้าการอัปโหลดไฟล์โดยไม่มี polyfill เพิ่มเติม Axios มี onUploadProgress และ onDownloadProgress ในตัว

ใน Node.js, Fetch พร้อมใช้งานตั้งแต่เวอร์ชัน 18 เป็นคุณสมบัติทดลอง, ในขณะที่ Axios ทำงานได้อย่างเสถียรตั้งแต่ Node.js 10 สำหรับโปรเจกต์ที่รองรับ Node.js เวอร์ชันเก่า, ตัวเลือกชัดเจนว่าคือ Axios สำหรับโปรเจกต์เบราว์เซอร์สมัยใหม่ที่ไม่ต้องการการจัดการคำขอที่ซับซ้อน, fetch อาจเพียงพอ