Komunikacja z interfejsami API przy użyciu Axios — React przewodnik krok po kroku

W React aplikacji interakcja z interfejsami API jest powszechnym wymaganiem. Axios to popularna JavaScript biblioteka, która upraszcza proces tworzenia żądań HTTP i obsługi odpowiedzi. Ten przewodnik krok po kroku przeprowadzi Cię przez proces używania Axios w React aplikacji do komunikacji z interfejsami API.

 

Instalowanie Axios

Otwórz folder projektu w terminalu i uruchom następujące polecenie, aby zainstalować Axios: npm install axios

Zaimportuj Axios w swoim React komponencie, używając następującego kodu: import axios from 'axios'

 

Wysyłanie GET żądań

Aby wysłać GET żądanie i pobrać dane z interfejsu API, użyj metody. axios.get()

Przykład:

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

 

Wysyłanie POST żądań

Aby wysłać POST żądanie i dane do interfejsu API, użyj metody. axios.post()

Przykład:

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

 

Obsługa błędów

Axios zapewnia wbudowany mechanizm obsługi błędów przy użyciu catch() metody.

Przykład:

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

 

Integracja z RESTful API

Axios obsługuje interfejsy API RESTful, umożliwiając określenie metod HTTP, takich jak GET, POST, PUT i DELETE.

Przykład:

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

 

Postępując zgodnie z tymi krokami i przykładami, będziesz w stanie skutecznie komunikować się z interfejsami API używanymi Axios w Twojej React aplikacji.