Berkomunikasi dengan API menggunakan Axios dalam React- Panduan Langkah demi Langkah

Dalam React aplikasi, berinteraksi dengan API adalah keperluan biasa. Axios ialah JavaScript perpustakaan popular yang memudahkan proses membuat permintaan HTTP dan mengendalikan respons. Panduan langkah demi langkah ini akan memandu anda melalui proses penggunaan Axios dalam aplikasi anda React untuk berkomunikasi dengan API.

 

Memasang Axios

Buka folder projek anda di terminal dan jalankan arahan berikut untuk memasang Axios: npm install axios

Import Axios dalam komponen anda React menggunakan kod berikut: import axios from 'axios'

 

Menghantar GET Permintaan

Untuk menghantar GET permintaan dan mengambil data daripada API, gunakan kaedah tersebut. axios.get()

Contoh:

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);  
  });  

 

Menghantar POST Permintaan

Untuk menghantar POST permintaan dan menghantar data ke API, gunakan kaedah tersebut. axios.post()

Contoh:

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);  
  });  

 

Mengendalikan Ralat

Axios menyediakan mekanisme pengendalian ralat terbina dalam menggunakan catch() kaedah tersebut.

Contoh:

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);  
    }  
  });  

 

Mengintegrasikan dengan RESTful API

Axios menyokong API RESTful dengan membenarkan anda menentukan kaedah HTTP seperti GET, POST, PUT dan DELETE.

Contoh:

// 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);  
  });  

 

Dengan mengikuti langkah dan contoh ini, anda akan dapat berkomunikasi dengan berkesan menggunakan API Axios dalam aplikasi anda React.