আপনি যখন একটি ওয়েব অ্যাপ্লিকেশন তৈরি করছেন, তখন এমন একটি সময় আসতে পারে যখন আপনি একটি বাহ্যিক সংস্থান অ্যাক্সেস করার জন্য একটি HTTP অনুরোধ করতে চান। উদাহরণস্বরূপ, ধরুন আপনি একটি ব্লগ তৈরি করছেন। প্রতিটি ব্লগ পোস্টে দেখানোর জন্য মন্তব্যের একটি তালিকা পুনরুদ্ধার করতে আপনি একটি API কল করতে চাইতে পারেন।
Axios হল একটি জনপ্রিয় জাভাস্ক্রিপ্ট লাইব্রেরি যা আপনি ওয়েব অনুরোধ করতে ব্যবহার করতে পারেন। এই নির্দেশিকায়, আমরা ব্যাখ্যা করব কিভাবে একটি GET অনুরোধ করতে অ্যাক্সিওস ব্যবহার করতে হয়। অ্যাক্সিওস কীভাবে কাজ করে এবং আপনি কীভাবে এটি আপনার কোডে ব্যবহার করতে পারেন তা দেখানোর জন্য আমরা কয়েকটি উদাহরণ দিয়ে হেঁটে যাব।
কেন Axios?
Axios হল একটি প্রতিশ্রুতি-ভিত্তিক লাইব্রেরি যা ওয়েব অনুরোধগুলিকে সহজ করে তোলে।
আপনি হয়তো ভাবছেন:আমি কেন সেখানে থাকা অন্য অনেক ওয়েব রিকোয়েস্ট লাইব্রেরির একটিতে অ্যাক্সিওস ব্যবহার করব? এটা সত্য যে অন্যান্য লাইব্রেরি যেমন আনয়ন আছে যেগুলি আপনি GET অনুরোধ করতে ব্যবহার করতে পারেন, কিন্তু axios-এর অনেক সুবিধা রয়েছে এই লাইব্রেরিতে নেই।
Axios পুরানো ব্রাউজারগুলিকে সমর্থন করে, যা আপনাকে আরও অ্যাক্সেসযোগ্য ব্যবহারকারীর অভিজ্ঞতা তৈরি করতে দেয়। Axios এছাড়াও দুর্বলতা প্রতিরোধ করার জন্য অন্তর্নির্মিত CSRF সুরক্ষার সাথে আসে। এটি Node.js-এও কাজ করে, যা আপনি ফ্রন্ট-এন্ড বা ব্যাক-এন্ড উভয় ওয়েব অ্যাপ্লিকেশন তৈরি করলে এটিকে দুর্দান্ত করে তোলে।
কিভাবে Axios ইনস্টল করবেন
আপনি axios ব্যবহার করে একটি GET অনুরোধ করার আগে, আপনাকে লাইব্রেরি ইনস্টল করতে হবে। আপনি নিম্নলিখিত কমান্ড ব্যবহার করে তা করতে পারেন:
npm install axios --save
এই কমান্ডটি axios ইনস্টল করবে এবং এটিকে আপনার স্থানীয় package.json ফাইলে সংরক্ষণ করবে। এখন আপনি অ্যাক্সিওস লাইব্রেরি ব্যবহার শুরু করতে প্রস্তুত৷
৷কিভাবে Axios ব্যবহার করে একটি অনুরোধ করা যায়
axios দিয়ে শুরু করা সহজ। একটি ওয়েব অনুরোধ করতে, আপনাকে যা করতে হবে তা হল যে URL থেকে আপনি ডেটা অনুরোধ করতে চান এবং যে পদ্ধতিটি ব্যবহার করতে চান তা নির্দিষ্ট করুন৷
81% অংশগ্রহণকারী বলেছেন যে তারা বুটক্যাম্পে যোগ দেওয়ার পরে তাদের প্রযুক্তিগত কাজের সম্ভাবনা সম্পর্কে আরও আত্মবিশ্বাসী বোধ করেছেন। আজই একটি বুটক্যাম্পের সাথে মিলিত হন৷
৷গড় বুটক্যাম্প গ্র্যাড একটি বুটক্যাম্প শুরু করা থেকে শুরু করে তাদের প্রথম চাকরি খোঁজা পর্যন্ত ক্যারিয়ারের পরিবর্তনে ছয় মাসেরও কম সময় কাটিয়েছে।
ধরুন আপনি cat-facts API থেকে বিড়াল সম্পর্কে এলোমেলো তথ্যের একটি তালিকা পুনরুদ্ধার করতে চান। আমরা এই কোডটি ব্যবহার করে তা করতে পারি:
axios ({
url: "https://cat-fact.herokuapp.com/facts",
method: "GET"
)} এই কোডটি একটি প্রতিশ্রুতি প্রদান করে যা একটি অনুরোধের প্রতিনিধিত্ব করে যা এখনও সম্পূর্ণ হয়নি। এই HTTP অনুরোধ থেকে ডেটা পুনরুদ্ধার করার জন্য, আপনি একটি 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()
সার্ভার বিড়াল তথ্য একটি তালিকা সঙ্গে প্রতিক্রিয়া.
যখন আমরা এই ফাংশনটিকে কল করি, তখন cat-facts API-এ একটি HTTP GET অনুরোধ করা হয়। আমরা একটি async/await ফাংশন ব্যবহার করি যাতে ওয়েব অনুরোধ সম্পূর্ণ না হওয়া পর্যন্ত আমাদের প্রোগ্রামটি চলতে থাকে না। কারণ অ্যাক্সিওস প্রথমে একটি প্রতিশ্রুতি প্রদান করে। এটি অনুরোধটি সম্পূর্ণ হওয়ার পরে যে অনুরোধটি করে তার থেকে ডেটা ফেরত দেয়।
অ্যাক্সিওস লাইব্রেরিতে কয়েকটি সংক্ষিপ্ত নির্দেশাবলী রয়েছে যা আপনি ওয়েব অনুরোধ করতে ব্যবহার করতে পারেন:
- axios.get()
- axios.post()
- axios.delete()
- axios.put()
- axios.patch()
- axios.options()
এই টিউটোরিয়ালে, আমরা axios.get()-এ ফোকাস করতে যাচ্ছি এবং axios.post() পদ্ধতি, যা অন্য সব শর্টহ্যান্ড পদ্ধতির মতো একই মৌলিক সিনট্যাক্স ব্যবহার করে।
অ্যাক্সিওস ব্যবহার করে GET অনুরোধ করা
আমাদের শেষ উদাহরণে, আমরা একটি 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টি বিড়ালের তথ্য ফেরত দেওয়া হয়েছে।
আসুন আমাদের কোড ভাঙ্গা যাক। আমরা প্রথমে getCatFacts() নামে একটি অ্যাসিঙ্ক ফাংশন ঘোষণা করেছি যেখানে আমরা একটি ওয়েব অনুরোধ করি।
তারপর আমরা axios.get() ব্যবহার করি cat-facts API থেকে বিড়ালের তথ্যের একটি তালিকা পুনরুদ্ধার করতে; "response.data" আমাদের অনুরোধ থেকে প্রতিক্রিয়া বস্তু এবং অনুরোধ বডি ধারণ করে।
অবশেষে, আমাদের অনুরোধ থেকে কতগুলি বিড়ালের তথ্য ফিরে এসেছে তা গণনা করতে আমরা .length বৈশিষ্ট্য ব্যবহার করি। তারপরে আমরা এই সংখ্যাটি "বিড়ালের তথ্য ফেরত দেওয়া হয়েছিল" স্ট্রিংটিতে যোগ করি।
অক্সিওস ব্যবহার করে হেডার পাঠানো হচ্ছে
আপনি যখন একটি GET অনুরোধ করছেন, তখন আপনি যে ওয়েব রিসোর্সে অনুরোধ করছেন সেখানে আপনাকে একটি কাস্টম হেডার পাঠাতে হতে পারে। ধরুন আপনি একটি API থেকে ডেটা পুনরুদ্ধার করছেন যার জন্য প্রমাণীকরণ প্রয়োজন। আপনাকে একটি প্রমাণীকরণ শিরোনাম নির্দিষ্ট করতে হতে পারে।
একটি অ্যাক্সিওস অনুরোধ সহ একটি শিরোনাম নির্দিষ্ট করতে, আপনি নিম্নলিখিত কোডটি ব্যবহার করতে পারেন:
axios.get("https://urlhere.com", {
headers: { "header-name": "header-value" }
}) এই কোডটি হেডার "হেডার-নাম" মানের সাথে "হেডার-মান" আমাদের নির্দিষ্ট করা ইউআরএলে পাঠাবে।
অক্সিওস ব্যবহার করে প্যারামিটার পাঠানো হচ্ছে
অনেক API আপনাকে একটি GET অনুরোধে পরামিতি পাঠাতে দেয়। উদাহরণস্বরূপ, একটি API আপনাকে সীমা প্যারামিটার ব্যবহার করে কতগুলি প্রতিক্রিয়া ফেরত দেওয়া হবে তা সীমিত করার অনুমতি দিতে পারে।
একটি ওয়েব অনুরোধের সাথে পাঠানোর জন্য একটি প্যারামিটার নির্দিষ্ট করা axios ব্যবহার করে সহজ। আপনি একটি ক্যোয়ারী স্ট্রিং হিসাবে প্যারামিটার অন্তর্ভুক্ত করতে পারেন, অথবা প্যারাম বৈশিষ্ট্য ব্যবহার করতে পারেন। এখানে একটি প্যারামিটার নির্দিষ্ট করতে ক্যোয়ারী স্ট্রিং ব্যবহার করে একটি ওয়েব অনুরোধ করার অক্ষের একটি উদাহরণ রয়েছে:
axios;get("https://urlhere.com/?date=2020-05-15") বিকল্পভাবে, আপনি এই কোডটি ব্যবহার করে অ্যাক্সিওস বিকল্পগুলিতে একটি প্যারাম সম্পত্তি নির্দিষ্ট করতে পারেন:
axios;get("https://urlhere.com/?date=2020-05-15", {
params: {
date: "2020-05-15"
}
}) এই দুটি উদাহরণই নির্দিষ্ট ইউআরএলে "তারিখ" এবং মান "2020-05-15" নামের একটি প্যারামিটার পাঠায়।
অ্যাক্সিওস ব্যবহার করে কীভাবে একটি পোস্টের অনুরোধ করবেন
একটি POST অনুরোধ করার সিনট্যাক্স একটি GET অনুরোধ করার মতই। পার্থক্য হল আপনার axios.post() ব্যবহার করা উচিত axios.get() এর পরিবর্তে পদ্ধতি .
ধরুন আপনি একটি API এ একটি পোস্ট অনুরোধ করতে চান। আপনি এই কোড ব্যবহার করে তা করতে পারেন:
axios.post("https://urlhere.com")
আপনি শিরোনাম এবং পরামিতিগুলি একইভাবে নির্দিষ্ট করতে সক্ষম হন যেভাবে আপনি একটি GET অনুরোধ করতে চান। ধরা যাক আপনি আপনার POST অনুরোধের সাথে "James" মান সহ হেডার "Name" পাঠাতে চান। আপনি এই কোড ব্যবহার করে তা করতে পারেন:
axios.post("https://urlhere.com", {
headers: { "Name": "James" }
}) উপসংহার
জাভাস্ক্রিপ্টে ওয়েব রিকোয়েস্ট করতে অ্যাক্সিওস লাইব্রেরি ব্যবহার করা হয়। এটি জাভাস্ক্রিপ্ট ব্যবহার করে সামনের প্রান্তে বা Node.js এর মতো একটি প্ল্যাটফর্ম ব্যবহার করে ব্যাক-এন্ড উভয় ক্ষেত্রেই ব্যবহার করা যেতে পারে। অন্যান্য ওয়েব রিকোয়েস্ট লাইব্রেরি থেকে ভিন্ন, অ্যাক্সিওসে বিল্ট-ইন CSRF সুরক্ষা রয়েছে, পুরানো ব্রাউজারগুলিকে সমর্থন করে এবং একটি প্রতিশ্রুতি কাঠামো ব্যবহার করে। এটি ওয়েব অনুরোধ করার জন্য নিখুঁত।
এখন আপনি একজন পেশাদার ওয়েব ডেভেলপারের মতো অক্ষ ব্যবহার করে GET এবং POST অনুরোধগুলি তৈরি করতে প্রস্তুত৷
