Axios คืออะไร

Axios เป็นไคลเอนต์ HTTP ยอดนิยมที่ใช้ Promise สำหรับทั้งเบราว์เซอร์และ Node.js ออกแบบมาเพื่อทำให้การส่งคำขอ HTTP ง่ายขึ้น คุณค่าหลักอยู่ที่การใช้งานง่ายและการขยายได้ ซึ่งนำเสนอแนวทางที่คล่องตัวในการจัดการการสื่อสาร HTTP แบบอะซิงโครนัส ซึ่งแตกต่างจาก API fetch ดั้งเดิม Axios มีคุณสมบัติต่างๆ เช่น การแปลง JSON อัตโนมัติ การสกัดกั้นคำขอและการตอบสนอง และการรองรับเบราว์เซอร์รุ่นเก่าในตัว ใช้ API Promise ของ JavaScript สำหรับการดำเนินการแบบอะซิงโครนัส ทำให้โค้ดสะอาดและอ่านง่ายขึ้น นักพัฒนาได้รับประโยชน์จาก API ที่ใช้งานง่าย การจัดการข้อผิดพลาดที่แข็งแกร่ง และการสนับสนุนจากชุมชนในวงกว้าง ทำให้เป็นตัวเลือกที่เหมาะสมสำหรับการสร้างเว็บแอปพลิเคชันและ API

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

API แบบ Promise

Axios ใช้ API `Promise` ของ JavaScript ทำให้โค้ดอะซิงโครนัสสะอาดและอ่านง่ายขึ้นเมื่อเทียบกับแนวทางที่ใช้ callback ซึ่งช่วยให้สามารถเชื่อมโยงคำขอและการจัดการข้อผิดพลาดได้ง่ายขึ้นโดยใช้ `.then()` และ `.catch()` ซึ่งช่วยปรับปรุงการบำรุงรักษาโค้ดและลดปัญหา 'callback hell' นอกจากนี้ยังช่วยให้สามารถรวมเข้ากับไวยากรณ์ async/await ได้ง่ายขึ้น

ตัวสกัดกั้นคำขอและการตอบสนอง

ตัวสกัดกั้นช่วยให้คุณสกัดกั้นและแก้ไขคำขอก่อนที่จะถูกส่งและตอบสนองก่อนที่จะถูกจัดการ ซึ่งมีประโยชน์สำหรับงานต่างๆ เช่น การเพิ่มส่วนหัวการตรวจสอบสิทธิ์ การบันทึกคำขอ หรือการแปลงข้อมูล ตัวอย่างเช่น คุณสามารถเพิ่มส่วนหัวการอนุญาตสากลได้โดยใช้ `axios.interceptors.request.use(config => { config.headers.Authorization = 'Bearer YOUR_TOKEN'; return config; });`

การแปลง JSON อัตโนมัติ

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

รองรับเบราว์เซอร์และ Node.js

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

การยกเลิกคำขอ

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

การป้องกัน XSRF ในตัว

Axios มีการรองรับในตัวสำหรับการป้องกัน Cross-Site Request Forgery (XSRF) โดยจะตั้งค่าส่วนหัว `X-XSRF-TOKEN` โดยอัตโนมัติเมื่อทำการร้องขอไปยังต้นทางเดียวกัน ซึ่งช่วยลดการโจมตี XSRF คุณสมบัตินี้ช่วยลดความซับซ้อนในการใช้งานเว็บแอปพลิเคชันที่ปลอดภัยโดยการให้การป้องกันในระดับเริ่มต้นจากช่องโหว่ด้านความปลอดภัยทั่วไป

วิธีใช้ Axios

รวม Axios ในโปรเจกต์ของคุณ: ติดตั้งผ่าน npm หรือ yarn: npm install axios หรือ yarn add axios.,2. นำเข้า Axios: ในไฟล์ JavaScript ของคุณ ให้นำเข้า Axios: import axios from 'axios';,3. สร้างคำขอ GET: ใช้ axios.get('your_api_endpoint') เพื่อดึงข้อมูล จัดการการตอบสนองด้วย .then() และ .catch().,4. สร้างคำขอ POST: ใช้ axios.post('your_api_endpoint', { data: yourData }) เพื่อส่งข้อมูล อาร์กิวเมนต์ที่สองคือเพย์โหลดข้อมูล,5. จัดการการตอบสนอง: เข้าถึงข้อมูลผ่าน response.data, รหัสสถานะผ่าน response.status และส่วนหัวผ่าน response.headers.,6. ใช้การจัดการข้อผิดพลาด: ใช้ .catch() เพื่อจัดการข้อผิดพลาด เข้าถึงรายละเอียดข้อผิดพลาดผ่าน error.response (สำหรับข้อผิดพลาดของเซิร์ฟเวอร์) หรือ error.message (สำหรับข้อผิดพลาดของเครือข่าย)

กรณีการใช้งานของ Axios

ดึงข้อมูลในเว็บแอป

นักพัฒนาเว็บใช้ Axios เพื่อดึงข้อมูลจาก API ในเว็บแอปพลิเคชัน ตัวอย่างเช่น นักพัฒนาที่สร้างแอปสภาพอากาศจะใช้ Axios เพื่อดึงข้อมูลสภาพอากาศจาก API สภาพอากาศ แยกวิเคราะห์การตอบสนอง JSON และแสดงข้อมูลบนส่วนต่อประสานผู้ใช้ นี่เป็นฟังก์ชันหลักของเว็บแอปพลิเคชันสมัยใหม่จำนวนมาก

สร้าง API Calls ใน Node.js

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

จัดการการส่งแบบฟอร์ม

นักพัฒนาฟรอนต์เอนด์ใช้ Axios เพื่อส่งข้อมูลแบบฟอร์มไปยัง API ตัวอย่างเช่น นักพัฒนาที่สร้างแบบฟอร์มติดต่อบนเว็บไซต์จะใช้ Axios เพื่อส่งข้อมูลแบบฟอร์มไปยังปลายทางฝั่งเซิร์ฟเวอร์ Axios จัดการการซีเรียลไลซ์ข้อมูลแบบฟอร์มและการส่งคำขอ HTTP

การใช้งานการตรวจสอบสิทธิ์

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

ใครที่ได้ประโยชน์จาก Axios

นักพัฒนาฟรอนต์เอนด์

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

นักพัฒนาแบ็กเอนด์

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

นักพัฒนา Full-Stack

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

ผู้รวม API

นักพัฒนาที่ต้องการรวมเข้ากับ API ต่างๆ พบว่า Axios นั้นมีค่ามาก คุณสมบัติต่างๆ เช่น ตัวสกัดกั้นคำขอ/การตอบสนอง การแปลง JSON อัตโนมัติ และ API ที่ใช้ Promise ทำให้ง่ายต่อการจัดการรูปแบบ API วิธีการตรวจสอบสิทธิ์ และการจัดการข้อผิดพลาดที่แตกต่างกัน ซึ่งช่วยลดความซับซ้อนของกระบวนการรวม

เครื่องมืออื่น ๆ ที่คล้ายกับ Axios