ওয়েব অ্যাপ্লিকেশন বানানোর সময় এক্সটার্নাল রিসোর্স অ্যাক্সেস করার জন্য HTTP রিকোয়েস্ট করার প্রয়োজন পড়ে। যেমন: ব্লগ পোস্টে কমেন্ট লোড করার জন্য API কল করা।
Axios হলো একটি জনপ্রিয় জাভাস্ক্রিপ্ট লাইব্রেরি যেটি ওয়েব রিকোয়েস্ট করার জন্য ব্যবহৃত হয়। এই গাইডে Axios দিয়ে GET রিকোয়েস্ট কীভাবে করতে হয় এবং উদাহরণ দেখাব।
কেন Axios?
Axios একটি প্রমিস-বেসড লাইব্রেরি যা ওয়েব রিকোয়েস্ট খুব সহজ করে দেয়। অন্যান্য লাইব্রেরি (যেমন fetch) রয়েছে, কিন্তু Axios-এর কিছু সুবিধা রয়েছে:
-
পুরনো ব্রাউজার সাপোর্ট করে (বेहतर অ্যাক্সেসিবিলিটি)।
বিল্ট-ইন CSRF প্রোটেকশন রয়েছে।
Node.js-এও কাজ করে (ফ্রন্টএন্ড ও ব্যাকএন্ড দুটোই)।
Axios ইনস্টল করা
Axios ব্যবহার করার আগে ইনস্টল করতে হয়:
npm install axios --save
এটি package.json-এ সেভ করে দেবে। এখন Axios ব্যবহার করতে পারবেন।
Axios দিয়ে রিকোয়েস্ট করা
Axios দিয়ে রিকোয়েস্ট করা খুব সহজ। URL এবং মেথড নির্দিষ্ট করলেই চলে।
উদাহরণ: ক্যাট-ফ্যাক্টস API থেকে র্যান্ডম ক্যাট ফ্যাক্টস আনা।
axios ({ url: "https://cat-fact.herokuapp.com/facts", method: "GET" })
এটি একটি Promise রিটার্ন করে। ডেটা পেতে async/await ব্যবহার করুন:
const axios = require("axios"); async function getCatFacts() { const response = await axios ({ url: "https://cat-fact.herokuapp.com/facts", method: "GET" }) console.log(response.data) } getCatFacts()
সার্ভার ক্যাট ফ্যাক্টসের লিস্ট রিটার্ন করবে। async/await` দিয়ে প্রোগ্রাম রিকোয়েস্ট শেষ হওয়া পর্যন্ত অপেক্ষা করে, কারণ Axios প্রথমে Promise রিটার্ন করে।
Axios-এ কিছু শর্টহ্যান্ড মেথড রয়েছে:
axios.get()axios.post()axios.delete()axios.put()axios.patch()axios.options()
এই টিউটোরিয়ালে axios.get() এবং axios.post() নিয়ে আলোচনা করব।
Axios দিয়ে GET রিকোয়েস্ট
GET রিকোয়েস্টের সহজ পদ্ধতি হলো axios.get()।
ক্যাট ফ্যাক্টস আনে এবং কতটি ফ্যাক্টস এলো তা কাউন্ট করা:
const axios = require("axios"); async function getCatFacts() { const response = await axios.get("https://cat-fact.herokuapp.com/facts") console.log(`${response.data.all.length} cat facts were returned.`) } getCatFacts()
ফলাফল: 225 cat facts were returned.।
কোড ব্যাখ্যা: async ফাংশনে axios.get() কল করা হয়েছে। response.data-তে রেসপন্স বডি থাকে। .length দিয়ে কাউন্ট করা হয়েছে।
Axios দিয়ে হেডার পাঠানো
GET রিকোয়েস্টে কাস্টম হেডার পাঠাতে হলে:
axios.get("https://urlhere.com", { headers: { "header-name": "header-value" } })
এটি "header-name" হেডার "header-value" ভ্যালুসহ পাঠাবে।
Axios দিয়ে প্যারামিটার পাঠানো
অনেক API GET রিকোয়েস্টে প্যারামিটার গ্রহণ করে (যেমন: লিমিট)। Axios-এ প্যারামিটার পাঠাতে দুটি পদ্ধতি:
- কোয়েরি স্ট্রিং:
axios.get("https://urlhere.com/?date=2020-05-15") - params প্রপার্টি:
axios.get("https://urlhere.com", { params: { date: "2020-05-15" } })
দুটোই একই কাজ করে।
Axios দিয়ে POST রিকোয়েস্ট
POST রিকোয়েস্টের সিনট্যাক্স GET-এর মতোই, শুধু axios.post() ব্যবহার করতে হয়।
axios.post("https://urlhere.com")
হেডার ও প্যারামিটার GET-এর মতোই পাঠানো যায়। উদাহরণ: "Name" হেডার "James" ভ্যালুসহ পাঠানো।
axios.post("https://urlhere.com", { headers: { "Name": "James" } })
উপসংহার
Axios লাইব্রেরি জাভাস্ক্রিপ্টে ওয়েব রিকোয়েস্ট করার জন্য ব্যবহৃত হয়। এটি ফ্রন্টএন্ড (জাভাস্ক্রিপ্ট) এবং ব্যাকএন্ড (Node.js) দুটোইয়ে কাজ করে। অন্যান্য লাইব্রেরির চেয়ে Axios-এ বিল্ট-ইন CSRF প্রোটেকশন, পুরনো ব্রাউজার সাপোর্ট, এবং প্রমিস স্ট্রাকচার রয়েছে। এটি ওয়েব রিকোয়েস্টের জন্য পরফেক্ট।
এখন আপনি একজন পেশাদার ওয়েব ডেভেলপারের মতো Axios দিয়ে GET এবং POST রিকোয়েস্ট করতে পারবেন।
