close

Il-komunikazzjoni mal-APIs bl-użu Axios fi React- Gwida Pass Pass

F'applikazzjoni React, l-interazzjoni mal-APIs hija rekwiżit komuni. Axios hija JavaScript librerija popolari li tissimplifika l-proċess li tagħmel talbiet HTTP u timmaniġġja t-tweġibiet. Din il-gwida pass pass se tmexxik fil-proċess tal-użu Axios fl-applikazzjoni tiegħek React biex tikkomunika mal-APIs.

 

Installazzjoni Axios

Iftaħ il-folder tal-proġett tiegħek fit-terminal u mexxi l-kmand li ġej biex tinstalla Axios: npm install axios

Importa Axios fil-komponent tiegħek React billi tuża l-kodiċi li ġej: import axios from 'axios'

 

Tibgħat GET Talbiet

Biex tibgħat GET talba u ġġib id-dejta minn API, uża l- metodu. axios.get()

Eżempju:

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

 

Tibgħat POST Talbiet

Biex tibgħat POST talba u tibgħat dejta lil API, uża l- metodu. axios.post()

Eżempju:

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

 

Immaniġġjar ta' Żbalji

Axios jipprovdi mekkaniżmu integrat għall-immaniġġjar tal-iżbalji bl-użu tal- catch() metodu.

Eżempju:

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

 

Integrazzjoni ma 'APIs RESTful

Axios jappoġġja APIs RESTful billi jippermettilek tispeċifika metodi HTTP bħal GET, POST, PUT, u DELETE.

Eżempju:

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

 

Billi ssegwi dawn il-passi u l-eżempji, tkun tista' tikkomunika b'mod effettiv mal-APIs bl-użu Axios fl-applikazzjoni tiegħek React.