আনার ভূমিকা()

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

আপনি যদি আগে কখনো প্রতিশ্রুতি ব্যবহার না করে থাকেন, তাহলে JavaScript প্রতিশ্রুতির ভূমিকা দেখুন।

মৌলিক আনয়ন অনুরোধ

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

XMLHttp অনুরোধ

একটি 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);
  });

এক্সএইচআর উদাহরণের মতো একই কাজ করার জন্য fetch() অনুরোধের শুধুমাত্র একটি কল প্রয়োজন। প্রতিক্রিয়া প্রক্রিয়া করতে, আমরা প্রথমে পরীক্ষা করি যে প্রতিক্রিয়া স্থিতি 200, তারপর প্রতিক্রিয়াটিকে JSON হিসাবে পার্স করুন৷ একটি fetch() অনুরোধের প্রতিক্রিয়া হল একটি স্ট্রিম অবজেক্ট, যার মানে হল যে আমরা json() পদ্ধতিতে কল করার পরে, একটি প্রতিশ্রুতি ফেরত দেওয়া হয়। স্ট্রীম অ্যাসিঙ্ক্রোনাসভাবে ঘটে।

প্রতিক্রিয়া মেটাডেটা

আগের উদাহরণে রেসপন্স অবজেক্টের স্ট্যাটাস এবং 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);
});

প্রতিক্রিয়া প্রকার

যখন আমরা একটি আনার অনুরোধ করি, তখন প্রতিক্রিয়াটি " basic ", " cors " বা " opaque " এর একটি response.type দেওয়া হবে৷ এই 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 কোনো অনুরোধ করার আগে একটি 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() চেইনে বলা প্রথম পদ্ধতি।

যদি প্রতিশ্রুতি সমাধান হয়, তাহলে স্ক্রিপ্টটি json() পদ্ধতিতে কল করে, যা response.json() কল থেকে একটি দ্বিতীয় প্রতিশ্রুতি প্রদান করে এবং পার্স করা JSON ধারণকারী একটি বস্তু তৈরি করে। পার্সিং ব্যর্থ হলে, প্রতিশ্রুতি প্রত্যাখ্যান করা হয় এবং ক্যাচ স্টেটমেন্ট কার্যকর করা হয়।

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

পোস্ট অনুরোধ

কখনও কখনও একটি ওয়েব অ্যাপকে একটি 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'
})