close

Kommunicera med API:er med hjälp Axios av React en steg-för-steg-guide

I en React applikation är interaktion med API:er ett vanligt krav. Axios är ett populärt JavaScript bibliotek som förenklar processen att göra HTTP-förfrågningar och hantera svar. Den här steg-för-steg-guiden leder dig genom processen att använda Axios i din React applikation för att kommunicera med API:er.

 

Installerar Axios

Öppna din projektmapp i terminalen och kör följande kommando för att installera Axios: npm install axios

Importera Axios i din React komponent med följande kod: import axios from 'axios'

 

Skickar GET förfrågningar

För att skicka en GET begäran och hämta data från ett API, använd metoden. axios.get()

Exempel:

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

 

Skickar POST förfrågningar

För att skicka en POST begäran och skicka data till ett API, använd metoden. axios.post()

Exempel:

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

 

Hantering av fel

Axios tillhandahåller en inbyggd felhanteringsmekanism som använder catch() metoden.

Exempel:

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

 

Integrering med RESTful API:er

Axios stöder RESTful API:er genom att du kan ange HTTP-metoder som, , GET PUT POST och DELETE.

Exempel:

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

 

Genom att följa dessa steg och exempel kommer du att kunna kommunicera effektivt med API:er som används Axios i din React applikation.