মূলঃ Here are the most popular ways to make an HTTP request in JavaScript, লেখকঃ Said Hayani
জাভাস্ক্রিপ্টের বেশ কিছু ভাল মডিউল এবং মেথড আছে যেগুলির সাহায্যে HTTP রিকুয়েস্ট করা যায় এবং সার্ভার সাইড রিসোর্স আদান-প্রদান করা যায়। এই আর্টিকেলে আমরা জাভাস্ক্রিপ্টে HTTP রিকুয়েস্ট করার জনপ্রিয় কিছু পদ্ধতির সাথে পরিচিত হব।
Ajax
অ্যাসিঙ্ক্রোনাস HTTP রিকুয়েস্ট করার সনাতন পধ্বতি হল Ajax। HTTP POST মেথডের মাধ্যমে ডেটা পাঠানো যায় এবং HTTP GET মেথডের মাধ্যমে ডেটা গ্রহণ করা যায়। চলুন তাহলে এবার একটি GET রিকুয়েস্ট করে দেখা যাক। সার্ভার হিসেবে আমি JSONPlaceholder ব্যবহার করবো। এটি ডেভেলপারদের জন্য একটি ফ্রী অনলাইন REST API এবং এটি র্যান্ডম ডেটা, JSON ফরম্যাটে রিটার্ন করে।
Ajax এ HTTP কল করার জন্য আপনাকে একটি নতুন XMLHttpRequest() মেথড ইনিশিয়ালাইজ করে, URL এন্ডপয়েন্ট এবং HTTP মেথড (এ ক্ষেত্রে GET) স্পেসিফাই করে দিতে হবে। এরপর open() মেথডটি কল করার মাধ্যমে HTTP মেথড এবং URL এন্ডপয়েন্টিকে সংযুক্ত করে, send() মেথড কল করার মাধ্যমে রিকুয়েস্টটি পাঠিয়ে দিতে হবে।
আমরা XMLHTTPRequest.onreadystatechange প্রোপার্টি ব্যবহার করে HTTP রেস্পন্সটি কনসোলে লগ করতে পারি। এই প্রোপার্টিতে একটি ইভেন্ট হ্যান্ডলার থাকে যা readystatechanged ইভেন্ট ফায়ার হলে কল করা হয়।
const Http = new XMLHttpRequest();
const url='https://jsonplaceholder.typicode.com/posts';
Http.open("GET", url);
Http.send();
Http.onreadystatechange = (e) => {
console.log(Http.responseText)
}এখন আপনি যদি আপনার ব্রাউজার কনসোলটি দেখেন, তাহলে রেসপন্স ডেটার একটি অ্যারে, JSON ফরম্যাটে দেখতে পারবেন। কিন্তু একটি Ajax রিকুয়েস্টের ক্ষেত্রে আমরা কিভাবে বুঝবো যে রিকুয়েস্টটি সম্পন্ন হয়ছে কি না? অন্য কথায়, আমরা কিভাবে Ajax এর রেসপন্সটি হ্যান্ডেল করবো?
onreadystatechange প্রোপার্টিটিতে দুটি মেথড, readyState এবং status আছে যার মাধ্যমে আমরা রিকুয়েস্টটির স্টেট পরীক্ষা করে দেখতে পারি।
readyState এর মান 4 হওয়ার অর্থ হল রিকুয়েস্টটি সম্পন্ন হয়েছে। readyState এর ৫টি রেসপন্স আছে। এগুলি সম্পর্কে এখানে জানতে পারবেন।
জাভাস্ক্রিপ্টের মাধ্যমে সরাসরি Ajax কল করা ছাড়াও HTTP রিকুয়েস্ট করার আরও শক্তিশালী মেথড রয়েছে, যেমন, $.Ajax যেটি একটি jQuery মেথড। এখন আমি অন্যান্য মেথডগুলি নিয়ে আলোচনা করবো।
jQuery মেথডসমূহ
সহজে HTTP রিকুয়েস্ট হ্যান্ডেল করার জন্য jQuery এর বেশ কিছু মেথড আছে। এই মেথডগুলি ব্যবহার করার জন্য আপনাকে jQuery লাইব্রেরিটি আপনার প্রোজেক্টে যুক্ত করে নিতে হবে।
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>$.ajax
jQuery Ajax হল HTTP কল করার সবথেকে সাধারণ উপায়গুলির একটি।
$.ajax মেথডটি অনেক কয়টি প্যারামিটার গ্রহণ করে, এদের মধ্যে কিছু কিছু বাধ্যতামূলক এবং কিছু কিছু ঐচ্ছিক। রেসপন্স হ্যান্ডেল করার জন্য মেথডটির দুটি কলব্যাক success এবং error রয়েছে।
$.get
$.get মেথডটি GET রিকুয়েস্ট এক্সিকিউট করার জন্য ব্যবহৃত হয়। মেথডটি দুটি প্যারামিটার গ্রহণ করেঃ এন্ডপয়েন্ট এবং কলব্যাক ফাংশন।
$.post
সার্ভারে ডেটা পাঠানোর আরও একটি উপায় হল $.post মেথড। মেথডটি তিনটি প্যারামিটার গ্রহণ করেঃ url, আপনি যে ডেটা পোস্ট করতে চান, এবং একটি কলব্যাক ফাংশন।
$.getJSON
$.getJSON মেথডটি শধুমাত্র JSON ফরম্যাটের ডেটা নিয়ে আসে। মেথডটি দুটি প্যারামিটার গ্রহণ করেঃ url এবং একটি কলব্যাক ফাংশন।
jQuery তে এই সবগুলি মেথড আছে ডেটা নিয়ে আসা এবং রিমোট সার্ভারে ডেটা পোস্ট করার জন্য। কিন্তু আপনি চাইলে এই সব মেথডগুলিকে একটির মধ্যে ফেলতে পারেন $.ajax মেথডটি ব্যবহার করার মাধ্যমে।
fetch
fetch হল একটি নতুন শক্তিশালী ওয়েব API যার মাধ্যমে আপনি অ্যাসিঙ্ক্রোনাস রিকুয়েস্ট করতে পারেন। এটি একটি "Promise" রিটার্ন করে যা ES6 এর ফিচারগুলির মধ্যে অন্যতম। আপনি যদি ES6 এর সাথে পরিচিত না হয়ে থাকেন তাহলে আপনি এই আর্টিকেলটি পড়তে পারেন। প্রমিজের মাধ্যমে আরও সুন্দর ভাবে অ্যাসিঙ্ক্রোনাস রিকুয়েস্ট হ্যান্ডেল করা যায়। চলুন একটি উদাহরণের মাধ্যমে দেখা যাক fetch কিভাবে কাজ করে।
fetch ফাংশনটি একটি বাধ্যতামূলক প্যারামিটার নেয়ঃ endpoint URL। মেথডটির আরও কিছু ঐচ্ছিক প্যারামিটার আছে যা নিম্নোক্ত উদাহরণে দেখানো হলঃ
যেমনটা আপনি দেখতে পারছেন, HTTP রিকুয়েস্ট করার জন্য fetch এ বেশ কিছু সুবিধা রয়েছে। এখানে আপনি fetch সম্পর্কে আরও জানতে পারবেন।
Axios
Axios হল HTTP রিকুয়েস্ট করার একটি ওপেন-সোর্স লাইব্রেরি যার বেশ কিছু ভাল ভাল ফিচার আছে। চলুন দেখা যাক এটি কিভাবে কাজ করে।
ব্যবহার
প্রথমে আপনার প্রোজেক্টে Axios যুক্ত করতে হবে। এটি করার দুটি উপায় আছে।
প্রথমত, আপনি npm ব্যবহার করতে পারেনঃ
npm install axios --saveএরপর আপনাকে axios লাইব্রেরিটি import করে নিতে হবে
import axios from 'axios'দ্বিতীয়ত, আপনি একটি CDN ব্যবহার করে axios যুক্ত করতে পারেন।
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>Axios এর মাধ্যমে রিকুয়েস্ট করাঃ
Axios এর মাধ্যমে আপনি GET এবং POST মেথড ব্যবহার করে ডেটা গ্রহণ করতে এবং পাঠাতে পারবেন।
GET:
axios একটি বাধ্যতামূলক প্যারামিটার গ্রহণ করে এবং দ্বিতীয় একটি ঐচ্ছিক প্যারামিটারও গ্রহণ করতে পারে। দ্বিতীয় প্যারামিটারটি কুয়েরি হিসেবে কিছু ডেটা নিতে পারে।
POST:
Axios একটি promise রিটার্ন করে। আপনি যদি promise এর সাথে পরিচিত হয়ে থাকেন তাহলে হয়তো জানবেন যে একটি promise একাধিক রিকুয়েস্ট এক্সিকিউট করতে পারে। আপনি একই কাজ axios দিয়ে করতে পারেন এবং একসাথে একাধিক রিকুয়েস্ট চালাতে পারেন।
Axios আরও অনেক মেথড এবং অপশন সমর্থন করে। এখানে আপনি সেগুলি সম্পর্কে জানতে পারেন।
Angular HttpClient
Angular এর নিজস্ব একটি HTTP মডিউল আছে যা Angular অ্যাপগুলির সাথে কাজ করে। মডিউলটি অ্যাসিঙ্ক্রোনাস রিকুয়েস্ট হ্যান্ডেল করার জন্য RxJS লাইব্রেরি ব্যবহার করে এবং HTTP রিকুয়েস্ট করার জন্য অনেকগুলি অপশন দেয়।
Angular HttpClient ব্যবহার করে সার্ভারে কল করা
Angular HttpClient ব্যবহার করে রিকুয়েস্ট করার জন্য আমাদের কোডকে একোটি Angular অ্যাপের মধ্যে চালাতে হবে। তাই আমি একটি Angular অ্যাপ তৈরি করেছি। আপনি যদি Angular এর সাথে পরিচিত না হয়ে থাকেন তাহলে আমার learn how to create your first Angular app in 20 minutes আর্টিকেলটি দেখতে পারেন।
প্রথমে app.module.ts এ HttpClientModule টি ইম্পোর্ট করতে হবে
এরপর রিকুয়েস্ট হ্যান্ডেল করার জন্য আমাদের একটি সার্ভিস তৈরি করতে হবে। Angular CLI ব্যবহার করে আপনি খুব সহজে একটি সার্ভিস জেনারেট করতে পারেন।
ng g service FetchdataServiceএবার fetchdataService.ts এ HttpClient ইম্পোর্ট করে কন্সট্রাক্টরে ইনজেক্ট করতে হবে।
এবং app.component.ts এ fetchdataService ইম্পোর্ট করতে হবে
import { FetchdataService } from './fetchdata.service';ফাইনালি, সার্ভিসটি কল করে চালু করুন।
app.component.ts:
আপনি Stackblitz এ ডেমোটি দেখতে পারেন।
উপসংহার
আমরা HTTP রিকুয়েস্ট করার সব থেকে জনপ্রিয় উপায়গুলি নিয়ে জানলাম।
আপনার সময়ের জন্য ধন্যবাদ। আপনার যদি এটি ভাল লেগে থাকে আমাকে টুইটার এ জানাতে ভুলবেন না।