close

Kommunikáció az API-kkal Axios a következővel React: – Lépésről lépésre útmutató

Egy React alkalmazásokban az API-kkal való interakció általános követelmény. Axios egy népszerű JavaScript könyvtár, amely leegyszerűsíti a HTTP-kérések és a válaszok kezelésének folyamatát. Ez a lépésenkénti útmutató végigvezeti Önt az alkalmazásban az API-kkal való kommunikáció Axios során React.

 

Telepítés Axios

Nyissa meg a projekt mappáját a terminálban, és futtassa a következő parancsot a telepítéshez Axios: npm install axios

Importálja Axios az React összetevőt a következő kóddal: import axios from 'axios'

 

GET Kérések küldése

Kérelem küldéséhez GET és adatok API-ból való lekéréséhez használja a módszert. axios.get()

Példa:

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 Kérések küldése

Kérelem küldéséhez POST és adatok API-ba küldéséhez használja a módszert. axios.post()

Példa:

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

 

Kezelési hibák

Axios módszer segítségével beépített hibakezelési mechanizmust biztosít catch().

Példa:

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

 

Integráció RESTful API-kkal

Axios támogatja a RESTful API-kat azáltal, hogy lehetővé teszi HTTP metódusok, például GET, POST, PUT és DELETE megadását.

Példa:

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

 

Az alábbi lépések és példák követésével hatékonyan kommunikálhat az alkalmazásában használt API- Axios kkal React.