fetch() সম্পর্কে প্রাথমিক তথ্য

fetch() আপনাকে XMLHttpRequest (XHR)-এর মতো নেটওয়ার্ক রিকোয়েস্ট করতে দেয়। প্রধান পার্থক্য হল, Fetch API-তে Promises ব্যবহার করা হয়, যার API অনেক সহজ এবং XMLHttpRequest API-তে জটিল কলব্যাক এড়াতে সাহায্য করে।

আপনি আগে কখনও Promises ব্যবহার না করে থাকলে, জাভাস্ক্রিপ্ট Promises-এর ভূমিকা দেখুন।

বেসিক ফেচ অনুরোধ

এখানে একটি উদাহরণ দেওয়া হল যা প্রথমে XMLHttpRequest এবং পরে fetch দিয়ে প্রয়োগ করা হয়েছে। আমরা একটি URL-এর জন্য অনুরোধ করতে, উত্তর পেতে এবং JSON হিসেবে এটি পার্স করতে চাই।

XMLHttpRequest

সাফল্য ও ত্রুটি সংক্রান্ত কেস ম্যানেজ করতে XMLHttpRequest-এর দুটি লিসনার প্রয়োজন এবং open() ও send()-এ কল করতে হবে। MDN ডকুমেন্ট থেকে উদাহরণ।

function reqListener () {
  const data = JSON.parse(this.responseText);
  console.log(data);
}

function reqError (err) {
  console.log('Fetch Error :-S', err);
}

const oReq = new XMLHttpRequest();
oReq.onload = reqListener;
oReq.onerror = reqError;
oReq.open('get', './api/some.json', true);
oReq.send();

নিয়ে আসুন

আমাদের ফেচ করার অনুরোধটি এইরকম দেখতে হয়:

fetch('./api/some.json')
  .then(response => {
    if (response.status !== 200) {
      console.log(`Looks like there was a problem. Status Code: ${response.status}`);

      return;
    }

    // Examine the text in the response
    response.json().then(function(data) {
      console.log(data);
    });
  })
  .catch(err => {
    console.log('Fetch Error :-S', err);
  });

XHR উদাহরণের মতো একই কাজ করতে fetch() অনুরোধের জন্য শুধুমাত্র একটি কলের প্রয়োজন। প্রতিক্রিয়া প্রসেস করতে, আমরা প্রথমে চেক করি যে প্রতিক্রিয়া স্ট্যাটাস ২০০ কিনা, তারপর JSON হিসেবে প্রতিক্রিয়া পার্স করি। fetch() অনুরোধের উত্তরে একটি Stream অবজেক্ট পাওয়া যায়, যার অর্থ হল json() মেথড কল করার পরে একটি Promise রিটার্ন করা হয়। স্ট্রিমটি অ্যাসিঙ্ক্রোনাসভাবে ঘটে।

উত্তরের মেটাডেটা

আগের উদাহরণে Response অবজেক্টের স্ট্যাটাস এবং JSON হিসেবে কীভাবে রেসপন্স পার্স করতে হয় তা দেখানো হয়েছে। আপনি অ্যাক্সেস করতে চাইতে পারেন এমন অন্যান্য মেটাডেটা, যেমন হেডার, কীভাবে ম্যানেজ করবেন তা এখানে দেওয়া হল:

fetch('users.json').then(response => {
  console.log(response.headers.get('Content-Type'));
  console.log(response.headers.get('Date'));

  console.log(response.status);
  console.log(response.statusText);
  console.log(response.type);
  console.log(response.url);
});

উত্তরের ধরন

আমরা ফেচ করার অনুরোধ করলে, উত্তরে response.type "basic", "cors" অথবা "opaque" দেওয়া হবে। এই types দেখায় যে রিসোর্স কোথা থেকে এসেছে এবং আপনি এগুলি ব্যবহার করে নির্ধারণ করতে পারবেন যে রেসপন্স অবজেক্টের সাথে কী করা হবে।

ব্রাউজার একই অরিজিনে কোনও রিসোর্সের জন্য অনুরোধ করলে, উত্তরে একটি basic টাইপ থাকে এবং আপনি উত্তর থেকে কী দেখতে পারবেন তার উপর বিধিনিষেধ থাকে।

অন্য অরিজিনে কোনও রিসোর্সের জন্য অনুরোধ করা হলে এবং সেই অরিজিন CORs হেডার ফিরিয়ে দিলে, ধরনটি cors হয়। cors উত্তরগুলি basic উত্তরের মতোই, তবে আপনি যে হেডারগুলি দেখতে পারেন সেগুলি Cache-Control, Content-Language, Content-Type, Expires, Last-Modified এবং Pragma-এ সীমাবদ্ধ করে।

opaque রেসপন্স অন্য অরিজিন থেকে আসে যা CORS হেডার ফেরত দেয় না। অস্বচ্ছ উত্তরের ক্ষেত্রে আমরা ফেরত পাঠানো ডেটা পড়তে বা অনুরোধের স্ট্যাটাস দেখতে পারব না, অর্থাৎ অনুরোধটি সফল হয়েছে কিনা তা আপনি চেক করতে পারবেন না।

আপনি ফেচ অনুরোধের জন্য একটি মোড নির্ধারণ করতে পারেন যাতে শুধুমাত্র নির্দিষ্ট অনুরোধের ধরন সমাধান হয়। আপনি নিম্নলিখিত মোড সেট করতে পারবেন:

• same-origin শুধুমাত্র একই অরিজিনে অ্যাসেটের জন্য অনুরোধের ক্ষেত্রে কাজ করে এবং অন্য সব অনুরোধ বাতিল করে দেয়।
• cors একই অরিজিন এবং অন্যান্য অরিজিনে অ্যাসেটের জন্য অনুরোধ করার অনুমতি দেয় যা উপযুক্ত CORs হেডার ফিরিয়ে দেয়।
• কোনও অনুরোধ করার আগে cors-with-forced-preflight প্রিফ্লাইট চেক করে।
• no-cors-এর উদ্দেশ্য হল CORS হেডার নেই এমন অন্যান্য অরিজিনে অনুরোধ করা এবং opaque উত্তর পাওয়া, কিন্তু যেমন বলা হয়েছে , এই মুহূর্তে উইন্ডো গ্লোবাল স্কোপে এটি সম্ভব নয়।

মোড নির্ধারণ করতে, fetch অনুরোধে দ্বিতীয় প্যারামিটার হিসেবে একটি বিকল্প অবজেক্ট যোগ করুন এবং সেই অবজেক্টে মোড নির্ধারণ করুন:

fetch('http://some-site.com/cors-enabled/some.json', {mode: 'cors'})
  .then(response => response.text())
  .then(text => {
    console.log('Request successful', text);
  })
  .catch(error => {
    log('Request failed', error)
  });

প্রমিস চেইনিং

প্রমিজের অন্যতম সেরা ফিচার হল, এগুলিকে একসাথে চেইন করার ক্ষমতা। fetch()-এর জন্য, এটি আপনাকে ফেচ অনুরোধ জুড়ে লজিক শেয়ার করতে দেয়।

আপনি JSON API নিয়ে কাজ করলে, আপনাকে স্ট্যাটাস চেক করতে হবে এবং প্রতিটি উত্তরের জন্য JSON পার্স করতে হবে। আপনি স্ট্যাটাস এবং JSON পার্সিং আলাদা ফাংশনে সংজ্ঞায়িত করে আপনার কোড সহজ করতে পারেন যা প্রমিস রিটার্ন করে এবং শুধুমাত্র চূড়ান্ত ডেটা এবং ত্রুটি কেস হ্যান্ডেল করতে ফেচ রিকোয়েস্ট ব্যবহার করতে পারেন।

function status (response) {
  if (response.status >= 200 && response.status < 300) {
    return Promise.resolve(response)
  } else {
    return Promise.reject(new Error(response.statusText))
  }
}

function json (response) {
  return response.json()
}

fetch('users.json')
  .then(status)
  .then(json)
  .then(data => {
    console.log('Request succeeded with JSON response', data);
  }).catch(error => {
    console.log('Request failed', error);
  });

এই উদাহরণে একটি status ফাংশন সংজ্ঞায়িত করা হয়েছে যা response.status চেক করে এবং একটি সমাধান করা প্রমিস Promise.resolve() হিসেবে অথবা একটি প্রত্যাখ্যাত প্রমিস Promise.reject() হিসেবে রিটার্ন করে। এটি হল fetch() চেনে কল করা প্রথম মেথড।

Promise সমাধান হয়ে গেলে, স্ক্রিপ্ট json() মেথড কল করে, যা response.json() কল থেকে দ্বিতীয় Promise ফিরিয়ে দেয় এবং পার্স করা JSON সহ অবজেক্ট তৈরি করে। পার্সিং ব্যর্থ হলে, Promise বাতিল করা হয় এবং ক্যাচ স্টেটমেন্ট কার্যকর হয়।

এই স্ট্রাকচার আপনাকে সব ফেচ অনুরোধ জুড়ে লজিক শেয়ার করতে দেয়, যার ফলে কোড সহজে বজায় রাখা, পড়া ও পরীক্ষা করা যায়।

পোস্ট রিকোয়েস্ট

কখনও কখনও কোনও ওয়েব অ্যাপকে POST পদ্ধতির মাধ্যমে API কল করতে হয় এবং অনুরোধের বডিতে কিছু প্যারামিটার অন্তর্ভুক্ত করতে হয়। এটি করতে, fetch() বিকল্পে method এবং body প্যারামিটার সেট করুন:

fetch(url, {
    method: 'post',
    headers: {
      "Content-type": "application/x-www-form-urlencoded; charset=UTF-8"
    },
    body: 'foo=bar&lorem=ipsum'
  })
  .then(json)
  .then(data => {
    console.log('Request succeeded with JSON response', data);
  })
  .catch(error => {
    console.log('Request failed', error);
  });

ফেচ অনুরোধের সাথে ক্রেডেনশিয়াল পাঠান

কুকির মতো ক্রেডেনশিয়াল সহ ফেচ অনুরোধ করতে, অনুরোধের credentials ভ্যালু "include"-এ সেট করুন:

fetch(url, {
  credentials: 'include'
})