การสื่อสารกับ API โดยใช้ Axios in React- A Step-by-Step Guide

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

 

กำลังติดตั้ง Axios

เปิดโฟลเดอร์โครงการของคุณในเทอร์มินัลแล้วรันคำสั่งต่อไปนี้เพื่อติดตั้ง Axios: npm install axios

นำเข้า ส่วนประกอบ Axios ของคุณ React โดยใช้รหัสต่อไปนี้: import axios from 'axios'

 

การส่ง GET คำขอ

หากต้องการส่ง GET คำขอและดึงข้อมูลจาก API ให้ใช้ วิธีการ axios.get()

ตัวอย่าง:

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

 

การส่ง POST คำขอ

หากต้องการส่ง POST คำขอและส่งข้อมูลไปยัง API ให้ใช้ วิธีการ axios.post()

ตัวอย่าง:

axios.post('https://api.example.com/data', { name: 'John', age: 25 })  
  .then(response => {  
    // Handle the response data  
    console.log(response.data);  
  })  
  .catch(error => {  
    // Handle any errors  
    console.error(error);  
  });  

 

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

Axios ให้กลไกจัดการข้อผิดพลาดในตัวโดยใช้ catch() เมธอด

ตัวอย่าง:

axios.get('https://api.example.com/data')  
  .then(response => {  
    console.log(response.data);  
  })  
  .catch(error => {  
    // Handle the error  
    if(error.response) {  
      // The request was made, but the server responded with an error status code  
      console.error(error.response.data);  
    } else if(error.request) {  
      // The request was made but no response was received  
      console.error(error.request);  
    } else {  
      // Something else happened while setting up the request  
      console.error(error.message);  
    }  
  });  

 

การผสานรวมกับ RESTful API

Axios รองรับ RESTful APIs โดยอนุญาตให้คุณระบุเมธอด HTTP เช่น GET, POST, PUT และ DELETE

ตัวอย่าง:

// GET request with query parameters
axios.get('https://api.example.com/data', { params: { page: 1, limit: 10 } })  
  .then(response => {  
    console.log(response.data);  
  })  
  .catch(error => {  
    console.error(error);  
  });  
  
// POST request with data
axios.post('https://api.example.com/data', { name: 'John', age: 25 })  
  .then(response => {  
    console.log(response.data);  
  })  
  .catch(error => {  
    console.error(error);  
  });  
  
// PUT request to update existing data  
axios.put('https://api.example.com/data/1', { name: 'John Doe' })  
  .then(response => {  
    console.log(response.data);  
  })  
  .catch(error => {  
    console.error(error);  
  });  
  
// DELETE request to remove data  
axios.delete('https://api.example.com/data/1')  
  .then(response => {  
    console.log(response.data);  
  })  
  .catch(error => {  
    console.error(error);  
  });  

 

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