วิธีเรียกใช้ REST API ด้วย Axios

REST APIs เป็นวิธีที่บริการเว็บใช้ในการสื่อสารซึ่งกันและกัน พวกเขาใช้คำขอ HTTP เพื่อ GET, POST, PUT และ DELETE ข้อมูล REST APIs มีความสำคัญเนื่องจากช่วยให้นักพัฒนาสามารถเข้าถึงข้อมูลจากแหล่งข้อมูลที่หลากหลาย รวมถึงแพลตฟอร์มโซเชียลมีเดีย, ไซต์อีคอมเมิร์ซ และอื่นๆ

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

ดังนั้น คุณพร้อมที่จะเรียนรู้วิธีเรียก REST API ที่ยอดเยี่ยมด้วย Axios และ Apidog หรือยัง มาเริ่มกันเลย!

ทำไม REST APIs ถึงเป็นอนาคตของบริการเว็บ

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

Axios คืออะไร

Axios  เป็นไลบรารี JavaScript ที่ช่วยให้คุณสามารถสร้าง คำขอ HTTP จากทั้งเบราว์เซอร์และ Node.js มันขึ้นอยู่กับ promise ซึ่งหมายความว่าคุณสามารถใช้ async/await หรือ promises เพื่อจัดการผลลัพธ์ของคำขอของคุณ

Axios มีข้อดีหลายประการเหนือ Fetch API ดั้งเดิมหรือฟังก์ชัน $.ajax() ของ jQuery ข้อดีบางประการของการใช้ Axios ได้แก่:

• รองรับเบราว์เซอร์รุ่นเก่า ซึ่งแตกต่างจาก Fetch ซึ่งต้องใช้ polyfill
• แปลงข้อมูล JSON โดยอัตโนมัติ ซึ่งแตกต่างจาก Fetch ซึ่งคุณต้องเรียก .json() บนการตอบสนอง
• ช่วยให้คุณสามารถตั้งค่าการหมดเวลาสำหรับคำขอของคุณ ซึ่งแตกต่างจาก Fetch ซึ่งไม่มีตัวเลือกการหมดเวลา
• ปกป้องคุณจากการโจมตี cross-site request forgery (XSRF) ซึ่งแตกต่างจาก jQuery ซึ่งไม่มีการป้องกัน XSRF ในตัว
• ช่วยให้คุณสามารถตรวจสอบความคืบหน้าของคำขอของคุณ ซึ่งแตกต่างจาก jQuery ซึ่งไม่มีตัวเลือกความคืบหน้า
• ช่วยให้คุณสามารถยกเลิกคำขอของคุณ ซึ่งแตกต่างจาก jQuery ซึ่งไม่มีตัวเลือกการยกเลิก
• มีไวยากรณ์ที่กระชับและอ่านง่ายกว่า ซึ่งแตกต่างจาก jQuery ซึ่งอาจมีรายละเอียดและซับซ้อน

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

วิธีติดตั้ง Axios

ในการใช้ Axios คุณต้องติดตั้งก่อน มีหลายวิธีในการติดตั้ง Axios ขึ้นอยู่กับสภาพแวดล้อมและความชอบของคุณ คุณสามารถติดตั้ง Axios ได้โดยใช้:

• npm: npm install axios
• Yarn: yarn add axios
• pnpm: pnpm add axios
• Bower: bower install axios
• CDN: <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

เมื่อคุณติดตั้ง Axios แล้ว คุณสามารถนำเข้าในไฟล์ JavaScript ของคุณและเริ่มใช้งานได้ ตัวอย่างเช่น หากคุณใช้ Node.js คุณสามารถนำเข้า Axios ได้ดังนี้:

const axios = require('axios');

หากคุณใช้ตัวรวมโมดูล เช่น Webpack หรือ Rollup คุณสามารถนำเข้า Axios ได้ดังนี้:

import axios from 'axios';

หากคุณใช้ CDN คุณสามารถเข้าถึง Axios จากตัวแปรส่วนกลาง axios

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

การเรียก REST API ครั้งแรกของคุณด้วย Axios

ในส่วนนี้ เราจะแสดงวิธีเรียก REST API ครั้งแรกของคุณด้วย Axios เราจะครอบคลุมวิธีการติดตั้ง Axios วิธีการสร้างคำขอ GET อย่างง่าย และวิธีการจัดการข้อผิดพลาด

ในการเริ่มต้นใช้งาน Axios คุณจะต้องติดตั้งโดยใช้ npm หรือ yarn เมื่อคุณติดตั้ง Axios แล้ว คุณสามารถสร้างคำขอ GET อย่างง่ายได้ดังนี้:

axios.get('https://api.example.com/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

โค้ดนี้สร้างคำขอ GET ไปยัง https://api.example.com/data และบันทึกข้อมูลการตอบสนองไปยังคอนโซล หากมีข้อผิดพลาด จะบันทึกข้อผิดพลาดไปยังคอนโซลแทน

การส่งข้อมูลไปยังเซิร์ฟเวอร์ด้วย Axios

ในส่วนนี้ เราจะแสดงวิธีส่งข้อมูลไปยังเซิร์ฟเวอร์ด้วย Axios เราจะครอบคลุมวิธีการสร้างคำขอ POST วิธีการส่งข้อมูลในเนื้อหาคำขอ และวิธีการตั้งค่าส่วนหัว

ในการสร้างคำขอ POST ด้วย Axios คุณสามารถใช้เมธอด axios.post() นี่คือตัวอย่าง:

axios.post('https://api.example.com/data', {
  name: 'John Doe',
  email: 'john.doe@example.com'
})
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

โค้ดนี้ส่งคำขอ POST ไปยัง https://api.example.com/data พร้อมข้อมูล { name: 'John Doe', email: 'john.doe@example.com' } ในเนื้อหาคำขอ หากมีข้อผิดพลาด จะบันทึกข้อผิดพลาดไปยังคอนโซลแทน

การปรับเปลี่ยนคำขอและการตอบสนองด้วย Axios Interceptors

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

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

นี่คือตัวอย่างวิธีเพิ่ม interceptor ให้กับอินสแตนซ์ Axios ของคุณ:

const axiosInstance = axios.create();

axiosInstance.interceptors.request.use(config => {
  // Add authentication headers here
  return config;
});

axiosInstance.interceptors.response.use(response => {
  // Modify response data here
  return response;
}, error => {
  // Handle errors here
  return Promise.reject(error);
});

โค้ดนี้สร้างอินสแตนซ์ Axios ใหม่และเพิ่ม interceptor ให้กับไปป์ไลน์คำขอและการตอบสนอง Request interceptor เพิ่มส่วนหัวการตรวจสอบสิทธิ์ให้กับคำขอ และ response interceptor จะปรับเปลี่ยนข้อมูลการตอบสนอง หากมีข้อผิดพลาด จะปฏิเสธ Promise ด้วยข้อผิดพลาด

การจัดการข้อผิดพลาดในการเรียก REST API ด้วย Axios

Axios มี API ที่เรียบง่ายและใช้งานง่ายสำหรับการจัดการข้อผิดพลาด คุณสามารถใช้เมธอด catch() เพื่อจัดการข้อผิดพลาดของเครือข่าย ข้อผิดพลาด HTTP และข้อผิดพลาดที่กำหนดเอง

นี่คือตัวอย่าง:

axios.get('https://api.example.com/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    if (error.response) {
      // The request was made and the server responded with a status code
      // that falls out of the range of 2xx
      console.log(error.response.data);
      console.log(error.response.status);
      console.log(error.response.headers);
    } else if (error.request) {
      // The request was made but no response was received
      console.log(error.request);
    } else {
      // Something happened in setting up the request that triggered an Error
      console.log('Error', error.message);
    }
    console.log(error.config);
  });

โค้ดนี้สร้างคำขอ GET ไปยัง https://api.example.com/data และบันทึกข้อมูลการตอบสนองไปยังคอนโซล หากมีข้อผิดพลาด จะบันทึกข้อผิดพลาดไปยังคอนโซลแทน เมธอด catch() จัดการข้อผิดพลาดและบันทึกข้อความที่เหมาะสมตามประเภทของข้อผิดพลาด

แนวทางปฏิบัติที่ดีที่สุดสำหรับการปรับการเรียก REST API ให้เหมาะสมด้วย Axios

Axios เป็นไลบรารี JavaScript ยอดนิยมที่ทำให้ง่ายต่อการทำงานกับ REST APIs มันมี API ที่เรียบง่ายและใช้งานง่ายสำหรับการสร้างคำขอ HTTP และรองรับคุณสมบัติต่างๆ เช่น request และ response interceptors, การแปลงอัตโนมัติ และอื่นๆ นี่คือเคล็ดลับบางประการสำหรับการปรับการเรียก REST API ของคุณให้เหมาะสมด้วย Axios:

1. ใช้ Interceptors อย่างรอบคอบ: แม้ว่า Axios interceptors จะมีประสิทธิภาพ แต่ให้ใช้เท่าที่จำเป็นเพื่อหลีกเลี่ยงการทำให้โค้ดซับซ้อนเกินไป Interceptors สามารถใช้เพื่อเพิ่มส่วนหัวการตรวจสอบสิทธิ์ ปรับเปลี่ยนคำขอหรือการตอบสนอง หรือจัดการข้อผิดพลาด อย่างไรก็ตาม การใช้ interceptors มากเกินไปอาจทำให้โค้ดของคุณอ่านและบำรุงรักษาได้ยาก
2. การจัดการข้อผิดพลาดส่วนกลาง: ใช้กลไกการจัดการข้อผิดพลาดส่วนกลางสำหรับคำขอ Axios สิ่งนี้สามารถช่วยให้คุณดักจับข้อผิดพลาดได้ตั้งแต่เนิ่นๆ และมอบประสบการณ์การจัดการข้อผิดพลาดที่สอดคล้องกันสำหรับผู้ใช้ของคุณ คุณสามารถใช้คุณสมบัติ axios.interceptors.response เพื่อเพิ่มตัวจัดการข้อผิดพลาดส่วนกลาง
3. การกำหนดค่าแบบโมดูลาร์: หากแอปพลิเคชันของคุณโต้ตอบกับ API หลายรายการที่มีการกำหนดค่าที่แตกต่างกัน ให้สร้างอินสแตนซ์ Axios แยกต่างหากพร้อมการตั้งค่าของตนเองเพื่อจัดระเบียบโค้ดของคุณ สิ่งนี้สามารถช่วยให้คุณหลีกเลี่ยงความขัดแย้งระหว่างการกำหนดค่า API ที่แตกต่างกัน และทำให้โค้ดของคุณอ่านและบำรุงรักษาได้ง่ายขึ้น
4. ใช้ Cancel Tokens: Cancel tokens สามารถใช้เพื่อยกเลิกคำขอก่อนที่จะเสร็จสมบูรณ์ สิ่งนี้มีประโยชน์หากผู้ใช้ไปยังหน้าอื่นหรือหากคำขอใช้เวลานานเกินไปในการดำเนินการให้เสร็จสิ้น คุณสามารถใช้คุณสมบัติ axios.CancelToken เพื่อสร้าง cancel token
5. ใช้ Timeouts: Timeouts สามารถใช้เพื่อจำกัดระยะเวลาที่คำขอสามารถใช้ได้ สิ่งนี้สามารถช่วยให้คุณหลีกเลี่ยงเวลารอนานและปรับปรุงประสบการณ์ของผู้ใช้ คุณสามารถใช้คุณสมบัติ timeout เพื่อตั้งค่าการหมดเวลาสำหรับคำขอของคุณ
6. ปรับข้อมูลของคุณให้เหมาะสม: เมื่อส่งข้อมูลในคำขอของคุณ ให้ปรับให้เหมาะสมเพื่อลดปริมาณข้อมูลที่ส่ง สิ่งนี้สามารถช่วยให้คุณลดภาระในเซิร์ฟเวอร์ของคุณและปรับปรุงประสิทธิภาพของแอปพลิเคชันของคุณ คุณสามารถใช้เครื่องมือเช่น Apidog เพื่อสร้างโครงสร้างข้อมูลที่เหมาะสมที่สุดสำหรับคำขอของคุณ
7. ใช้ URL ที่เป็นมิตรกับ SEO: เมื่อออกแบบ REST API ของคุณ ให้ใช้ URL ที่เป็นมิตรกับ SEO เพื่อให้เครื่องมือค้นหาสามารถรวบรวมข้อมูลและจัดทำดัชนีเนื้อหาของคุณได้ง่ายขึ้น สิ่งนี้สามารถช่วยให้คุณปรับปรุงอันดับเครื่องมือค้นหาของคุณและดึงดูดปริมาณการเข้าชมมายังไซต์ของคุณได้มากขึ้น
8. ใช้ Caching: Caching สามารถใช้เพื่อจัดเก็บข้อมูลที่เข้าถึงบ่อยๆ ในหน่วยความจำหรือบนดิสก์ สิ่งนี้สามารถช่วยให้คุณลดภาระในเซิร์ฟเวอร์ของคุณและปรับปรุงประสิทธิภาพของแอปพลิเคชันของคุณ คุณสามารถใช้เครื่องมือเช่น Redis หรือ Memcached เพื่อใช้ caching ในแอปพลิเคชันของคุณ
9. ใช้ Compression: Compression สามารถใช้เพื่อลดขนาดของคำขอและการตอบสนองของคุณ สิ่งนี้สามารถช่วยให้คุณลดภาระในเซิร์ฟเวอร์ของคุณและปรับปรุงประสิทธิภาพของแอปพลิเคชันของคุณ คุณสามารถใช้เครื่องมือเช่น Gzip หรือ Brotli เพื่อใช้ compression ในแอปพลิเคชันของคุณ
10. ใช้ Load Balancing: Load balancing สามารถใช้เพื่อกระจายภาระงานในเซิร์ฟเวอร์หลายเครื่อง สิ่งนี้สามารถช่วยให้คุณปรับปรุงประสิทธิภาพและความน่าเชื่อถือของแอปพลิเคชันของคุณ คุณสามารถใช้เครื่องมือเช่น NGINX หรือ HAProxy เพื่อใช้ load balancing ในแอปพลิเคชันของคุณ

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

ใช้ Apidog เพื่อทดสอบและแก้ไขการเรียก REST API ของคุณ

Apidog เป็นแพลตฟอร์มการพัฒนา API แบบร่วมมือกันแบบ all-in-one ที่มีเครื่องมือหลากหลายสำหรับการออกแบบ API, เอกสารประกอบ, การจำลอง, การทดสอบอัตโนมัติ และอื่นๆ ด้วย Apidog คุณสามารถปรับปรุงเวิร์กโฟลว์การพัฒนา REST API ของคุณ และตรวจสอบให้แน่ใจว่า API ของคุณมีความน่าเชื่อถือและมีประสิทธิภาพ ในการเริ่มต้นใช้งาน Apidog คุณสามารถสมัครใช้งานได้ฟรีและดาวน์โหลดแอปสำหรับ Mac หรือ Linux

ในการเรียก API ด้วย Apidog ให้สร้างคำขอใหม่และป้อนที่อยู่คำขอและพารามิเตอร์คำขอที่สมบูรณ์

ขั้นตอนที่ 1: เปิด Apidog และสร้าง คำขอ ใหม่

ขั้นตอนที่ 2: ค้นหาหรือป้อนรายละเอียด API ด้วยตนเองสำหรับคำขอ POST ที่คุณต้องการสร้าง

ขั้นตอนที่ 3: กรอกพารามิเตอร์ที่จำเป็นและข้อมูลใดๆ ที่คุณต้องการรวมไว้ในเนื้อหาคำขอ

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

บทสรุป

ในโพสต์นี้ เราได้เรียนรู้วิธีเรียก REST API ด้วย Axios ซึ่งเป็นไลบรารี JavaScript ยอดนิยมสำหรับการดึงข้อมูลจากเซิร์ฟเวอร์

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