คู่มือฉบับสมบูรณ์: Axios JS คืออะไร ทำงานอย่างไร และทำไมคุณจึงต้องใช้มัน?

อินฟอร์เมเทค ดิจิตอล » พัฒนาการ » คู่มือฉบับสมบูรณ์: Axios JS คืออะไร ทำงานอย่างไร และทำไมคุณจึงต้องใช้มัน?

ระบบนิเวศของ JavaScript เต็มไปด้วยเครื่องมือมากมายที่ช่วยให้การพัฒนาเว็บแอปพลิเคชันหรือเซิร์ฟเวอร์ใน Node.js ง่ายขึ้นหนึ่งในเครื่องมือที่เก่าแก่และมีประโยชน์ที่สุดคือAxiosซึ่งเป็นไลบรารีที่ได้รับความนิยมอย่างมากในการจัดการคำขอ HTTP ทั้งในเบราว์เซอร์และ Node.js และยังคงเป็นที่ชื่นชอบของนักพัฒนาหลายพันคนทั่วโลกเนื่องจากความเรียบง่ายและประสิทธิภาพของมัน

คุณเคยหยุดคิดบ้างไหมว่าคุณต้องเชื่อมต่อกับ API หรือเซิร์ฟเวอร์ภายนอก ส่งข้อมูล หรือรับข้อมูลในรูปแบบต่างๆ บ่อยแค่ไหน?สำหรับสถานการณ์เหล่านี้ มีโซลูชันมากมาย แต่มีเพียงไม่กี่อย่างที่ได้รับการยอมรับ ใช้งานได้หลากหลาย และใช้งานง่ายเท่ากับ Axios ในบทความนี้ เราจะอธิบายรายละเอียดว่า Axios คืออะไร ใช้ทำอะไร วิธีการติดตั้งและใช้งานอย่างมีประสิทธิภาพ และทำไมมันจึงยังคงเป็นตัวเลือกอันดับต้นๆ สำหรับการทำงานกับคำขอ HTTP ในโปรเจ็กต์ JavaScript สมัยใหม่

Axios คืออะไรและมีไว้ใช้ทำอะไร?

Axios เป็นไลบรารี JavaScript ที่ช่วยให้เราส่งคำขอ HTTP ได้ง่าย รวดเร็ว และมีประสิทธิภาพ ทั้งในเบราว์เซอร์และแอปพลิเคชัน Node.jsคุณสมบัติหลักคือการใช้Promisesซึ่งช่วยลดความซับซ้อนในการเขียนโค้ดแบบอะซิงโครนัสและจัดโครงสร้างการทำงานได้อย่างชัดเจน หลีกเลี่ยงความยุ่งยากของ Callback ซ้อนกัน หรือ "callback hell" ที่โด่งดัง

ไลบรารีนี้เป็นแบบ isomorphicซึ่งหมายความว่าคุณสามารถใช้โค้ดเดียวกันกับที่คุณใช้ในส่วน frontend เพื่อเรียกใช้ API โดยไม่ต้องเปลี่ยนแปลงใดๆ ในส่วน backend ด้วย Node.js ในส่วน frontend จะใช้ XMLHttpRequest และในส่วน backend จะใช้โมดูล HTTP ดั้งเดิมของ Node แต่คุณเพียงแค่ต้องเรียกใช้ API เพียงตัวเดียวเท่านั้น

Axios ใช้ทำอะไร? โดยหลักแล้วใช้สำหรับเรียกใช้เว็บเซอร์วิสและ REST APIไม่ว่าข้อมูลจะถูกแลกเปลี่ยนในรูปแบบ JSON, XML, ข้อความธรรมดา หรือรูปแบบอื่นๆ เหมาะอย่างยิ่งสำหรับการดำเนินการต่างๆ เช่น:

• ส่งคำขอ GET เพื่อดึงข้อมูลจากเซิร์ฟเวอร์หรือ API
• ส่งข้อมูลโดยใช้ POST, PUT หรือ DELETE
• ประมวลผลการตอบสนองและแปลงโดยอัตโนมัติ
• ทำงานได้อย่างง่ายดายด้วย RESTful API หรือจุดสิ้นสุดที่ส่งคืนข้อมูลในรูปแบบใดก็ได้
• จัดการข้อผิดพลาดและสถานะ HTTP ในลักษณะที่เป็นระเบียบ

กล่าวอีกนัยหนึ่งคือมีทุกอย่างที่คุณคาดหวังจากไคลเอ็นต์ HTTP สมัยใหม่...แต่มาพร้อมกับไวยากรณ์ที่สวยงาม กระชับ และง่ายต่อการผสานรวมเข้ากับโครงการใดๆ ก็ได้

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

Axios ไม่ได้แค่ใช้งานง่าย แต่ยังอัดแน่นไปด้วยฟีเจอร์ขั้นสูงมากมาย ทำให้มันเป็นเครื่องมือสำคัญสำหรับนักพัฒนาเว็บทุกคนนี่คือฟีเจอร์เด่นๆ บางส่วนของมัน:

• ตามคำสัญญา:คุณสามารถเชื่อมโยงการดำเนินการโดยใช้ then/catch หรือใช้ async/await เพื่อความชัดเจน
• การแปลงข้อมูลอัตโนมัติ:แปลงและประมวลผล JSON หรือรูปแบบการตอบกลับอื่น ๆ โดยอัตโนมัติโดยที่คุณไม่ต้องแยกวิเคราะห์ด้วยตนเอง
• การสกัดกั้นคำขอและการตอบสนอง:คุณสามารถเพิ่มตรรกะของคุณเองก่อนที่จะส่งคำขอหรือเมื่อการตอบกลับมาถึง (ตัวอย่างเช่น บันทึก การจัดการข้อผิดพลาดทั่วไป การเพิ่มส่วนหัวแบบกำหนดเอง ฯลฯ)
• API ที่เป็นมาตรฐานและจดจำง่ายมากลืมรายละเอียดภายในของ XMLHttpRequest หรือ Fetch ไปได้เลย ด้วย Axios ทุกอย่างจะตรงไปตรงมาและสอดคล้องกัน
• การยกเลิกคำร้อง:หากคุณจำเป็นต้องยกเลิกการร้องขอ HTTP ด้วยเหตุผลใดก็ตาม คุณสามารถทำได้อย่างง่ายดาย
• การป้องกัน XSRF: รองรับมาตรการเพื่อป้องกันการโจมตี CSRF ในเบราว์เซอร์
• ความเข้ากันได้ข้ามเบราว์เซอร์:ทำงานได้ดีแม้ในเบราว์เซอร์รุ่นเก่าเช่น Internet Explorer 11
• ห้องสมุดแสง:เมื่อย่อขนาดแล้วจะใช้พื้นที่เพียง 13KB และจะยิ่งน้อยลงไปอีกหากคุณให้บริการไซต์ของคุณแบบบีบอัด

การผสมผสานระหว่างความเรียบง่ายและพลังนี้คือสิ่งที่ดึงดูดใจชุมชน JavaScript มาหลายปีแล้ว

ข้อดีของ Axios เมื่อเทียบกับ Fetch และทางเลือกอื่นๆ

คุณอาจสงสัยว่า "ทำไมฉันต้องใช้ Axios ในเมื่อมี Fetch API อยู่แล้ว?" ความจริงก็คือ Fetch นั้นยอดเยี่ยมและทันสมัย ​​แต่ Axios ก็ยังคงเหนือกว่าในหลายๆ ด้านที่สำคัญ

ประการแรก Axios มีไวยากรณ์ที่ตรงไปตรงมาและกระชับกว่าในขณะที่ Fetch บังคับให้คุณทำการแปลงข้อมูลด้วยตนเอง (เช่น ใช้ .json() เพื่อดึงข้อมูล) Axios จะทำการแปลงให้คุณและแสดงข้อมูลในคุณสมบัติ data ของการตอบกลับ ช่วยให้คุณประหยัดขั้นตอนเพิ่มเติม

นอกจากนี้Axios ยังจัดการกับข้อผิดพลาด HTTP ได้ดีกว่ามากในขณะที่ Fetch จะแสดงข้อผิดพลาดเฉพาะในกรณีที่เครือข่ายล้มเหลวเท่านั้น ไม่ใช่กรณีที่เซิร์ฟเวอร์ส่งคืนข้อผิดพลาด HTTP (เช่น 404 หรือ 500) แต่ Axios สามารถตรวจจับข้อผิดพลาดเหล่านั้นและส่งต่อให้คุณได้อย่างง่ายดาย

การยกเลิกคำขอทำได้ง่ายกว่ามากใน Axios และการรองรับตัวดักจับ การหมดเวลา ส่วนหัวแบบกำหนดเอง และการป้องกันการโจมตี XSRF ทำให้มันเป็นเครื่องมือที่สมบูรณ์แบบสำหรับการใช้งานจริง แม้ในโครงการที่ต้องการประสิทธิภาพสูงก็ตาม

จะติดตั้ง Axios ได้อย่างไร?

การติดตั้ง Axios ในโปรเจ็กต์ของคุณเป็นเรื่องง่ายมาก เป็นหนึ่งในแพ็กเกจที่มีการดาวน์โหลดมากที่สุดจาก npm คุณจึงสามารถติดตั้งได้หลายวิธี:

• กับ NPM:
  npm install axios
• กับ เส้นด้าย:
  yarn add axios
• ตลอด CDN เพื่อใช้โดยตรงในเบราว์เซอร์:
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> o <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

เมื่อติดตั้งแล้ว คุณสามารถนำเข้าไปยังโครงการของคุณได้ด้วยบรรทัดเดียว:
import axios from 'axios'; ในโครงการสมัยใหม่ (ESM) หรือ
const axios = require('axios'); ใน Node.js แบบคลาสสิก

เริ่มต้นใช้งาน: การใช้งานเบราว์เซอร์ขั้นพื้นฐานและ Node.js

วิธีที่พบบ่อยที่สุดในการใช้ Axios คือการส่งคำขอ GET ไปยังทรัพยากรหรือ API ใดๆ:

axios.get('https://jsonplaceholder.typicode.com/posts/1')
  .then(function(response) {
    console.log(response.data); // Aquí están los datos
  })
  .catch(function(error) {
    console.error('Error al obtener datos:', error);
  });

แต่ถ้าคุณชอบไวยากรณ์แบบสมัยใหม่คุณสามารถเขียนให้เรียบร้อยยิ่งขึ้นได้ ด้วย async/await :

async function obtenerDatos() {
  try {
    const respuesta = await axios.get('https://jsonplaceholder.typicode.com/posts/1');
    console.log(respuesta.data);
  } catch (error) {
    console.error('Error:', error);
  }
}
obtenerDatos();

Axios ช่วยให้การจัดการการตอบสนองและข้อผิดพลาดเป็นเรื่องง่าย ช่วยให้คุณตรวจจับได้ว่าคำขอนั้นเกิดจากข้อผิดพลาดของเครือข่าย เซิร์ฟเวอร์ หรือการกำหนดค่า

ตัวอย่างเชิงปฏิบัติ: คำขอ GET, POST และการจัดการ Axios ขั้นสูง

จุดแข็งอย่างหนึ่งของ Axios คือความยืดหยุ่นในการปรับให้เข้ากับเวิร์กโฟลว์ใดๆ เมื่อใช้ API หรือบริการ HTTP นี่คือตัวอย่างทั่วไปบางส่วน:

สร้างคำขอ GET

axios.get('https://jsonplaceholder.typicode.com/posts/1')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Error al obtener datos:', error);
  });

ตัวอย่างนี้ดึงทรัพยากรจากจุดสิ้นสุดและแสดงบนคอนโซล

ส่งข้อมูลผ่าน POST

axios.post('https://jsonplaceholder.typicode.com/posts', {
  userId: 1,
  title: 'Título del post',
  body: 'Cuerpo del post'
})
.then(response => {
  console.log('Post creado con ID:', response.data.id);
})
.catch(error => {
  console.error('Error al crear el post:', error);
});

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

ปรับแต่งคำขอ (ส่วนหัว, พารามิเตอร์, เวลาหมด…)

axios.get('https://api.ejemplo.com/datos', {
  params: {
    page: 1,
    limit: 10
  },
  headers: {
    'Authorization': 'Bearer TOKEN_SECRETO'
  },
  timeout: 5000 // 5 segundos máximo
})
.then(response => {
  console.log(response.data);
})
.catch(error => {
  if (error.code === 'ECONNABORTED') {
    console.log('Timeout alcanzado');
  } else {
    console.error('Otro error:', error);
  }
});

ลักษณะต่างๆ ของการร้องขอ เช่น ส่วนหัว พารามิเตอร์ หรือเวลาหมด สามารถกำหนดค่าได้อย่างง่ายดายในอ็อบเจ็กต์เดียว

การรวม Axios เข้ากับกรอบงานสมัยใหม่: React เป็นตัวอย่าง

Axios ถูกใช้งานอย่างแพร่หลายในเฟรมเวิร์กสมัยใหม่ เช่นReact , VueและAngularการผสานรวมทำได้ง่ายและสะดวกมากสำหรับการทำงานกับ RESTful API

ตัวอย่างเช่น ใน React รูปแบบทั่วไปคือการสร้างคำขอ GET เมื่อมีการติดตั้งส่วนประกอบ โดยอัปเดตสถานะด้วยข้อมูลที่ได้รับ:

import React, { useEffect, useState } from 'react';
import axios from 'axios';

function PostDetalle() {
  const [post, setPost] = useState(null);

  useEffect(() => {
    axios.get('https://jsonplaceholder.typicode.com/posts/1')
      .then(response => setPost(response.data))
      .catch(error => console.error('Error:', error));
  }, []);

  return (
    <div>
      <h1>Detalle de post</h1>
      {post ? (
        <>
          <h2>{post.title}</h2>
          <p>{post.body}</p>
        </>
      ) : (
        <p>Cargando...</p>
      )}
    </div>
  );
}

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

การจัดการข้อผิดพลาดและการตอบสนองขั้นสูงด้วย Axios

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

axios.get('https://jsonplaceholder.typicode.com/posts/1')
  .then(response => console.log('Datos:', response.data))
  .catch(error => {
    if (error.response) {
      // El servidor respondió con un error HTTP
      console.error('Error del servidor:', error.response.status);
    } else if (error.request) {
      // No se recibió respuesta
      console.error('No se recibió respuesta:', error.request);
    } else {
      // Error al crear la petición
      console.error('Error de configuración:', error.message);
    }
  });

ระดับรายละเอียดนี้ช่วยในการแก้ไขและจัดการข้อผิดพลาดอย่างมืออาชีพ

คุณสมบัติพิเศษ: ตัวดักจับ การแปลงข้อมูล และการยกเลิก

ตัวดักจับ (Interceptor) ช่วยให้คุณสามารถเรียกใช้ตรรกะก่อนที่จะส่งคำขอหรือรับการตอบกลับมีประโยชน์อย่างมากสำหรับการเพิ่มส่วนหัวการตรวจสอบสิทธิ์ การบันทึก หรือการจัดการข้อผิดพลาดจากส่วนกลาง

// Interceptor en las peticiones
axios.interceptors.request.use(config => {
  config.headers['Authorization'] = 'Bearer TU_TOKEN';
  return config;
}, error => Promise.reject(error));

นอกจากนี้ Axios ยังแปลงข้อมูลเป็น JSON โดยอัตโนมัติ และให้คุณปรับแต่งการแปลงนั้นได้ตามต้องการ

สุดท้ายนี้คุณสามารถยกเลิกคำขอได้ด้วยเมธอด CancelTokenซึ่งมีประโยชน์มากสำหรับอินเทอร์เฟซที่ผู้ใช้มีการนำทางอย่างรวดเร็ว และคุณต้องการป้องกันไม่ให้คำขอเก่าๆ ถูกประมวลผลต่อไปและส่งผลกระทบต่อประสบการณ์การใช้งาน

การเปรียบเทียบระหว่าง Axios กับ Fetch และไคลเอนต์ HTTP อื่นๆ

มีทางเลือกมากมายสำหรับการจัดการคำขอ HTTP Fetch API เป็นมาตรฐานในเบราว์เซอร์สมัยใหม่อยู่แล้ว แต่ Axios ยังคงรักษาข้อได้เปรียบไว้ในบางด้าน เช่น:

• การจัดการไวยากรณ์และข้อผิดพลาดที่ง่ายกว่าการดึงข้อมูล
• ความเข้ากันได้กับเบราว์เซอร์รุ่นเก่า
• การแปลงการตอบสนองอัตโนมัติ
• การยกเลิกและการหมดเวลาที่ใช้งานได้ง่าย
• การสกัดกั้นขั้นสูงของคำขอและการตอบสนอง
• ข้ามแพลตฟอร์ม (รองรับเบราว์เซอร์และ Node.js โดยไม่ต้องแก้ไขโค้ด)

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

คำถามที่พบบ่อยและแนวทางปฏิบัติที่ดีที่สุดของ Axios

• Axios รองรับหลายแพลตฟอร์มหรือไม่? ใช่แล้ว ใช้งานได้ทั้งในเบราว์เซอร์และใน Node.js เหมือนกัน
• จัดการข้อมูล JSON โดยอัตโนมัติหรือไม่ ใช่ แปลงและรับข้อมูลในรูปแบบ JSON
• อนุญาตให้คุณปรับแต่งส่วนหัวได้หรือไม่? แน่นอนว่าคุณสามารถกำหนดส่วนหัวที่กำหนดเองสำหรับแต่ละคำขอได้
• สามารถยกเลิกคำขอได้หรือไม่? ใช่ คุณสามารถยกเลิกคำขอได้ทุกเมื่อโดยใช้ CancelToken
• การจัดการข้อผิดพลาดมีวิธีการอย่างไร? คุณสามารถแยกแยะระหว่างข้อผิดพลาดของเซิร์ฟเวอร์ เครือข่าย หรือการกำหนดค่า และตอบสนองตามความเหมาะสม
• การใช้ async/await หรือ then/catch แบบไหนดีกว่ากัน? ขึ้นอยู่กับความชอบของคุณ แม้ว่าโดยทั่วไปแล้ว async/await จะให้โค้ดที่สะอาดกว่าสำหรับคำขอที่ซับซ้อนหรือเป็นลำดับ

ข้อได้เปรียบของ Axios ทำให้เป็นหนึ่งในเครื่องมือที่ทรงพลังและเชื่อถือได้มากที่สุดสำหรับการทำงานกับ HTTP ใน JavaScript ทั้งในส่วน front-end และ back-end ความเรียบง่าย ประสิทธิภาพ และความเข้ากันได้ ทำให้เป็นตัวเลือกที่แนะนำอย่างยิ่งสำหรับการใช้งาน API จัดการการตอบสนองที่หลากหลาย และช่วยลดความยุ่งยากในการทำงานประจำวันของคุณในฐานะนักพัฒนา