এপিআই আনুন

এই কোডল্যাবটি ডেভেলপিং প্রগ্রেসিভ ওয়েব অ্যাপস প্রশিক্ষণ কোর্সের অংশ, যা Google বিকাশকারী প্রশিক্ষণ দল দ্বারা তৈরি করা হয়েছে। আপনি যদি ক্রমানুসারে কোডল্যাবগুলির মাধ্যমে কাজ করেন তবে আপনি এই কোর্সের সর্বাধিক মূল্য পাবেন।

কোর্স সম্পর্কে সম্পূর্ণ বিশদ বিবরণের জন্য, ডেভেলপিং প্রগ্রেসিভ ওয়েব অ্যাপস ওভারভিউ দেখুন ।

ভূমিকা

এই ল্যাবটি আপনাকে ফেচ এপিআই , রিসোর্স আনার জন্য একটি সহজ ইন্টারফেস এবং XMLHttpRequest API-এর উপর একটি উন্নতি ব্যবহার করে নিয়ে যায়।

আপনি কি শিখবেন

  • রিসোর্স অনুরোধ করার জন্য ফেচ এপিআই কিভাবে ব্যবহার করবেন
  • আনার সাথে কিভাবে GET, HEAD এবং POST অনুরোধ করা যায়
  • কিভাবে কাস্টম হেডার পড়তে এবং সেট করতে হয়
  • CORS এর ব্যবহার এবং সীমাবদ্ধতা

আপনি কি জানা উচিত

  • বেসিক জাভাস্ক্রিপ্ট এবং এইচটিএমএল
  • ES2015 প্রতিশ্রুতির ধারণা এবং মৌলিক সিনট্যাক্সের সাথে পরিচিতি

আপনি কি প্রয়োজন হবে

  • টার্মিনাল/শেল অ্যাক্সেস সহ কম্পিউটার
  • ইন্টারনেটের সাথে সংযোগ
  • একটি ব্রাউজার যা ফেচ সমর্থন করে
  • একজন টেক্সট এডিটর
  • নোড এবং npm

দ্রষ্টব্য: যদিও Fetch API বর্তমানে সমস্ত ব্রাউজারে সমর্থিত নয় , সেখানে একটি পলিফিল রয়েছে৷

github থেকে pwa-training-labs সংগ্রহস্থল ডাউনলোড বা ক্লোন করুন এবং প্রয়োজনে Node.js-এর LTS সংস্করণ ইনস্টল করুন।

আপনার কম্পিউটারের কমান্ড লাইন খুলুন. fetch-api-lab/app/ ডিরেক্টরিতে নেভিগেট করুন এবং একটি স্থানীয় উন্নয়ন সার্ভার শুরু করুন:

cd fetch-api-lab/app
npm install
node server.js

আপনি যেকোন সময় Ctrl-c দিয়ে সার্ভার বন্ধ করতে পারেন।

আপনার ব্রাউজার খুলুন এবং localhost:8081/ । আপনাকে অনুরোধ করার জন্য বোতাম সহ একটি পৃষ্ঠা দেখতে হবে (সেগুলি এখনও কাজ করবে না)।

দ্রষ্টব্য: যেকোনো পরিষেবা কর্মীদের নিবন্ধনমুক্ত করুন এবং লোকালহোস্টের জন্য সমস্ত পরিষেবা কর্মী ক্যাশে সাফ করুন যাতে তারা ল্যাবে হস্তক্ষেপ না করে। Chrome DevTools-এ, আপনি অ্যাপ্লিকেশন ট্যাবের ক্লিয়ার স্টোরেজ বিভাগ থেকে সাইট ডেটা সাফ করুন ক্লিক করে এটি অর্জন করতে পারেন।

আপনার পছন্দের পাঠ্য সম্পাদকে fetch-api-lab/app/ ফোল্ডারটি খুলুন। app/ ফোল্ডারটি হল যেখানে আপনি ল্যাব তৈরি করবেন।

এই ফোল্ডারে রয়েছে:

  • echo-servers/ পরীক্ষা সার্ভার চালানোর জন্য ব্যবহৃত ফাইল রয়েছে
  • examples/ নমুনা সংস্থান রয়েছে যা আমরা আনার সাথে পরীক্ষা করার জন্য ব্যবহার করি
  • js/main.js হল অ্যাপের জন্য প্রধান জাভাস্ক্রিপ্ট, এবং এখানেই আপনি আপনার সমস্ত কোড লিখবেন
  • index.html হল আমাদের নমুনা সাইট/অ্যাপ্লিকেশনের প্রধান HTML পৃষ্ঠা
  • package-lock.json এবং package.json হল আমাদের ডেভেলপমেন্ট সার্ভার এবং ইকো সার্ভার নির্ভরতার জন্য কনফিগারেশন ফাইল
  • server.js একটি নোড ডেভেলপমেন্ট সার্ভার

ফেচ এপিআই একটি অপেক্ষাকৃত সহজ ইন্টারফেস আছে. এই বিভাগটি ব্যাখ্যা করে কিভাবে ফেচ ব্যবহার করে একটি মৌলিক HTTP অনুরোধ লিখতে হয়।

একটি JSON ফাইল আনুন

js/main.js এ, অ্যাপের ফেচ JSON বোতামটি fetchJSON ফাংশনের সাথে সংযুক্ত থাকে।

examples/animals.json ফাইলের অনুরোধ করতে fetchJSON ফাংশন আপডেট করুন এবং প্রতিক্রিয়া লগ করুন:

function fetchJSON() {
  fetch('examples/animals.json')
    .then(logResult)
    .catch(logError);
}

স্ক্রিপ্টটি সংরক্ষণ করুন এবং পৃষ্ঠাটি রিফ্রেশ করুন। JSON আনতে ক্লিক করুন। কনসোল ফেচ প্রতিক্রিয়া লগ করা উচিত.

ব্যাখ্যা

এই ক্ষেত্রে examples/animals.json একটি প্যারামিটার হিসাবে আমরা যে রিসোর্সটি পুনরুদ্ধার করতে চাই তার জন্য fetch পদ্ধতিটি পাথ গ্রহণ করে। fetch একটি প্রতিশ্রুতি প্রদান করে যা একটি প্রতিক্রিয়া বস্তুর সমাধান করে। প্রতিশ্রুতি সমাধান হলে, প্রতিক্রিয়া logResult ফাংশনে পাস করা হয়। যদি প্রতিশ্রুতি প্রত্যাখ্যান করে, catch দখল করে নেয় এবং ত্রুটিটি logError ফাংশনে চলে যায়।

প্রতিক্রিয়া বস্তু একটি অনুরোধের প্রতিক্রিয়া প্রতিনিধিত্ব করে। তারা প্রতিক্রিয়া শরীর এবং এছাড়াও দরকারী বৈশিষ্ট্য এবং পদ্ধতি ধারণ করে.

অবৈধ প্রতিক্রিয়া পরীক্ষা করুন

কনসোলে লগ করা প্রতিক্রিয়া পরীক্ষা করুন। status , url , এবং ok বৈশিষ্ট্যের মানগুলি নোট করুন৷

fetchJSON এ examples/animals.json রিসোর্সকে examples/non-existent.json দিয়ে প্রতিস্থাপন করুন। আপডেট করা fetchJSON ফাংশনটি এখন দেখতে হবে:

function fetchJSON() {
  fetch('examples/non-existent.json')
    .then(logResult)
    .catch(logError);
}

স্ক্রিপ্টটি সংরক্ষণ করুন এবং পৃষ্ঠাটি রিফ্রেশ করুন। এই অস্তিত্বহীন সংস্থানটি আনার চেষ্টা করতে আবার JSON আনুন ক্লিক করুন৷

লক্ষ্য করুন যে আনা সফলভাবে সম্পন্ন হয়েছে, এবং catch ব্লক ট্রিগার করেনি। এখন নতুন প্রতিক্রিয়ার status , URL এবং ok বৈশিষ্ট্যগুলি খুঁজুন।

দুটি ফাইলের জন্য মান ভিন্ন হওয়া উচিত (আপনি কি বুঝতে পারেন কেন?)। আপনি যদি কোন কনসোল ত্রুটি পেয়ে থাকেন, তাহলে মানগুলি কি ত্রুটির প্রসঙ্গের সাথে মিলে যায়?

ব্যাখ্যা

কেন একটি ব্যর্থ প্রতিক্রিয়া catch ব্লক সক্রিয় না? এটি আনা এবং প্রতিশ্রুতির জন্য একটি গুরুত্বপূর্ণ নোট—খারাপ প্রতিক্রিয়া (যেমন 404s) এখনও সমাধান করে! একটি আনা প্রতিশ্রুতি শুধুমাত্র অনুরোধটি সম্পূর্ণ করতে অক্ষম হলেই প্রত্যাখ্যান করে, তাই আপনাকে অবশ্যই প্রতিক্রিয়াটির বৈধতা পরীক্ষা করতে হবে। আমরা পরবর্তী বিভাগে প্রতিক্রিয়া যাচাই করব।

আরো তথ্যের জন্য

প্রতিক্রিয়া বৈধতা পরীক্ষা করুন

প্রতিক্রিয়াগুলির বৈধতা পরীক্ষা করার জন্য আমাদের কোড আপডেট করতে হবে।

main.js এ, প্রতিক্রিয়া যাচাই করতে একটি ফাংশন যোগ করুন:

function validateResponse(response) {
  if (!response.ok) {
    throw Error(response.statusText);
  }
  return response;
}

তারপর নিম্নলিখিত কোড দিয়ে fetchJSON প্রতিস্থাপন করুন:

function fetchJSON() {
  fetch('examples/non-existent.json')
    .then(validateResponse)
    .then(logResult)
    .catch(logError);
}

স্ক্রিপ্টটি সংরক্ষণ করুন এবং পৃষ্ঠাটি রিফ্রেশ করুন। JSON আনতে ক্লিক করুন। কনসোল চেক করুন। এখন examples/non-existent.json এর প্রতিক্রিয়া catch ব্লককে ট্রিগার করবে।

fetchJSON ফাংশনে examples/non-existent.json প্রতিস্থাপন করুন আসল examples/animals.json দিয়ে। আপডেট করা ফাংশনটি এখন দেখতে হবে:

function fetchJSON() {
  fetch('examples/animals.json')
    .then(validateResponse)
    .then(logResult)
    .catch(logError);
}

স্ক্রিপ্টটি সংরক্ষণ করুন এবং পৃষ্ঠাটি রিফ্রেশ করুন। JSON আনতে ক্লিক করুন। আপনার দেখা উচিত যে প্রতিক্রিয়াটি আগের মতো সফলভাবে লগ করা হচ্ছে।

ব্যাখ্যা

এখন যেহেতু আমরা validateResponse চেক যোগ করেছি, খারাপ প্রতিক্রিয়া (যেমন 404s) একটি ত্রুটি নিক্ষেপ করে এবং catch দখল করে নেয়। এটি আমাদের ব্যর্থ প্রতিক্রিয়াগুলি পরিচালনা করতে দেয় এবং অপ্রত্যাশিত প্রতিক্রিয়াগুলিকে ফেচ চেইনটি প্রচার করতে বাধা দেয়।

প্রতিক্রিয়া পড়ুন

ফেচ প্রতিক্রিয়াগুলি ReadableStreams ( স্ট্রিম স্পেক ) হিসাবে উপস্থাপিত হয় এবং প্রতিক্রিয়ার মূল অংশে অ্যাক্সেস করার জন্য অবশ্যই পড়তে হবে৷ প্রতিক্রিয়া বস্তুর এটি করার জন্য পদ্ধতি আছে।

main.js এ, নিম্নলিখিত কোড সহ একটি readResponseAsJSON ফাংশন যোগ করুন:

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

তারপর নিম্নলিখিত কোড দিয়ে fetchJSON ফাংশন প্রতিস্থাপন করুন:

function fetchJSON() {
  fetch('examples/animals.json') // 1
  .then(validateResponse) // 2
  .then(readResponseAsJSON) // 3
  .then(logResult) // 4
  .catch(logError);
}

স্ক্রিপ্টটি সংরক্ষণ করুন এবং পৃষ্ঠাটি রিফ্রেশ করুন। JSON আনতে ক্লিক করুন। examples/animals.json থেকে JSON লগ করা হচ্ছে তা দেখতে কনসোলটি পরীক্ষা করুন (প্রতিক্রিয়া বস্তুর পরিবর্তে)।

ব্যাখ্যা

এর কি ঘটছে পর্যালোচনা করা যাক.

ধাপ 1. আনয়ন একটি সম্পদ, examples/animals.json কল করা হয়. আনয়ন একটি প্রতিশ্রুতি প্রদান করে যা একটি প্রতিক্রিয়া বস্তুর সমাধান করে। প্রতিশ্রুতি সমাধান হয়ে গেলে, প্রতিক্রিয়া বস্তুটি validateResponse এ পাস করা হয়।

ধাপ 2. validateResponse প্রতিক্রিয়াটি বৈধ কিনা তা পরীক্ষা করে (এটি কি 200?)। যদি এটি না হয়, একটি ত্রুটি নিক্ষেপ করা হয়, then বাকি ব্লকগুলি এড়িয়ে যায় এবং catch ব্লকটিকে ট্রিগার করে। এটি বিশেষভাবে গুরুত্বপূর্ণ। এই চেক ব্যতীত খারাপ প্রতিক্রিয়াগুলি চেইনের নীচে চলে যায় এবং পরবর্তী কোডগুলি ভেঙে দিতে পারে যা একটি বৈধ প্রতিক্রিয়া পাওয়ার উপর নির্ভর করতে পারে। প্রতিক্রিয়াটি বৈধ হলে, এটি readResponseAsJSON এ পাঠানো হয়।

ধাপ 3. readResponseAsJSON Response.json() পদ্ধতি ব্যবহার করে প্রতিক্রিয়ার মূল অংশটি পড়ে। এই পদ্ধতিটি একটি প্রতিশ্রুতি প্রদান করে যা JSON-কে সমাধান করে। এই প্রতিশ্রুতিটি সমাধান হয়ে গেলে, JSON ডেটা logResult এ পাস করা হয়। (যদি response.json() থেকে প্রতিশ্রুতি প্রত্যাখ্যান করে, catch ব্লকটি ট্রিগার করা হয়।)

ধাপ 4. অবশেষে, examples/animals.json এ মূল অনুরোধ থেকে JSON ডেটা logResult দ্বারা লগ করা হয়েছে।

আরো তথ্যের জন্য

আনয়ন JSON সীমাবদ্ধ নয়. এই উদাহরণে আমরা একটি চিত্র আনব এবং এটি পৃষ্ঠায় যুক্ত করব।

main.js এ, নিম্নলিখিত কোড সহ একটি showImage ফাংশন লিখুন:

function showImage(responseAsBlob) {
  const container = document.getElementById('img-container');
  const imgElem = document.createElement('img');
  container.appendChild(imgElem);
  const imgUrl = URL.createObjectURL(responseAsBlob);
  imgElem.src = imgUrl;
}

তারপরে একটি readResponseAsBlob ফাংশন যোগ করুন যা একটি ব্লব হিসাবে প্রতিক্রিয়াগুলি পড়ে: 

function readResponseAsBlob(response) {
  return response.blob();
}

নিম্নলিখিত কোড দিয়ে fetchImage ফাংশন আপডেট করুন: 

function fetchImage() {
  fetch('examples/fetching.jpg')
    .then(validateResponse)
    .then(readResponseAsBlob)
    .then(showImage)
    .catch(logError);
}

স্ক্রিপ্টটি সংরক্ষণ করুন এবং পৃষ্ঠাটি রিফ্রেশ করুন। ছবি আনুন ক্লিক করুন. আপনি দেখতে পাবেন একটি আরাধ্য কুকুর পৃষ্ঠায় একটি লাঠি নিয়ে আসছে (এটি একটি মজার রসিকতা!)

ব্যাখ্যা

এই উদাহরণে একটি ছবি আনা হচ্ছে, examples/fetching.jpg । ঠিক আগের অনুশীলনের মতো, প্রতিক্রিয়াটি validateResponse দিয়ে যাচাই করা হয়। প্রতিক্রিয়াটি তখন একটি ব্লব হিসাবে পড়া হয় (আগের বিভাগের মতো JSON এর পরিবর্তে)। একটি চিত্র উপাদান তৈরি করা হয় এবং পৃষ্ঠায় যুক্ত করা হয় এবং চিত্রের src বৈশিষ্ট্যটি ব্লব প্রতিনিধিত্বকারী একটি ডেটা URL-এ সেট করা হয়।

দ্রষ্টব্য: URL অবজেক্টের createObjectURL() পদ্ধতিটি Blob-এর প্রতিনিধিত্বকারী একটি ডেটা URL তৈরি করতে ব্যবহৃত হয়। এই নোট করা গুরুত্বপূর্ণ. আপনি একটি ব্লব সরাসরি একটি ছবির উৎস সেট করতে পারবেন না. ব্লবকে একটি ডেটা URL-এ রূপান্তর করতে হবে।

আরো তথ্যের জন্য

এই বিভাগটি একটি ঐচ্ছিক চ্যালেঞ্জ।

এতে fetchText ফাংশন আপডেট করুন

  1. /examples/words.txt আনুন
  2. validateResponse দিয়ে প্রতিক্রিয়া যাচাই করুন
  3. পাঠ্য হিসাবে প্রতিক্রিয়া পড়ুন (ইঙ্গিত: Response.text() দেখুন)
  4. এবং পৃষ্ঠায় পাঠ্য প্রদর্শন করুন

আপনি চূড়ান্ত পাঠ্য প্রদর্শনের জন্য একটি সহায়ক হিসাবে এই showText ফাংশন ব্যবহার করতে পারেন: 

function showText(responseAsText) {
  const message = document.getElementById('message');
  message.textContent = responseAsText;
}

স্ক্রিপ্টটি সংরক্ষণ করুন এবং পৃষ্ঠাটি রিফ্রেশ করুন। টেক্সট আনুন ক্লিক করুন. আপনি যদি fetchText সঠিকভাবে প্রয়োগ করে থাকেন, তাহলে আপনি পৃষ্ঠায় যোগ করা পাঠ্য দেখতে পাবেন।

দ্রষ্টব্য: যদিও এটি এইচটিএমএল আনার জন্য প্রলুব্ধ হতে পারে এবং innerHTML বৈশিষ্ট্য ব্যবহার করে এটি যুক্ত করতে পারে, সতর্ক থাকুন। এটি ক্রস-সাইট স্ক্রিপ্টিং আক্রমণে আপনার সাইটকে প্রকাশ করতে পারে!

আরো তথ্যের জন্য

ডিফল্টরূপে, আনয়ন GET পদ্ধতি ব্যবহার করে, যা একটি নির্দিষ্ট সংস্থান পুনরুদ্ধার করে। কিন্তু ফেচ অন্যান্য HTTP পদ্ধতি ব্যবহার করতে পারে।

একটি HEAD অনুরোধ করুন

নিম্নলিখিত কোড দিয়ে headRequest ফাংশন প্রতিস্থাপন করুন: 

function headRequest() {
  fetch('examples/words.txt', {
    method: 'HEAD'
  })
  .then(validateResponse)
  .then(readResponseAsText)
  .then(logResult)
  .catch(logError);
}

স্ক্রিপ্টটি সংরক্ষণ করুন এবং পৃষ্ঠাটি রিফ্রেশ করুন। HEAD অনুরোধে ক্লিক করুন। লক্ষ্য করুন যে লগ করা পাঠ্য বিষয়বস্তু খালি।

ব্যাখ্যা

fetch পদ্ধতি একটি দ্বিতীয় ঐচ্ছিক প্যারামিটার পেতে পারে, init । এই প্যারামিটারটি আনার অনুরোধের কনফিগারেশন সক্ষম করে, যেমন অনুরোধের পদ্ধতি , ক্যাশে মোড, শংসাপত্র এবং আরও অনেক কিছু ।

এই উদাহরণে আমরা init প্যারামিটার ব্যবহার করে ফেচ রিকোয়েস্ট মেথড HEAD এ সেট করেছি। HEAD অনুরোধগুলি GET অনুরোধের মতোই, প্রতিক্রিয়ার মূল অংশটি খালি ছাড়া। এই ধরনের অনুরোধ ব্যবহার করা যেতে পারে যখন আপনি চান একটি ফাইল সম্পর্কে মেটাডেটা কিন্তু ফাইলের সমস্ত ডেটা পরিবহন করার প্রয়োজন নেই৷

ঐচ্ছিক: একটি সম্পদের আকার খুঁজুন

ফাইলের আকার নির্ধারণের জন্য examples/words.txt জন্য ফেচ প্রতিক্রিয়ার শিরোনাম দেখুন।

প্রতিক্রিয়া headers content-length বৈশিষ্ট্য লগ করতে headRequest ফাংশন আপডেট করুন (ইঙ্গিত: শিরোনাম ডকুমেন্টেশন দেখুন এবং পদ্ধতি পান )।

আপনি কোড আপডেট করার পরে, ফাইলটি সংরক্ষণ করুন এবং পৃষ্ঠাটি রিফ্রেশ করুন। HEAD অনুরোধে ক্লিক করুন। কনসোলটি examples/words.txt এর আকার (বাইটে) লগ করা উচিত।

ব্যাখ্যা

এই উদাহরণে, HEAD পদ্ধতিটি আসলে রিসোর্স নিজেই লোড না করে একটি রিসোর্সের আকার (বাইটে) অনুরোধ করতে ব্যবহার করা হয় ( content-length হেডারে উপস্থাপিত)। অনুশীলনে এটি সম্পূর্ণ সম্পদের অনুরোধ করা উচিত কিনা তা নির্ধারণ করতে ব্যবহার করা যেতে পারে (বা এমনকি কীভাবে এটির অনুরোধ করা যায়)।

ঐচ্ছিক : অন্য পদ্ধতি ব্যবহার করে examples/words.txt এর আকার খুঁজে বের করুন এবং নিশ্চিত করুন যে এটি প্রতিক্রিয়া শিরোনামের মানের সাথে মেলে (আপনি আপনার নির্দিষ্ট অপারেটিং সিস্টেমের জন্য এটি কীভাবে করবেন তা দেখতে পারেন - কমান্ড লাইন ব্যবহার করার জন্য বোনাস পয়েন্ট!)।

আরো তথ্যের জন্য

ফেচ POST অনুরোধের সাথে ডেটাও পাঠাতে পারে।

একটি ইকো সার্ভার সেট আপ করুন

এই উদাহরণের জন্য আপনাকে একটি ইকো সার্ভার চালাতে হবে। fetch-api-lab/app/ ডিরেক্টরি থেকে নিম্নলিখিত কমান্ডটি চালান (যদি আপনার কমান্ড লাইন localhost:8081 সার্ভার দ্বারা অবরুদ্ধ থাকে, একটি নতুন কমান্ড লাইন উইন্ডো বা ট্যাব খুলুন): 

node echo-servers/cors-server.js

এই কমান্ডটি localhost:5000/ -এ একটি সাধারণ সার্ভার শুরু করে যা এটিতে প্রেরিত অনুরোধগুলির প্রতিধ্বনি করে।

আপনি ctrl+c দিয়ে যেকোনো সময় এই সার্ভারটি বন্ধ করতে পারেন।

একটি পোস্ট অনুরোধ করুন

নিম্নলিখিত কোড দিয়ে postRequest ফাংশন প্রতিস্থাপন করুন (নিশ্চিত করুন যে আপনি বিভাগটি 4 থেকে showText ফাংশনটি সংজ্ঞায়িত করেছেন যদি আপনি বিভাগটি সম্পূর্ণ না করেন): 

function postRequest() {
  fetch('http://localhost:5000/', {
    method: 'POST',
    body: 'name=david&message=hello'
  })
    .then(validateResponse)
    .then(readResponseAsText)
    .then(showText)
    .catch(logError);
}

স্ক্রিপ্টটি সংরক্ষণ করুন এবং পৃষ্ঠাটি রিফ্রেশ করুন। POST অনুরোধে ক্লিক করুন। পৃষ্ঠায় প্রতিধ্বনিত পাঠানো অনুরোধ পর্যবেক্ষণ করুন। এটিতে নাম এবং বার্তা থাকা উচিত (মনে রাখবেন যে আমরা এখনও ফর্ম থেকে ডেটা পাচ্ছি না)।

ব্যাখ্যা

আনয়ন সহ একটি POST অনুরোধ করতে, আমরা পদ্ধতিটি নির্দিষ্ট করতে init প্যারামিটার ব্যবহার করি (আগের বিভাগে আমরা কীভাবে HEAD পদ্ধতি সেট করেছি)। এখানেও আমরা অনুরোধের বডি সেট করি, এই ক্ষেত্রে একটি সাধারণ স্ট্রিং। বডি হল ডেটা যা আমরা পাঠাতে চাই।

দ্রষ্টব্য: উৎপাদনে, ব্যবহারকারীর সংবেদনশীল ডেটা সবসময় এনক্রিপ্ট করতে ভুলবেন না।

যখন localhost:5000/ এ POST অনুরোধ হিসাবে ডেটা পাঠানো হয়, তখন অনুরোধটি প্রতিক্রিয়া হিসাবে প্রতিধ্বনিত হয়। প্রতিক্রিয়া তারপর validateResponse দিয়ে যাচাই করা হয়, পাঠ্য হিসাবে পড়া হয় এবং পৃষ্ঠায় প্রদর্শিত হয়।

অনুশীলনে, এই সার্ভারটি একটি তৃতীয় পক্ষের API প্রতিনিধিত্ব করবে।

ঐচ্ছিক: FormData ইন্টারফেস ব্যবহার করুন

আপনি ফর্ম থেকে সহজে ডেটা দখল করতে FormData ইন্টারফেস ব্যবহার করতে পারেন।

postRequest ফাংশনে, msg-form ফর্ম উপাদান থেকে একটি নতুন FormData অবজেক্ট ইনস্ট্যান্ট করুন: 

const formData = new FormData(document.getElementById('msg-form'));

তারপর formData ভেরিয়েবল দিয়ে body প্যারামিটারের মান প্রতিস্থাপন করুন।

স্ক্রিপ্টটি সংরক্ষণ করুন এবং পৃষ্ঠাটি রিফ্রেশ করুন। পৃষ্ঠায় ফর্ম ( নাম এবং বার্তা ক্ষেত্র) পূরণ করুন, এবং তারপর অনুরোধ পোস্ট ক্লিক করুন. পৃষ্ঠায় প্রদর্শিত ফর্ম বিষয়বস্তু পর্যবেক্ষণ করুন।

ব্যাখ্যা

FormData কনস্ট্রাক্টর একটি HTML form নিতে পারে এবং একটি FormData অবজেক্ট তৈরি করতে পারে। এই অবজেক্টটি ফর্মের কী এবং মান দিয়ে পপুলেট করা হয়েছে।

আরো তথ্যের জন্য

একটি নন-কর্স ইকো সার্ভার শুরু করুন

পূর্ববর্তী ইকো সার্ভারটি বন্ধ করুন (কমান্ড লাইন থেকে ctrl+c টিপে) এবং নিম্নলিখিত কমান্ডটি চালিয়ে fetch-lab-api/app/ ডিরেক্টরি থেকে একটি নতুন ইকো সার্ভার শুরু করুন: 

node echo-servers/no-cors-server.js

এই কমান্ডটি অন্য একটি সাধারণ ইকো সার্ভার সেট আপ করে, এবার localhost:5001/ । যদিও এই সার্ভারটি ক্রস অরিজিন অনুরোধ গ্রহণ করার জন্য কনফিগার করা হয়নি।

নতুন সার্ভার থেকে আনুন

এখন যেহেতু নতুন সার্ভার localhost:5001/ এ চলছে, আমরা এটিতে একটি আনার অনুরোধ পাঠাতে পারি।

localhost:5001/ এর পরিবর্তে localhost:5000/ থেকে আনার জন্য postRequest ফাংশন আপডেট করুন। আপনি কোড আপডেট করার পরে, ফাইলটি সংরক্ষণ করুন, পৃষ্ঠাটি রিফ্রেশ করুন এবং তারপরে POST Request এ ক্লিক করুন।

আপনার কনসোলে একটি ত্রুটি পাওয়া উচিত যা নির্দেশ করে যে ক্রস-অরিজিন অনুরোধটি ব্লক করা হয়েছে কারণ CORS Access-Control-Allow-Origin হেডারটি অনুপস্থিত।

postRequest ফাংশনে fetch আপডেট করুন নিম্নলিখিত কোডের সাথে, যা নো-কর্স মোড ব্যবহার করে (যেমন ত্রুটি লগ পরামর্শ দেয়), এবং কলগুলিকে validateResponse জন্য এবং readResponseAsText (নীচে ব্যাখ্যা দেখুন): 

function postRequest() {
  const formData = new FormData(document.getElementById('msg-form'));
  fetch('http://localhost:5001/', {
    method: 'POST',
    body: formData,
    mode: 'no-cors'
  })
    .then(logResult)
    .catch(logError);
}

স্ক্রিপ্টটি সংরক্ষণ করুন এবং পৃষ্ঠাটি রিফ্রেশ করুন। তারপর বার্তা ফর্মটি পূরণ করুন এবং POST Request এ ক্লিক করুন।

কনসোলে লগ ইন করা প্রতিক্রিয়া বস্তুটি পর্যবেক্ষণ করুন।

ব্যাখ্যা

আনুন (এবং XMLHttpRequest) একই-অরিজিন নীতি অনুসরণ করুন। এর মানে হল যে ব্রাউজারগুলি স্ক্রিপ্টগুলির মধ্যে থেকে ক্রস-অরিজিন HTTP অনুরোধগুলিকে সীমাবদ্ধ করে। একটি ক্রস-অরিজিন অনুরোধ ঘটে যখন একটি ডোমেন (উদাহরণস্বরূপ http://foo.com/ ) একটি পৃথক ডোমেন থেকে একটি সংস্থানের অনুরোধ করে (উদাহরণস্বরূপ http://bar.com/ )।

দ্রষ্টব্য: ক্রস-অরিজিন অনুরোধ বিধিনিষেধ প্রায়ই বিভ্রান্তির একটি বিন্দু। ইমেজ, স্টাইলশীট এবং স্ক্রিপ্টের মতো অনেক সংস্থান ডোমেন জুড়ে আনা হয় (যেমন, ক্রস-অরিজিন)। যাইহোক, এগুলি একই-উৎস নীতির ব্যতিক্রম। ক্রস-অরিজিন অনুরোধগুলি এখনও স্ক্রিপ্টের মধ্যে থেকে সীমাবদ্ধ।

যেহেতু আমাদের অ্যাপের সার্ভারের দুটি ইকো সার্ভারের চেয়ে আলাদা পোর্ট নম্বর রয়েছে, তাই ইকো সার্ভারের যেকোনো একটির অনুরোধ ক্রস-অরিজিন বলে বিবেচিত হয়। প্রথম ইকো সার্ভার, যাইহোক, localhost:5000/ এ চলমান, CORS সমর্থন করার জন্য কনফিগার করা হয়েছে (আপনি echo-servers/cors-server.js খুলতে পারেন এবং কনফিগারেশন পরীক্ষা করতে পারেন)। নতুন ইকো সার্ভার, localhost:5001/ , নয় (যার কারণে আমরা একটি ত্রুটি পেয়েছি)।

mode: no-cors একটি অস্বচ্ছ প্রতিক্রিয়া আনার অনুমতি দেয়। এটি ব্যবহারকে একটি প্রতিক্রিয়া পেতে অনুমতি দেয়, কিন্তু জাভাস্ক্রিপ্টের সাথে প্রতিক্রিয়া অ্যাক্সেস করতে বাধা দেয় (যে কারণে আমরা validateResponse , readResponseAsText , বা showResponse ব্যবহার করতে পারি না)। প্রতিক্রিয়া এখনও অন্যান্য API দ্বারা গ্রাস করা যেতে পারে বা একটি পরিষেবা কর্মী দ্বারা ক্যাশে করা যেতে পারে।

অনুরোধ শিরোনাম পরিবর্তন করুন

আনয়ন অনুরোধ শিরোনাম পরিবর্তন সমর্থন করে। localhost:5001 (কোনও CORS) ইকো সার্ভার বন্ধ করুন এবং বিভাগ 6 থেকে localhost:5000 (CORS) ইকো সার্ভার পুনরায় চালু করুন: 

node echo-servers/cors-server.js

postRequest ফাংশনের পূর্ববর্তী সংস্করণটি পুনরুদ্ধার করুন যা localhost:5000/ : 

function postRequest() {
  const formData = new FormData(document.getElementById('msg-form'));
  fetch('http://localhost:5000/', {
    method: 'POST',
    body: formData
  })
    .then(validateResponse)
    .then(readResponseAsText)
    .then(showText)
    .catch(logError);
}

এখন শিরোনাম ইন্টারফেস ব্যবহার করে postRequest ফাংশনের ভিতরে একটি হেডার অবজেক্ট তৈরি করুন যাকে messageHeaders বলা হয় যাতে Content-Type হেডারের সমান application/json ।

তারপর init অবজেক্টের headers বৈশিষ্ট্যকে messageHeaders ভেরিয়েবল হিসাবে সেট করুন।

একটি স্ট্রিংফাইড JSON অবজেক্ট হতে body প্রোপার্টি আপডেট করুন, যেমন: 

JSON.stringify({ lab: 'fetch', status: 'fun' })

আপনি কোড আপডেট করার পরে, ফাইলটি সংরক্ষণ করুন এবং পৃষ্ঠাটি রিফ্রেশ করুন। তারপর POST Request এ ক্লিক করুন।

লক্ষ্য করুন যে প্রতিধ্বনিত অনুরোধে এখন একটি Content-Type application/json রয়েছে (যেমন এটি পূর্বে ছিল multipart/form-data বিপরীতে)।

এখন messageHeaders অবজেক্টে একটি কাস্টম Content-Length শিরোনাম যোগ করুন এবং অনুরোধটিকে একটি নির্বিচারে আকার দিন।

আপনি কোড আপডেট করার পরে, ফাইলটি সংরক্ষণ করুন, পৃষ্ঠাটি রিফ্রেশ করুন এবং POST Request এ ক্লিক করুন। লক্ষ্য করুন যে এই শিরোনামটি প্রতিধ্বনিত অনুরোধে পরিবর্তন করা হয়নি।

ব্যাখ্যা

হেডার ইন্টারফেস হেডার অবজেক্ট তৈরি এবং পরিবর্তন করতে সক্ষম করে। কিছু শিরোনাম, যেমন Content-Type আনার মাধ্যমে পরিবর্তন করা যেতে পারে। অন্যান্য, যেমন Content-Length , সুরক্ষিত এবং সংশোধন করা যাবে না (নিরাপত্তার কারণে)।

কাস্টম অনুরোধ শিরোনাম সেট করুন

আনয়ন কাস্টম হেডার সেটিং সমর্থন করে।

postRequest ফাংশনে messageHeaders অবজেক্ট থেকে Content-Length শিরোনামটি সরান। একটি নির্বিচারে মান সহ কাস্টম হেডার X-Custom যুক্ত করুন (উদাহরণস্বরূপ ' X-CUSTOM': 'hello world' )।

স্ক্রিপ্টটি সংরক্ষণ করুন, পৃষ্ঠাটি রিফ্রেশ করুন এবং তারপরে অনুরোধ POST এ ক্লিক করুন।

আপনার দেখা উচিত যে প্রতিধ্বনিত অনুরোধে আপনার যোগ করা X-Custom বৈশিষ্ট্য রয়েছে।

এখন হেডার অবজেক্টে একটি Y-Custom হেডার যোগ করুন। স্ক্রিপ্টটি সংরক্ষণ করুন, পৃষ্ঠাটি রিফ্রেশ করুন এবং POST Request এ ক্লিক করুন।

আপনি কনসোলে এর অনুরূপ একটি ত্রুটি পেতে হবে: 

Fetch API cannot load http://localhost:5000/. Request header field y-custom is not allowed by Access-Control-Allow-Headers in preflight response.

ব্যাখ্যা

ক্রস-অরিজিন অনুরোধের মতো, কাস্টম শিরোনাম অবশ্যই সার্ভার দ্বারা সমর্থিত হতে হবে যেখান থেকে সংস্থানটি অনুরোধ করা হয়েছে৷ এই উদাহরণে, আমাদের ইকো সার্ভারটি X-Custom শিরোনাম গ্রহণ করার জন্য কনফিগার করা হয়েছে কিন্তু Y-Custom শিরোনাম নয় (আপনি echo-servers/cors-server.js খুলতে পারেন এবং Access-Control-Allow-Headers নিজের জন্য দেখতে পারেন)। যে কোনো সময় একটি কাস্টম শিরোনাম সেট করা হয়, ব্রাউজার একটি প্রিফ্লাইট পরীক্ষা করে। এর মানে হল যে সার্ভার দ্বারা কোন HTTP পদ্ধতি এবং হেডার অনুমোদিত তা নির্ধারণ করতে ব্রাউজারটি প্রথমে সার্ভারে একটি বিকল্প অনুরোধ পাঠায়। যদি সার্ভারটি মূল অনুরোধের পদ্ধতি এবং শিরোনামগুলি গ্রহণ করার জন্য কনফিগার করা হয়, তবে এটি পাঠানো হয়, অন্যথায় একটি ত্রুটি নিক্ষেপ করা হয়।

আরো তথ্যের জন্য

সমাধান কোড

কাজের কোডের একটি অনুলিপি পেতে, সমাধান ফোল্ডারে নেভিগেট করুন।

আপনি এখন ফেচ API ব্যবহার করতে জানেন!

সম্পদ

PWA প্রশিক্ষণ কোর্সের সমস্ত কোডল্যাব দেখতে, কোর্সের জন্য স্বাগতম কোডল্যাব দেখুন/