ডেভেলপাররা প্রায়শই তাদের নিজের API বা থার্ড-পার্টি API থেকে ডেটা রিট্রিভ করতে হয়। এই আর্টিকেলে আপনার ব্রাউজারের Fetch API ব্যবহার করে একটি এন্ডপয়েন্ট থেকে কিছু ডেটা GET করার বিষয়ে আলোচনা করা হয়েছে।
Fetch API কী?
Fetch API হল একটি ইন্টারফেস যা আমাদের একটি সার্ভারে HTTP রিকোয়েস্ট করার অনুমতি দেয় একটি ওয়েব ব্রাউজার যেমন Chrome বা Firefox থেকে। একটি GET রিকোয়েস্ট একটি সার্ভারের এন্ডপয়েন্টে হিট করে তারপর একটি রেসপন্স রিটার্ন করে সে এন্ডপয়েন্ট থেকে ডেটাসহ যাতে আপনি এটি পড়তে পারেন।
রিকোয়েস্টের প্রকার
GET HTTP রিকোয়েস্ট সার্ভারে করা যাওয়া রিকোয়েস্টের প্রকারের শুধু একটি। অন্যান্য প্রকারের রিকোয়েস্ট হল POST, PUT, এবং DELETE। এই রিকোয়েস্টগুলো একটি CRUD অ্যাপ্লিকেশন বানায়। এটি হলো যেখানে আমরা Create (POST), Read (GET), Update (PUT), এবং Destroy (DELETE) করতে পারি আমাদের ডেটাবেসে ডেটা।
অতিরিক্তভাবে, আমরা থার্ড পার্টি API-গুলোর এন্ডপয়েন্টে হিট করতে পারি। API-র উপর ডিপেন্ড করে, আপনাকে শুধু নির্দিষ্ট রিকোয়েস্ট পারফর্ম করার অনুমতি থাকবে, মূলত তাদের ডেটা ইমিউটেবল রাখতে, তাই আপনি সেই রিকোয়েস্টগুলো পারফর্ম করতে পারবেন না যা ডেটা ম্যানিপুলেট করে, আপনি শুধু সেটি পড়তে পারবেন।
Fetch API কীভাবে কাজ করে?
Fetch API একটি Promise-বেসড কমিউনিকেশন সিস্টেম ব্যবহার করে। রিমাইন্ডার হিসেবে, Promises হল অ্যাসিঙ্ক্রোনাস ফাংশন যেগুলো লজিককে তার ব্লকে এনক্যাপসুলেট করে এবং একটি রেসপন্স রিটার্ন করে যা নির্ধারণ করে প্রমিস resolved হয়েছে কিনা বা rejected।
Fetch API-র ইউজাররা হিসেবে, আমাদের একতুও প্রমিস লজিক লিখতে হয় না। আমাদের শুধু এটা ব্যবহার করতে হয় একটি রিকোয়েস্ট পাঠাতে এবং Fetch API হুডের নিচে একটি প্রমিস রিটার্ন করে। এখানে বেসিক সিনট্যাক্স যাতে আমরা রেসপন্স পাই:
promise.then(response).then(json).catch(error);
প্রমিসটি হলো আসল অ্যাসিঙ্ক্রোনাস রিকোয়েস্ট। fetch() মেথড গ্লোবাল স্কোপে উপলব্ধ এবং এন্ডপয়েন্ট পাস করা হয় যাতে আমরা HTTP রিকোয়েস্ট করতে চাই।
let promise = fetch("https://swapi.dev/api/films/1");
রিকোয়েস্টের পর, আমরা অথবা প্রমিস সিনট্যাক্স ব্যবহার করতে পারি then এবং catch দিয়ে অথবা async/await ফাংশন ব্যবহার করতে পারি সার্ভারের রেসপন্স পাওয়ার জন্য।
প্রমিস সিনট্যাক্স
promise.then(response => { if (response.status !== 200) { console.log('Looks like there was a problem. Status Code: ' + response.status); return; } response.json().then(data => { console.log(data); }).catch(error => { console.log(error.message); }) })
এখানে আমরা প্রমিস নেয়া তারপর রেসপন্সের জন্য অপেক্ষা করছি। যখন আমরা একটি রেসপন্স পাই, যদি স্ট্যাটাস কোড ২০০ ছাড়া কিছু হয়, তবে আমরা আমাদের কনসোলে একটি এরর কোড লগ করি এবং ফাংশনটি টার্মিনেট করি।
অন্যথায়, রেসপন্সকে রিডেবল बनाने আমাদের ফ্রন্টএন্ড ওয়েবসাইট এটি ব্যবহার করতে পারে, আমরা এটিকে JavaScript Object Notation (JSON) অবজেক্টে পরিবর্তন করি json() মেথড দিয়ে। আমরা চাই এটি প্রথমে ইভ্যালুয়েট হয় আগের প্রমিসের আগে যাওয়ার আগে, তাই আমরা প্রমিসে একটি প্রমিস চেইন করি।
একবার এটি ইভ্যালুয়েট হলে, আমরা কনসোলে যা পাস করা হয়েছে তা লগ করে দেখতে পারি। আপনি যদি ফলো করেন, তবে আপনাকে নিচের কিছু এক্সপেক্টেড আউটপুট মিলবে:
{ title: 'A New Hope', episode_id: 4, opening_crawl: 'It is a period of civil war.\r\n' + 'Rebel spaceships, striking\r\n' + 'from a hidden base, have won\r\n' + 'their first victory against\r\n' + 'the evil Galactic Empire.\r\n' + '\r\n' + 'During the battle, Rebel\r\n' + 'spies managed to steal secret\r\n' + "plans to the Empire's\r\n" + 'ultimate weapon, the DEATH\r\n' + 'STAR, an armored space\r\n' + 'station with enough power\r\n' + 'to destroy an entire planet.\r\n' + '\r\n' + "Pursued by the Empire's\r\n" + 'sinister agents, Princess\r\n' + 'Leia races home aboard her\r\n' + 'starship, custodian of the\r\n' + 'stolen plans that can save her\r\n' + 'people and restore\r\n' + 'freedom to the galaxy....', director: 'George Lucas', producer: 'Gary Kurtz, Rick McCallum', release_date: '1977-05-25', characters: [ 'https://swapi.dev/api/people/1/', 'https://swapi.dev/api/people/2/', 'https://swapi.dev/api/people/3/', 'https://swapi.dev/api/people/4/', 'https://swapi.dev/api/people/5/', 'https://swapi.dev/api/people/6/', 'https://swapi.dev/api/people/7/', 'https://swapi.dev/api/people/8/', 'https://swapi.dev/api/people/9/', 'https://swapi.dev/api/people/10/', 'https://swapi.dev/api/people/12/', 'https://swapi.dev/api/people/13/', 'https://swapi.dev/api/people/14/', 'https://swapi.dev/api/people/15/', 'https://swapi.dev/api/people/16/', 'https://swapi.dev/api/people/18/', 'https://swapi.dev/api/people/19/', 'https://swapi.dev/api/people/81/' ], planets: [ 'https://swapi.dev/api/planets/1/', 'https://swapi.dev/api/planets/2/', 'https://swapi.dev/api/planets/3/' ], starships: [ 'https://swapi.dev/api/starships/2/', 'https://swapi.dev/api/starships/3/', 'https://swapi.dev/api/starships/5/', 'https://swapi.dev/api/starships/9/', 'https://swapi.dev/api/starships/10/', 'https://swapi.dev/api/starships/11/', 'https://swapi.dev/api/starships/12/', 'https://swapi.dev/api/starships/13/' ], vehicles: [ 'https://swapi.dev/api/vehicles/4/', 'https://swapi.dev/api/vehicles/6/', 'https://swapi.dev/api/vehicles/7/', 'https://swapi.dev/api/vehicles/8/' ], species: [ 'https://swapi.dev/api/species/1/', 'https://swapi.dev/api/species/2/', 'https://swapi.dev/api/species/3/', 'https://swapi.dev/api/species/4/', 'https://swapi.dev/api/species/5/' ], created: '2014-12-10T14:23:31.880000Z', edited: '2014-12-20T19:49:45.256000Z', url: 'https://swapi.dev/api/films/1/' }
আমরা যদি এই ইনফরমেশন ফ্রন্টএন্ডে পাই, তবে আমরা এটা ব্যবহার করতে পারি কার্ড বা টেবিল পপুলেট করতে বা যেভাবেই আমরা ডিসপ্লে করতে চাই।
Async/Await
আমরা async/await ফাংশনও ব্যবহার করতে পারি একই রেজাল্ট লগ করতে।
let getRequest = async () => { try { let fetched = await fetch("https://swapi.dev/api/films/1"); if(fetched) { let read = await fetched.json() console.log(read); return read; } } catch (error) { throw new Error(error.message); } } getRequest()
async কীওয়ার্ড বলে দেয় যে সেই ফাংশনের কিছু অংশ অ্যাসিঙ্ক্রোনাস হবে। যখন আমরা await কীওয়ার্ডে আসি, স্ক্রিপ্টের এক্সিকিউশন পজ হয় যতক্ষণ না সে লাইন কোড ইভ্যালুয়েট হয়।
এই ফাংশনে আমাদের দুটি await স্টেটমেন্ট আছে, যা প্রমিস লজিকের দুটি then() স্টেটমেন্টের সমতুল্য। এক স্টেটমেন্ট আমাদের পাস করা URL-এ ফেচিং হোন পর্যন্ত অপেক্ষা করে, এবং অন্যটি অপেক্ষা করে যতক্ষণ না ফেচড ইনফরমেশন JSON-এ পার্স হয়েছে। আমরা try/catch ব্যবহার করি যেকোনো এরর ক্যাচ করতে যদি রেসপন্স থেকে কিছু অনাসाधারন আসে।
ফাইনাল নোটস
Fetch API নোড এনভায়রনমেন্টে কাজ করার জন্য (যেমন আপনি যদি Visual Studio Code-এর মতো একটি IDE ব্যবহার করেন), আপনাকে yarn add বা npm install node-fetch করতে হবে, কারণ fetch শুধু ব্রাউজার এনভায়রনমেন্টে কাজ করে।
