ডেভেলপারদের প্রায়ই তাদের নিজস্ব API বা তৃতীয় পক্ষের API থেকে ডেটা পুনরুদ্ধার করতে হয়। এই নিবন্ধটি একটি এন্ডপয়েন্ট থেকে কিছু ডেটা পেতে আপনার ব্রাউজারের ফেচ API ব্যবহার করার বিষয়ে কথা বলে৷
৷ফেচ এপিআই কি?
Fetch API হল একটি ইন্টারফেস যা আমাদেরকে Chrome বা Firefox-এর মতো ওয়েব ব্রাউজার থেকে একটি সার্ভারে HTTP অনুরোধ করতে দেয়৷ একটি GET অনুরোধ একটি সার্ভারে একটি এন্ডপয়েন্টে আঘাত করে তারপর সেই এন্ডপয়েন্ট থেকে ডেটা সহ একটি প্রতিক্রিয়া প্রদান করে যাতে আপনি এটি পড়তে পারেন৷
অনুরোধের প্রকারগুলি
GET HTTP অনুরোধ হল শুধুমাত্র এক ধরনের অনুরোধ যা আপনি সার্ভারে করতে পারেন। অন্যান্য ধরনের অনুরোধগুলি হল POST, PUT, এবং DELETE৷ এই অনুরোধগুলি একটি CRUD অ্যাপ্লিকেশন তৈরি করে। এটি যেখানে আমরা আমাদের ডাটাবেসে ডেটা তৈরি (পোস্ট), পড়তে (গেইটি), আপডেট (পুট) এবং ধ্বংস (মুছে ফেলতে) পারি।
উপরন্তু, আমরা তৃতীয় পক্ষের API-এ শেষ পয়েন্টে আঘাত করতে পারি। API এর উপর নির্ভর করে, আপনাকে শুধুমাত্র নির্দিষ্ট অনুরোধগুলি সম্পাদন করার অনুমতি দেওয়া হবে, প্রধানত তাদের ডেটা অপরিবর্তনীয় রাখার জন্য, তাই আপনি সেই অনুরোধগুলি করতে পারবেন না যেগুলি ডেটা ম্যানিপুলেট করে, আপনি শুধুমাত্র এটি পড়তে সক্ষম হবেন৷
ফেচ API কিভাবে কাজ করে?
ফেচ API যোগাযোগের একটি প্রতিশ্রুতি-ভিত্তিক সিস্টেম ব্যবহার করে। একটি অনুস্মারক হিসাবে, প্রতিশ্রুতিগুলি হল অ্যাসিঙ্ক্রোনাস ফাংশন যা লজিককে তার কোডের ব্লকে অন্তর্ভুক্ত করে এবং একটি প্রতিক্রিয়া প্রদান করে যা নির্ধারণ করে যে প্রতিশ্রুতিটি সমাধান করা হয়েছে বা প্রত্যাখ্যান করা হয়েছে।
ফেচ API-এর ব্যবহারকারী হিসাবে, আমাদের আসলে প্রতিশ্রুতি যুক্তি লিখতে হবে না। আমাদের শুধুমাত্র একটি অনুরোধ পাঠানোর জন্য এটি ব্যবহার করতে হবে এবং ফেচ API হুডের অধীনে একটি প্রতিশ্রুতি প্রদান করে। এখানে মৌলিক সিনট্যাক্স রয়েছে যাতে আমরা প্রতিক্রিয়া পেতে পারি:
promise.then(response).then(json).catch(error);
প্রতিশ্রুতি হল প্রকৃত অ্যাসিঙ্ক্রোনাস অনুরোধ। fetch() মেথড গ্লোবাল স্কোপে পাওয়া যায় এবং আমরা যে HTTP অনুরোধ করতে চাই সেই এন্ডপয়েন্টটি পাস করা হয়।
81% অংশগ্রহণকারী বলেছেন যে তারা বুটক্যাম্পে যোগ দেওয়ার পরে তাদের প্রযুক্তিগত কাজের সম্ভাবনা সম্পর্কে আরও আত্মবিশ্বাসী বোধ করেছেন। আজই একটি বুটক্যাম্পের সাথে মিলিত হন৷
৷গড় বুটক্যাম্প গ্র্যাড একটি বুটক্যাম্প শুরু করা থেকে শুরু করে তাদের প্রথম চাকরি খোঁজা পর্যন্ত ক্যারিয়ারের পরিবর্তনে ছয় মাসেরও কম সময় ব্যয় করেছে।
প্রতিশ্রুতি দিতে =আনয়ন("https://swapi.dev/api/films/1"); অনুরোধের পরে, আমরা হয় তারপরের সাথে প্রতিশ্রুতি সিনট্যাক্স ব্যবহার করতে পারি এবং সার্ভারের প্রতিক্রিয়া পেতে async/await ফাংশনটি ক্যাচ বা ব্যবহার করতে পারি।
প্রতিশ্রুতি সিনট্যাক্স
promise.then(response => { if (response.status !==200) { console.log('মনে হচ্ছে একটি সমস্যা ছিল। স্ট্যাটাস কোড:' + response.status); return; } response.json ().then(data => { console.log(data); }).catch(error => { console.log(error.message); }) })
এখানে আমরা প্রতিশ্রুতি গ্রহণ করি তারপর একটি প্রতিক্রিয়ার জন্য অপেক্ষা করুন। যখন আমরা একটি প্রতিক্রিয়া পাই, যদি স্ট্যাটাস কোডটি 200 ছাড়া অন্য কিছু হয়, আমরা আমাদের কনসোলে একটি ত্রুটি কোড লগ করি এবং ফাংশনটি বন্ধ করি।
অন্যথায়, প্রতিক্রিয়া পাঠযোগ্য করতে যাতে আমাদের ফ্রন্টএন্ড ওয়েবসাইট এটি ব্যবহার করতে পারে, আমরা এটিকে json() দিয়ে JavaScript অবজেক্ট নোটেশন (JSON) অবজেক্টে পরিবর্তন করি পদ্ধতি আমরা অগ্রসর হওয়ার আগে এটিকে প্রথমে মূল্যায়ন করতে চাই, তাই আমরা পূর্ববর্তী প্রতিশ্রুতিতে একটি প্রতিশ্রুতি বজায় রাখি।
একবার এটি মূল্যায়ন হয়ে গেলে আমরা আমাদের কনসোলে এটি দেখতে যা পাস করা হয়েছিল তা লগ ইন করতে পারি। আপনি যদি অনুসরণ করেন তবে আপনার এইরকম কিছু পাওয়া উচিত:
{ শিরোনাম:'A New Hope', episode_id:4, opening_crawl:'এটি গৃহযুদ্ধের সময়।\r\n' + 'বিদ্রোহী স্পেসশিপ, স্ট্রাইকিং\r\n' + 'একটি লুকানো ঘাঁটি থেকে, তারা\r\n' + 'দুষ্ট গ্যালাকটিক সাম্রাজ্যের বিরুদ্ধে তাদের প্রথম জয় পেয়েছে।\r\n' + '\r\n' + 'যুদ্ধের সময়, বিদ্রোহী\r\n' + 'গুপ্তচররা গোপনে চুরি করতে সক্ষম হয়\r\n' + "সাম্রাজ্যের\r\n" + 'চূড়ান্ত অস্ত্র, মৃত্যু\r\n' + 'স্টার, একটি সাঁজোয়া স্থান\r\n' + 'স্টেশনের সাথে একটি সম্পূর্ণ গ্রহকে ধ্বংস করার জন্য যথেষ্ট শক্তি\r\n' + '।\r\n' + '\r\n' + "সাম্রাজ্যের দ্বারা তাড়া করা\r\n" + 'অশুভ এজেন্ট, রাজকুমারী\r\n' + 'লেয়া তার\r\n' + 'স্টারশিপ, দ্য\r\n' + 'চুরি করা পরিকল্পনার রক্ষক যা তার\r\n' + 'মানুষকে বাঁচাতে পারে এবং\r\n' + 'স্বাধীনতা পুনরুদ্ধার করতে পারে। দ্য গ্যালাক্সি....', পরিচালক:'জর্জ লুকাস', প্রযোজক:'গ্যারি কার্টজ, রিক ম্যাককালাম', মুক্তির_তারিখ:' 1977-05-25', অক্ষর:[ '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/13/' ://swapi.dev/api/people/16/', 'https://swapi.dev/api/people/18/', 'https://swapi.dev/api/people/19/', ' https://swapi.dev/api/people/81/' ], গ্রহ:[ 'https://swapi.dev/api/planets/1/', 'https://swapi.dev/api/planets/ 2/', 'https://swapi.dev/api/planets/3/' ], স্টারশিপ:[ '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/' ], যানবাহন:[ 'https://swapi.dev/api/vehicles/4/' , 'https://swapi.dev/api/vehicles/6/', 'https://swapi.dev/api/vehicles/7/', 'https://swapi.dev/api/vehicles/8/ ' ], প্রজাতি:[ '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/' ], তৈরি করা হয়েছে:'2014-12-10T14
আমরা যদি ফ্রন্টএন্ডে এই তথ্যটি পাই, তাহলে আমরা কার্ড বা টেবিল তৈরি করতে এটি ব্যবহার করতে পারি বা আমরা এটি প্রদর্শন করতে চাই।
অসিঙ্ক/অপেক্ষা করুন
আমরা একই ফলাফল লগ করতে async/await ফাংশন ব্যবহার করতে পারি।
getRequest =async () => { চেষ্টা করুন { let fetched =await fetch("https://swapi.dev/api/films/1"); if(fetched) { let read =await fetched.json() console.log(read); রিটার্ন রিড; } } ধরা (ত্রুটি) { নিক্ষেপ নতুন ত্রুটি(error.message); }} getRequest()
async কীওয়ার্ড আমাদের বলে যে ফাংশনের কিছু অংশ অ্যাসিঙ্ক্রোনাস হবে। যখন আমরা ওয়েট কীওয়ার্ডে আসি, তখন কোডের সেই লাইনটি মূল্যায়ন না হওয়া পর্যন্ত স্ক্রিপ্টের এক্সিকিউশন বিরতি দেয়।
আমাদের দুটি await আছে এই ফাংশনের বিবৃতি, দুটি then() এর সাথে তুলনীয় বিবৃতি আমরা প্রতিশ্রুতি যুক্তি ছিল. একটি বিবৃতি আমাদের পাস করা URL-এ আনার জন্য অপেক্ষা করে এবং অন্যটি JSON-এ আনা তথ্য পার্স না হওয়া পর্যন্ত অপেক্ষা করে। আমরা try/catch ব্যবহার করি প্রতিক্রিয়াগুলি থেকে অস্বাভাবিক কিছু ফিরে এলে আমরা যে কোনও ত্রুটি ধরতে পারি।
চূড়ান্ত নোট
ফেচ এপিআই নোড পরিবেশে কাজ করার জন্য (যেমন আপনি যদি ভিজ্যুয়াল স্টুডিও কোডের মতো একটি IDE ব্যবহার করেন), আপনাকে yarn add করতে হবে অথবা npm install node-fetch , যেহেতু ফেচ শুধুমাত্র ব্রাউজার পরিবেশে কাজ করে।
