Fetch API & REST APIs Cheat Sheet – Complete Guide in Hindi

Fetch API और REST APIs modern web development के important concepts हैं। जब आपको JavaScript से server पर data भेजना हो, database से information लानी हो या किसी external service के साथ काम करना हो, तब APIs की जरूरत पड़ती है।

इस Cheat Sheet में आप सीखेंगे कि REST API क्या है, Fetch API कैसे काम करती है, GET और POST requests कैसे भेजते हैं, JSON response कैसे handle करते हैं और common API errors को कैसे fix करते हैं।

Fetch API और REST API क्या हैं?#

दोनों related हैं, लेकिन इनका काम अलग-अलग है।

REST API: एक ऐसा interface जो client और server के बीच defined rules के अनुसार data exchange करने देता है।

Fetch API: JavaScript का built-in web API, जिसका उपयोग HTTP requests भेजने और server responses प्राप्त करने के लिए किया जाता है।

Simple words mein:

• REST API बताती है कि server से किस तरह interact करना है।
• Fetch API JavaScript से उस server को request भेजने का तरीका देती है।

Real-world Example

मान लीजिए आप एक shopping website बना रहे हैं।

• Products की list दिखाने के लिए frontend API से products माँगता है।
• नया order place करने के लिए frontend server को order details भेजता है।
• User profile update करने के लिए frontend API request भेजता है।

इन requests को JavaScript में Fetch API की मदद से भेजा जा सकता है।

Client और Server के बीच API कैसे काम करती है?#

एक सामान्य API request का flow इस तरह होता है:

1. User website पर कोई action करता है।
2. JavaScript API request भेजती है।
3. Server request को process करता है।
4. Server response वापस भेजता है।
5. JavaScript response को handle करके UI update करती है।

Example:

Browser
   |
   | GET /api/products
   v
API Server
   |
   | JSON Response
   v
Browser displays products

ध्यान रखें कि API response हमेशा JSON नहीं होता। API JSON, text, files या अन्य supported response formats भी दे सकती है।

REST API के Important Concepts#

Endpoint

Endpoint वह URL होता है जहाँ किसी particular resource या operation के लिए request भेजी जाती है।

Examples:

GET    /api/products
GET    /api/products/10
POST   /api/products
PATCH  /api/products/10
DELETE /api/products/10

ये illustrative endpoints हैं। Actual URL और supported methods API के design पर depend करते हैं।

Resource

Resource वह data या entity है जिसके साथ API काम करती है।

Examples:

• products — products की collection
• users — users की collection
• orders — orders की collection

HTTP Method

HTTP method बताता है कि आप resource के साथ किस प्रकार का operation करना चाहते हैं।

हर API इन methods को अपने design के अनुसार support करती है।

Request और Response

Request client द्वारा server को भेजी जाती है।

इसमें URL, method, headers और जरूरत पड़ने पर body शामिल हो सकती है।

Response server द्वारा client को वापस भेजी जाती है।

इसमें status code, headers और optional response body हो सकती है।

Fetch API का Basic Syntax#

Fetch API एक Promise return करती है। Modern JavaScript में इसे async/await के साथ use करना आसान रहता है।

async function getData() {
  const response = await fetch(
    "https://jsonplaceholder.typicode.com/posts/1"
  );

  const data = await response.json();

  console.log(data);
}

getData();

यह example एक sample API से post प्राप्त करता है।

Code को समझें

• fetch(url) — request भेजता है।
• await — Promise के settle होने का इंतजार करता है।
• response — server के response को represent करता है।
• response.json() — response body को JSON के रूप में parse करता है।
• data — parsed JavaScript object होता है।

Important: response.json() भी Promise return करता है, इसलिए उसके साथ await का उपयोग किया गया है।

GET Request – Server से Data प्राप्त करना#

GET का उपयोग आमतौर पर data पढ़ने के लिए किया जाता है।

async function getPosts() {
  try {
    const response = await fetch(
      "https://jsonplaceholder.typicode.com/posts"
    );

    if (!response.ok) {
      throw new Error(`HTTP Error: ${response.status}`);
    }

    const posts = await response.json();

    console.log(posts);
  } catch (error) {
    console.error("Failed to fetch posts:", error);
  }
}

getPosts();

इस example में:

1. API को GET request भेजी जाती है।
2. response.ok check करता है कि HTTP status success range में है या नहीं।
3. Response body को JSON में convert किया जाता है।
4. Error आने पर catch block उसे handle करता है।

याद रखें: Fetch API आमतौर पर HTTP 404 या 500 जैसे responses पर Promise reject नहीं करती। इसलिए response.ok check करना जरूरी है।

POST Request – Server पर Data भेजना#

POST का उपयोग data submit करने या नया resource create करने के लिए किया जाता है।

async function createPost() {
  const newPost = {
    title: "Learning Fetch API",
    body: "This is a sample post.",
    userId: 1
  };

  try {
    const response = await fetch(
      "https://jsonplaceholder.typicode.com/posts",
      {
        method: "POST",
        headers: {
          "Content-Type": "application/json"
        },
        body: JSON.stringify(newPost)
      }
    );

    if (!response.ok) {
      throw new Error(`HTTP Error: ${response.status}`);
    }

    const result = await response.json();

    console.log("Created post:", result);
  } catch (error) {
    console.error("Failed to create post:", error);
  }
}

createPost();

Important Points

• method: "POST" request का method set करता है।
• Content-Type: application/json बताता है कि request body JSON format में है।
• JSON.stringify(newPost) JavaScript object को JSON string में convert करता है।
• Server request को accept करे, यह उसकी API implementation पर depend करता है।

JSONPlaceholder एक testing API है। इसका POST example demo के लिए है; इसे production database में permanent data save होने का प्रमाण न समझें।

PUT और PATCH Requests#

दोनों methods का उपयोग resource update करने के लिए हो सकता है, लेकिन इनके सामान्य उद्देश्य अलग हैं।

PUT – Resource Replace करना

async function replacePost() {
  const updatedPost = {
    id: 1,
    title: "Updated Title",
    body: "Updated content",
    userId: 1
  };

  const response = await fetch(
    "https://jsonplaceholder.typicode.com/posts/1",
    {
      method: "PUT",
      headers: {
        "Content-Type": "application/json"
      },
      body: JSON.stringify(updatedPost)
    }
  );

  if (!response.ok) {
    throw new Error(`HTTP Error: ${response.status}`);
  }

  const result = await response.json();

  console.log(result);
}

PUT का सामान्य अर्थ resource को नए representation से replace करना है। किसी API का actual behavior उसके documentation से confirm करें।

PATCH – Partial Update करना

async function updatePostTitle() {
  const response = await fetch(
    "https://jsonplaceholder.typicode.com/posts/1",
    {
      method: "PATCH",
      headers: {
        "Content-Type": "application/json"
      },
      body: JSON.stringify({
        title: "New Post Title"
      })
    }
  );

  if (!response.ok) {
    throw new Error(`HTTP Error: ${response.status}`);
  }

  const result = await response.json();

  console.log(result);
}

PATCH का उपयोग resource के कुछ fields update करने के लिए किया जाता है। कौन-से fields update हो सकते हैं, यह API तय करती है।

DELETE Request – Data Delete करना#

async function deletePost() {
  try {
    const response = await fetch(
      "https://jsonplaceholder.typicode.com/posts/1",
      {
        method: "DELETE"
      }
    );

    if (!response.ok) {
      throw new Error(`HTTP Error: ${response.status}`);
    }

    console.log("Delete request successful");
  } catch (error) {
    console.error("Delete failed:", error);
  }
}

कुछ APIs DELETE request पर 204 No Content return करती हैं। ऐसे response में body नहीं होती, इसलिए response.json() call करने से error हो सकता है।

Headers और Request Body#

Headers क्या होते हैं?

Headers request या response के बारे में additional information देते हैं।

Common examples:

Example:

const response = await fetch("/api/products", {
  method: "GET",
  headers: {
    Accept: "application/json"
  }
});

हर request में सभी headers जरूरी नहीं होते।

JSON Request Body

अगर API JSON data accept करती है, तो आप इस तरह body भेज सकते हैं:

const product = {
  name: "Keyboard",
  price: 999
};

const response = await fetch("/api/products", {
  method: "POST",
  headers: {
    "Content-Type": "application/json"
  },
  body: JSON.stringify(product)
});

GET requests में सामान्यतः request body का उपयोग नहीं किया जाता। Data filter करने के लिए API अक्सर query parameters देती है।

Query Parameters के साथ Fetch#

Query parameters URL में filter, search या pagination जैसी information भेजने के लिए उपयोग किए जाते हैं।

Example URL:

/api/products?category=keyboard&page=2

JavaScript में URL को सुरक्षित तरीके से बनाने के लिए URLSearchParams use कर सकते हैं।

const params = new URLSearchParams({
  category: "keyboard",
  page: "2"
});

const response = await fetch(`/api/products?${params}`);

अगर parameter values user input से आती हैं, तो URLSearchParams उन्हें URL में सही तरीके से encode करने में मदद करता है।

HTTP Status Codes#

Server status code के माध्यम से request का result बताता है।

401 और 403 का exact behavior API implementation के अनुसार थोड़ा vary कर सकता है।

Fetch API में Error Handling#

API calls में errors अलग-अलग कारणों से आ सकते हैं:

1. Network connection fail होना।
2. Server का HTTP error response देना।
3. JSON response invalid होना।
4. Request timeout या abort होना।
5. API response expected format में न होना।

एक reusable helper बनाकर error handling को consistent रखा जा सकता है।

async function fetchJson(url, options = {}) {
  const response = await fetch(url, options);

  if (!response.ok) {
    throw new Error(`HTTP Error: ${response.status}`);
  }

  if (response.status === 204) {
    return null;
  }

  return response.json();
}

async function loadPosts() {
  try {
    const posts = await fetchJson(
      "https://jsonplaceholder.typicode.com/posts"
    );

    console.log(posts);
  } catch (error) {
    console.error("API request failed:", error);
  }
}

loadPosts();

यह helper HTTP errors और empty 204 responses को handle करता है। अगर server invalid JSON भेजता है, तो response.json() reject हो सकता है और error caller तक पहुँच जाएगा।

Loading, Success और Error States#

Frontend में सिर्फ API call करना काफी नहीं है। User को यह भी पता चलना चाहिए कि data load हो रहा है, सफलतापूर्वक आ गया है या error हुआ है।

async function loadProducts() {
  console.log("Loading products...");

  try {
    const response = await fetch("/api/products");

    if (!response.ok) {
      throw new Error(`HTTP Error: ${response.status}`);
    }

    const products = await response.json();

    console.log("Products loaded:", products);
  } catch (error) {
    console.error("Could not load products:", error);
  }
}

यह एक basic example है। Actual UI में loading spinner, error message, retry option और empty state भी दिखाए जा सकते हैं।

Authentication और API Tokens#

कुछ APIs request के साथ access token मांगती हैं।

const response = await fetch("/api/profile", {
  headers: {
    Authorization: `Bearer ${accessToken}`,
    Accept: "application/json"
  }
});

यहाँ accessToken पहले से securely प्राप्त किया गया token होना चाहिए।

Security rules:

• Secret API keys को public frontend JavaScript में hardcode न करें।
• Production website पर HTTPS use करें।
• Authentication और authorization server पर validate करें।
• User input को validate करें।
• Tokens को URL query parameters में भेजने से बचें।
• Browser में stored tokens को XSS के खतरे से सुरक्षित रखने की जरूरत होती है।

Browser-based app में कौन-सा token storage approach सही है, यह app architecture और threat model पर depend करता है। Sensitive secret keys के लिए server-side proxy या backend का उपयोग करें।

CORS क्या है?#

CORS का पूरा नाम Cross-Origin Resource Sharing है।

जब browser की website किसी दूसरे origin से request करती है, तो browser CORS policy लागू कर सकता है। Origin में scheme, hostname और port शामिल होते हैं।

Example:

Frontend: https://app.example.com
API:      https://api.example.com

दोनों अलग origins हैं क्योंकि hostnames अलग हैं।

अगर API उचित CORS headers नहीं भेजती, तो browser response को frontend JavaScript के लिए block कर सकता है।

Important: CORS का समाधान सामान्यतः API server की configuration में होता है। Frontend request में कोई जादुई header जोड़कर हर CORS error ठीक नहीं किया जा सकता। CORS browser security mechanism है, authentication का replacement नहीं।

Fetch API में Common Mistakes#

1. response.json() को await नहीं करना

गलत:

const data = response.json();
console.log(data);

सही:

const data = await response.json();
console.log(data);

2. response.ok check नहीं करना

Fetch API HTTP 404 या 500 response मिलने पर भी resolved Promise दे सकती है। इसलिए status को explicitly check करें।

if (!response.ok) {
  throw new Error(`HTTP Error: ${response.status}`);
}

3. हर response को JSON मान लेना

कुछ responses में body नहीं होती, जैसे 204 No Content। कुछ APIs text या file भी return करती हैं। Response format के अनुसार उसे parse करें।

4. JSON.stringify() भूल जाना

अगर API JSON string expect करती है, तो JavaScript object को सीधे body में भेजना सही नहीं है।

body: JSON.stringify({ name: "Keyboard" })

5. Content-Type गलत होना

JSON request body भेजते समय API के अनुसार Content-Type: application/json की जरूरत हो सकती है।

6. Error को पूरी तरह ignore करना

API request fail होने पर user को meaningful message दें। जरूरत पड़ने पर retry option दें, लेकिन destructive requests को blindly retry न करें।

Fetch API और REST API में अंतर#

याद रखें: हर HTTP API जरूरी नहीं कि पूरी तरह REST architectural constraints follow करे।

Fetch API Quick Reference#

AbortController से Request Cancel करना#

कभी-कभी user page छोड़ देता है या नई search request आने पर पुरानी request cancel करनी होती है। इसके लिए AbortController use कर सकते हैं।

const controller = new AbortController();

async function loadData() {
  try {
    const response = await fetch("/api/products", {
      signal: controller.signal
    });

    if (!response.ok) {
      throw new Error(`HTTP Error: ${response.status}`);
    }

    const data = await response.json();

    console.log(data);
  } catch (error) {
    if (error.name === "AbortError") {
      console.log("Request cancelled");
    } else {
      console.error(error);
    }
  }
}

// Cancel the request when needed:
controller.abort();

यह basic example है। Real application में abort() को सही lifecycle या user action से connect करें। Request complete हो जाने के बाद cancel करने से पहले से मिले result को वापस नहीं लिया जा सकता।

Best Practices#

• API requests के लिए async/await use करें, जहाँ इससे code readable बने।
• HTTP errors के लिए response.ok check करें।
• Response body का format API documentation के अनुसार handle करें।
• Loading, success, empty और error states implement करें।
• API URLs और configuration को environment के अनुसार manage करें।
• Authentication tokens और secret keys को सुरक्षित रखें।
• User input validate करें और server-side validation भी रखें।
• Repeated requests के लिए जरूरत के अनुसार caching, debouncing या cancellation लागू करें।
• Production में network errors और API failures को log करें, लेकिन sensitive data log न करें।
• Retry logic बनाते समय idempotency और duplicate operations के risk को समझें।

Knowledge Check#

1. Fetch API का मुख्य काम क्या है?
2. REST API और Fetch API में क्या अंतर है?
3. GET और POST requests में क्या अंतर है?
4. JSON.stringify() का उपयोग क्यों करते हैं?
5. Fetch API में response.ok check करना क्यों जरूरी है?
6. 204 No Content response पर response.json() क्यों fail हो सकता है?
7. CORS error आमतौर पर कहाँ fix किया जाता है?

Practice Exercises#

Exercise 1: GET Request

JSONPlaceholder से एक post fetch करें और उसका title console में print करें।

Exercise 2: POST Request

एक object बनाएँ जिसमें title, body और userId हों। उसे POST request के जरिए testing API पर भेजें।

Exercise 3: Error Handling

किसी invalid endpoint को request भेजें। response.ok check करें और HTTP error को handle करें।

Exercise 4: Query Parameters

URLSearchParams की मदद से page=2 और category=books parameters वाला URL बनाएँ।

Exercise 5: Mini Project

एक simple webpage बनाएँ जो API से posts लाए और उन्हें list में दिखाए। इसमें loading message, error message और empty state शामिल करें।

Summary#

इस Cheat Sheet में आपने सीखा:

• REST API और Fetch API क्या हैं।
• Client-server request/response flow कैसे काम करता है।
• GET, POST, PUT, PATCH और DELETE requests कैसे भेजते हैं।
• JSON body, headers और query parameters कैसे use करते हैं।
• HTTP status codes और API errors कैसे handle करते हैं।
• CORS, authentication और security की basic बातें।
• Loading states, request cancellation और best practices।

API integration frontend development का एक महत्वपूर्ण हिस्सा है। इन concepts को छोटे projects में practice करने से React, Node.js, PHP और Symfony applications में API requests समझना आसान हो जाएगा।

आगे क्या सीखें?#

इस learning path में अगला topic Node.js Cheat Sheet है।

Suggested internal links:

• JavaScript Cheat Sheet
• JSON Cheat Sheet
• Node.js Cheat Sheet

Publish करने से पहले इन internal links के URLs verify करें और केवल published pages के links रखें.