Axios मा प्रयोग गरेर API हरु संग संचार React- एक चरण-दर-चरण गाइड

एप्लिकेसनमा React, एपीआईहरूसँग अन्तरक्रिया गर्नु सामान्य आवश्यकता हो। Axios एक लोकप्रिय JavaScript पुस्तकालय हो जसले HTTP अनुरोधहरू र प्रतिक्रियाहरू ह्यान्डल गर्ने प्रक्रियालाई सरल बनाउँछ। यो चरण-दर-चरण गाईडले तपाईंलाई APIs सँग सञ्चार गर्नको लागि Axios तपाईंको अनुप्रयोगमा प्रयोग गर्ने प्रक्रियामा लैजानेछ । React

 

स्थापना गर्दै Axios

टर्मिनलमा आफ्नो परियोजना फोल्डर खोल्नुहोस् र स्थापना गर्न निम्न आदेश चलाउनुहोस् Axios: npm install axios

निम्न कोड प्रयोग गरेर Axios आफ्नो कम्पोनेन्टमा आयात गर्नुहोस्: React import axios from 'axios'

 

GET अनुरोधहरू पठाउँदै

अनुरोध पठाउन GET र API बाट डाटा ल्याउन, विधि प्रयोग गर्नुहोस्। axios.get()

उदाहरण:

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 अनुरोधहरू पठाउँदै

अनुरोध पठाउन POST र API मा डाटा पठाउन, विधि प्रयोग गर्नुहोस्। axios.post()

उदाहरण:

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

 

त्रुटिहरू ह्यान्डलिंग

Axios catch() विधि प्रयोग गरी निर्मित त्रुटि ह्यान्डलिंग संयन्त्र प्रदान गर्दछ ।

उदाहरण:

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 सँग एकीकरण गर्दै

Axios तपाईंलाई HTTP विधिहरू जस्तै GET, POST, PUT, र DELETE निर्दिष्ट गर्न अनुमति दिएर RESTful API लाई समर्थन गर्दछ।

उदाहरण:

// 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 यी चरणहरू र उदाहरणहरू पछ्याएर, तपाईं आफ्नो React अनुप्रयोगमा प्रयोग गरी API हरू प्रभावकारी रूपमा सञ्चार गर्न सक्षम हुनुहुनेछ ।