এপিআই ব্যবহার করে যোগাযোগ করা Axios- React একটি ধাপে ধাপে নির্দেশিকা

একটি React অ্যাপ্লিকেশনে, API-এর সাথে ইন্টারঅ্যাক্ট করা একটি সাধারণ প্রয়োজন। Axios একটি জনপ্রিয় JavaScript লাইব্রেরি যা HTTP অনুরোধ এবং প্রতিক্রিয়া পরিচালনা করার প্রক্রিয়াকে সহজ করে। এই ধাপে ধাপে গাইড আপনাকে API-এর সাথে যোগাযোগ করার জন্য 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-এর সাথে কার্যকরভাবে যোগাযোগ করতে সক্ষম হবেন ৷