Axios in kullanarak API'lerle iletişim kurma React- Adım Adım Kılavuz

Bir uygulamada React, API'lerle etkileşimde bulunmak yaygın bir gereksinimdir. HTTP istekleri yapma ve yanıtları işleme sürecini basitleştiren Axios popüler bir kitaplıktır. Bu adım adım kılavuz, API'lerle iletişim kurmak için uygulamanızda kullanım JavaScript sürecinde size yol gösterecektir. Axios React

 

yükleme Axios

Proje klasörünüzü terminalde açın ve yüklemek için aşağıdaki komutu çalıştırın Axios: npm install axios

Aşağıdaki kodu kullanarak bileşeninize Axios içe aktarın: React import axios from 'axios'

 

GET İstek Gönderme

İstek göndermek GET ve bir API'den veri almak için yöntemi kullanın. axios.get()

Örnek:

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 İstek Gönderme

Bir istek göndermek POST ve bir API'ye veri göndermek için yöntemi kullanın. axios.post()

Örnek:

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

 

İşleme Hataları

Axios yöntemi kullanarak yerleşik bir hata işleme mekanizması sağlar catch().

Örnek:

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'leri ile entegrasyon

Axios GET, , PUT ve DELETE gibi HTTP yöntemlerini belirtmenize izin vererek RESTful API'leri destekler POST.

Örnek:

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

 

Axios Bu adımları ve örnekleri izleyerek, uygulamanızda kullanılan API'lerle etkili bir şekilde iletişim kurabileceksiniz React.