fetch-এর প্যাঁচ
ঘুম থেকে উঠে দেখলি, বালিশের নিচে মোবাইল ফোন নাই। তুই এখন কী করবি? আশেপাশে খুঁজবি। না পেলে চৌকির তলায় খুঁজবি। দেখতে পেলে সেটাকে উঠিয়ে নিয়ে আসবি। এই উঠিয়ে নিয়ে আসার একটা ইংরেজি শব্দ আছে। সেই শব্দকে fetch বলে।
fetch জাভাস্ক্রিপ্টের খুবই গুরুত্বপূর্ণ একটা ফাংশন। ব্রাউজার এইটা দিয়ে সার্ভার থেকে ডাটা নিয়ে আসে। আবার আরও কিছু কাজও করতে পারে। ডাটা নিয়ে আসার কাজটা খুবই সহজ হয়ে যায় fetch ইউজ করলে। এইখানে আরেকটা জিনিস মাথায় রাখবি, fetch কিন্তু ব্রাউজারের জিনিস। ব্রাউজারে কাজ করবে। এই জন্য fetch-কে webAPI বলে অর্থাৎ ওয়েবের api বলে। আর API-এর বলতে বুঝায় Application Programming Interface। সহজ কথায়, API হলো দুইটা সফটওয়্যারের মধ্যে যোগাযোগ করার উপায়।
খুব সিম্পলভাবে fetch করার জন্য জাস্ট fetch-কে কল করবি, আর প্যারামিটার হিসেবে একটা url দিয়ে দিবি। ইউআরএল (url ) হচ্ছে এড্রেস বা ঠিকানা। আর ঠিকানা তো লাগবেই। কারণ, তুই কাউকে কল দিলে ফোন নাম্বার লাগবে। কাউকে কোন পার্সেল পাঠালে তার এড্রেস লাগবে। একইভাবে কোনো জায়গা থেকে ডাটা নিয়ে আসতে চাইলে সেটার এড্রেস তো লাগবেই। আর URL (Uniform Resource Locator) সার্ভারে থাকা কোনো রিসোর্স (ডেটা, ফাইল, ইমেজ) খুঁজে বের করার ঠিকানা।
তুই যখন fetch() দিয়ে ডেটা আনার চেষ্টা করবি, তখন URL মাস্ট লাগবে। কারণ, URL ছাড়া বুঝবেই না, কোন জায়গা বা কোন সার্ভার থেকে ডাটা আনতে হবে। এই url একটা স্ট্রিং। নিচে ডাটা লোড করার একটা এড্রেসের উদাহরণ দিলাম।
const url = 'https://jsonplaceholder.typicode.com/users';
এখানে:
https://— এটা প্রটোকল। কীভাবে ডেটা যাবে, সেটা বলে দিচ্ছে।
jsonplaceholder.typicode.com— এটা হোস্ট বা ডোমেইন, মানে সার্ভারের ঠিকানা।
/users— এটা পাথ। সার্ভারে কোন রিসোর্স চাইতেছি, সেটা বলে।
আর fetch দিয়ে ডাটা লোড করার জন্য fetch লিখে তারপর একটা url দিয়ে দিতে হয়। কেউ কেউ url একটা ভেরিয়েবলে রেখে তারপর সেই ভেরিয়েবলকে fetch-এর আর্গুমেন্ট হিসেবে পাঠিয়ে দেয়। আবার কেউ কেউ সরাসরি fetch-এর মধ্যেই url বসিয়ে দেয়। আর fetch-কে কল করলে সে একটা প্রমিজ অবজেক্ট রিটার্ন করে।
const url = 'https://jsonplaceholder.typicode.com/users';
fetch(url);
// or
fetch('https://jsonplaceholder.typicode.com/users')আর fetch যেহেতু প্রমিজ রিটার্ন করে, তাহলে প্রমিজ অবজেক্টের ওপরে যেভাবে then, catch, finally ইউজ করা যায়, তার সবই fetch ওপরে ইউজ করা যাবে এবং দরকার হলে এক বা একাধিকবার then চালানো যাবে। একদম প্রমিজের মতো। এমনকি ঠিক প্রমিজের মতো করে then, fetch, finally সবগুলার ভিতরে কলব্যাক ফাংশন দিতে পারবি। ঠিক আগের মতোই। স্ট্রাকচারটা নিচের মতো।
fetch(url)
.then()
.then()
.catch()
.finally()
যদিও দুনিয়ার সব url থেকে সবাই ডাটা নিতে পারবে না। ডাটা ওপেন হলে পারমিশন থাকলে নিতে পারবে। আর পারমিশন বা কিছু লিমিটেশন থাকলে ডাটা পাবে না। আবার ডাটা পাওয়ার পারমিশন থাকার পরেও সার্ভারে কিছু ইস্যু হতে পারে। তখন ডাটা নাও দিতে পারে। এইসব মাথায় রেখে আমরা একটা উদাহরণ দেখে ফেলি।
সতর্কতা: নিচের কোড, fetch ব্রাউজার API এবং ডাটা ডাইরেক্টলি লোড করার কিছু সিকিউরিটির কারণে ব্রাউজারের কনসোলে গিয়ে বা কোনো কোড এডিটরে (ভিজ্যুয়াল স্টুডিও কোড) স্পেশাল কিছু না করলে জাস্ট সরাসরি এই কোডের আউটপুট দেখবি না; বরং এরর দেখবি। এইটার একটা সমাধান হচ্ছে, html-এর ভিতরে script ট্যাগের ভিতরে এই কোড লিখে ব্রাউজারে html ফাইল চালানো বা html ফাইলের সাথে জাভাস্ক্রিপ্টের ফাইল কানেক্ট করে চালানো। এই কানেকশনের সিস্টেম নিয়ে আমি একটু পরে বলতেছি। আপাতত এরর খেলেও লজিক দেখতে থাক। প্র্যাকটিস করতে থাকে। প্রোগ্রামার হতে গেলে যত বেশি এরর খাবি, শরীরের ভাইটামিন তত বাড়বে।
fetch('https://jsonplaceholder.typicode.com/users')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.log(error));
সার্ভার থেকে যদি ডাটা দেয়, তাহলে দুইটা কাজ করতে হবে। সেই দুইটা কাজের প্রথম কাজ করার জন্য সেকেন্ড লাইনে প্রথমেই আছে .then। এই .then দিয়ে বুঝায়, ডাটা কল করার পর (then) কী করবে। তুই খেয়াল করলে দেখবি, then-এর ভিতরে একটা অ্যারো ফাংশন দেয়া আছে।
সেই অ্যারো ফাংশনে একটা প্যারামিটার আছে response নামে। আর সেই প্যারামিটারকে অ্যারো ফাংশনের ভিতরে response.json() দিয়ে সার্ভার থেকে যে response পাচ্ছে, সেটাকে জাভাস্ক্রিপ্ট অবজেক্টে কনভার্ট করতেছে। সিম্পলভাবে বলতে পারস, JSON থেকে জাভাস্ক্রিপ্টে কনভার্ট করতেছে, যাতে যে ডাটা সার্ভার থেকে পাওয়া গেছে, সেটাকে তুই জাভাস্ক্রিপ্ট দিয়ে এক্সেস করতে পারস। ইউজ করতে পারস।
আর থার্ড বা শেষ লাইনে আছে আরেকটা then। আর এই then দিয়ে বুঝায়, সার্ভার থেকে পাওয়া ডাটা কনভার্ট করার পর (then) কী করবে। এইখানে then-এর ভিতরে একটা অ্যারো ফাংশন দিয়ে যে ডাটা পাওয়া গেছে, সেটাকে সহজভাবে কনসোল লগ করতেছে।
এরপর .catch() দিয়ে দেখতেছে, যদি ডাটা নিয়ে আসতে না পারে, তখন কী করবে। সেটার ভিতরে একটা সিম্পল কনসোল লগ করতেছে।
ওভারঅল কাজটা হচ্ছে fetch() একটি ফাংশন, যা একটি URL থেকে ডেটা নিয়ে আসে। এটি একটি রেসপন্স দেয়, যা পরে JSON ফরম্যাটে কনভার্ট করা হয়।
Fetch vs Promise
প্রমিজ আর fetch খালাতো ভাই। fetch নিজে প্রমিজ রিটার্ন করে। যেখানে প্রমিজ হচ্ছে জেনারেলভাবে asynchronous কাজের জন্য। আর fetch হচ্ছে স্পেসিফিকভাবে সার্ভার থেকে কোনো কিছু নিয়ে আসার বা সার্ভারে কিছু পাঠানোর জন্য। যেটাকে কঠিনভাবে বললে বলে HTTP রিকোয়েস্টের জন্য।
Practice:
- fetch ফাংশন থেকে রিটার্ন করা প্রমিজের মাধ্যমে response.json() কল করে, ডাটা কনভার্ট কেন করা হয়।
- fetch কেন ইউজ করা হয়।
- fetch আর প্রমিজের মধ্যে ডিফারেন্স কী।
- একটা API কল লিখে ফেল। যেটা 'https://jsonplaceholder.typicode.com/users' থেকে ইউজার লিস্ট লোড করবে।
- fetch প্র্যাকটিস করে ফেল 'https://jsonplaceholder.typicode.com/users/1' এই ইউআরএল থেকে ডাটা লোড করার জন্য।