Understanding API and Fetch in JavaScript (Step by Step Explanation)

API, বা Application Programming Interface, হলো দুটি অ্যাপ্লিকেশনের মধ্যে যোগাযোগের মাধ্যম। এটি একটি নির্দিষ্ট protocol ফলো করে অ্যাপ্লিকেশনগুলিকে একে অপরের সাথে ডেটা শেয়ার করতে সহায়তা করে।

আমরা জানি, JavaScript একটি ওয়েব অ্যাপ্লিকেশনে প্রাণ সঞ্চার করে। আর API হচ্ছে সেই মাধ্যম যার মাধ্যমে একটি অ্যাপ্লিকেশন অন্য একটি সার্ভারের সাথে কথা বলে।

এই লেখায় আমরা দেখবো:

• API কিভাবে কাজ করে
• JavaScript দিয়ে API কল কিভাবে করতে হয়
• fetch() আসলে কী করে
• .then() কেন ব্যবহার করি
• Promise দিয়ে asynchronous behaviour কিভাবে handle হয়

---

How API Works?

ধরুন আপনি একটি ওয়েবসাইট তৈরি করছেন যা আবহাওয়ার তথ্য দেখাবে।

আপনি সরাসরি আবহাওয়া অধিদপ্তরের database access করতে পারবেন না।
তার পরিবর্তে, আপনাকে তাদের তৈরি করা API ব্যবহার করতে হবে।

Flowটা এমন:

1. আপনার অ্যাপ্লিকেশন একটি request পাঠায়
2. সার্ভার request validate করে
3. সার্ভার একটি response পাঠায়
4. আপনার অ্যাপ্লিকেশন সেই response ব্যবহার করে UI update করে

এই তথ্য আদান-প্রদানটাই মূলত API এর কাজ।

---

JavaScript দিয়ে API Implementation

JavaScript-এ API কল করা খুব সহজ। আমরা fetch() ব্যবহার করি।

ধরি আমাদের API URL:

const url = 'https://api.example.com/weather';

এখন API call করি:

fetch(url)
  .then(response => response.json())
  .then(data => {
    console.log(data);
  });

---

এখানে আসলে কী হচ্ছে?

Step 1: fetch()

fetch(url)

এটি সার্ভারে একটি request পাঠায়।

⚠️ গুরুত্বপূর্ণ বিষয়: fetch() asynchronous।

মানে — এটি request পাঠিয়ে পরের লাইনের কোড execute করা শুরু করে দেয়।

---

Step 2: First .then()

.then(response => response.json())

সার্ভার থেকে response আসলে এটি একটি Response object দেয়।

আমরা .json() ব্যবহার করে সেটিকে JavaScript object এ convert করি।

⚠️ এটিও asynchronous।

---

Step 3: Second .then()

.then(data => {
  console.log(data);
});

এখন আমরা final JSON data পেয়ে যাই।
এখানে আমরা চাইলে:

• UI update করতে পারি
• Condition check করতে পারি
• DOM manipulate করতে পারি

---

Example: API Response Based UI Update

const url = 'https://api.example.com/weather';

fetch(url)
  .then(response => response.json())
  .then(data => {
    if (data.weather === 'sunny') {
      document.getElementById('message').innerHTML = 'আজ আকাশ পরিষ্কার!';
    } else {
      document.getElementById('message').innerHTML = 'আজ বৃষ্টি হতে পারে।';
    }
  });

এখানে কী হলো?

• request পাঠানো হলো
• response আসলো
• JSON এ convert হলো
• condition check করা হলো
• DOM update হলো

---

তাহলে .then().then() কেন?

API call asynchronous।

JavaScript একসাথে অনেক কাজ করতে পারে।
তাই আমরা .then() ব্যবহার করি —

👉 "Response পাওয়ার পর এই কাজটা করো"
👉 "JSON পাওয়ার পর এই কাজটা করো"

এভাবে asynchronous code কে controlled flow তে চালানো হয়।

---

Promise কীভাবে কাজ করছে?

fetch() একটি Promise return করে।

Promise এর তিনটি state আছে:

• Pending
• Fulfilled
• Rejected

.then() চলে যখন Promise fulfilled হয়।
.catch() ব্যবহার করা হয় error handle করার জন্য।

---

Final Thoughts

API হলো আধুনিক ওয়েব ডেভেলপমেন্টের backbone।
JavaScript-এর fetch() এবং Promise বুঝে ফেললে আপনি সহজেই:

• External data নিয়ে কাজ করতে পারবেন
• Dynamic UI তৈরি করতে পারবেন
• Real-world application বানাতে পারবেন

Asynchronous flow পরিষ্কারভাবে বুঝতে পারলেই API নিয়ে কাজ করা অনেক সহজ হয়ে যায়।

---

If this article helped you understand API & fetch more clearly, feel free to react and share your thoughts 🚀