Axios ব্যবহার করে API কল করা

Axios একটি জনপ্রিয় HTTP ক্লায়েন্ট লাইব্রেরি যা ব্রাউজার এবং Node.js উভয়ই ব্যবহার করা যায়। Vue.js এর সাথে Axios ব্যবহার করে আপনি সহজেই API কল করতে পারেন এবং রেসপন্স ডেটা পরিচালনা করতে পারেন। নিচে বিস্তারিতভাবে Vue.js এ Axios ব্যবহার করার প্রক্রিয়া আলোচনা করা হলো।

১. Axios ইনস্টল করা

প্রথমে আপনার প্রোজেক্টে Axios ইনস্টল করতে হবে। এটি আপনি npm বা yarn ব্যবহার করে করতে পারেন।

ইনস্টলেশন কমান্ড:

npm install axios

অথবা, যদি আপনি yarn ব্যবহার করেন:

yarn add axios

২. Vue.js এ Axios ব্যবহার করা

Axios ইনস্টল করার পর, এটি আপনার Vue.js অ্যাপ্লিকেশনে ব্যবহার করার জন্য আপনাকে এটি ইম্পোর্ট করতে হবে এবং তারপর API কল করতে হবে।

উদাহরণ: GET রিকোয়েস্ট করা

<template>
  <div>
    <h1>{{ user.name }}</h1>
    <p>{{ user.email }}</p>
  </div>
</template>

<script>
// Axios ইম্পোর্ট
import axios from 'axios';

export default {
  data() {
    return {
      user: {}  // ইউজারের ডেটা সংরক্ষণ করার জন্য
    };
  },
  mounted() {
    // API কল যখন কম্পোনেন্ট মাউন্ট হয়
    axios.get('https://jsonplaceholder.typicode.com/users/1')
      .then(response => {
        // API রেসপন্স থেকে ডেটা ধারণ
        this.user = response.data;
      })
      .catch(error => {
        // কোনো ত্রুটি হলে তা হ্যান্ডল করা
        console.error('There was an error!', error);
      });
  }
};
</script>

এখানে axios.get ব্যবহার করে একটি API রিকোয়েস্ট করা হয়েছে। API থেকে রেসপন্স পাওয়ার পর, this.user তে ডেটা সেট করা হয়েছে, যা Vue কম্পোনেন্টের মধ্যে দেখানো হচ্ছে।

৩. POST রিকোয়েস্ট ব্যবহার করা

API এ ডেটা পাঠানোর জন্য আপনি POST রিকোয়েস্ট ব্যবহার করতে পারেন। নিচে একটি উদাহরণ দেওয়া হলো যেখানে POST রিকোয়েস্টের মাধ্যমে ডেটা পাঠানো হচ্ছে:

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="sendData">Send Data</button>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      message: 'No message sent'
    };
  },
  methods: {
    sendData() {
      // API কল (POST রিকোয়েস্ট)
      axios.post('https://jsonplaceholder.typicode.com/posts', {
        title: 'foo',
        body: 'bar',
        userId: 1
      })
      .then(response => {
        // রেসপন্স পেলে মেসেজ আপডেট করা
        this.message = 'Data sent successfully!';
        console.log(response.data);  // রেসপন্স ডেটা কনসোল লগ করা
      })
      .catch(error => {
        // ত্রুটি হলে মেসেজ দেখানো
        this.message = 'There was an error sending the data!';
        console.error(error);
      });
    }
  }
};
</script>

এখানে, axios.post ব্যবহার করে API এ ডেটা পাঠানো হচ্ছে। API রেসপন্স পাওয়ার পর, message আপডেট করা হয়েছে।

৪. Axios ইন্টারসেপ্টর ব্যবহার করা

Axios এর মাধ্যমে API রিকোয়েস্টের আগে বা পরে আপনি ইন্টারসেপ্টর ব্যবহার করতে পারেন। এটি রিকোয়েস্ট বা রেসপন্সে কিছু কাস্টম লজিক যোগ করতে সাহায্য করে, যেমন টোকেন অ্যাড করা বা রেসপন্স ডেটা মডিফাই করা।

উদাহরণ: ইন্টারসেপ্টর সেটআপ করা

import axios from 'axios';

// রিকোয়েস্ট ইন্টারসেপ্টর
axios.interceptors.request.use(config => {
  // API কলের আগে টোকেন অ্যাড করা
  const token = 'your-token-here';
  config.headers['Authorization'] = `Bearer ${token}`;
  return config;
}, error => {
  return Promise.reject(error);
});

// রেসপন্স ইন্টারসেপ্টর
axios.interceptors.response.use(response => {
  // রেসপন্স ডেটা প্রক্রিয়াকরণ
  return response.data;
}, error => {
  return Promise.reject(error);
});

এখানে axios.interceptors.request.use এবং axios.interceptors.response.use ব্যবহার করে আপনি রিকোয়েস্ট এবং রেসপন্সের আগে বা পরে কাস্টম লজিক অ্যাড করতে পারেন।

৫. Axios কনফিগারেশন

আপনি যদি একাধিক API কল করতে চান, তবে Axios কনফিগারেশন একটি সেন্ট্রালাইজড জায়গায় রাখাটা সুবিধাজনক। আপনি axios.create() ব্যবহার করে একটি কাস্টম Axios ইন্সট্যান্স তৈরি করতে পারেন।

উদাহরণ: কাস্টম Axios কনফিগারেশন

import axios from 'axios';

// কাস্টম Axios ইন্সট্যান্স তৈরি করা
const api = axios.create({
  baseURL: 'https://jsonplaceholder.typicode.com',
  timeout: 1000
});

// কাস্টম Axios ইন্সট্যান্সের মাধ্যমে GET রিকোয়েস্ট
api.get('/users/1')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

এখানে axios.create ব্যবহার করে একটি কাস্টম Axios ইন্সট্যান্স তৈরি করা হয়েছে, যাতে আপনি API এর baseURL এবং timeout সময় কনফিগার করতে পারেন।

সারাংশ

• Axios হল একটি শক্তিশালী HTTP ক্লায়েন্ট যা API রিকোয়েস্ট এবং রেসপন্সের জন্য ব্যবহৃত হয়।
• আপনি GET, POST, এবং অন্যান্য HTTP মেথড ব্যবহার করে API কল করতে পারেন।
• Axios এ Lazy Loading, Error Handling, এবং Interceptors ব্যবহার করে আরো শক্তিশালী ফিচার যোগ করা যায়।
• Axios.create() ব্যবহার করে কাস্টম কনফিগারেশন তৈরি করা সম্ভব, যা প্রোজেক্টের অন্যান্য API কলের জন্য পুনঃব্যবহারযোগ্য।

এভাবে আপনি Vue.js এবং Axios ব্যবহার করে সহজে API কল করতে পারেন এবং অ্যাপ্লিকেশনে ডাইনামিক ডেটা লোড করতে পারেন।