JavaScript · Lesson 30 / 32 · தமிழ்

Fetch API

கருத்தைப் புரிந்துகொள்ளுங்கள். Code-ஐ மாற்றி இயக்குங்கள். ஒரு சிறிய பயிற்சியால் கற்றதை உறுதி செய்யுங்கள்.

Detailed notesRunnable JavaScriptPractice + answer

மூலப் பாட விளக்கங்கள் தமிழில் உள்ளன. கூடுதல் concept, practice மற்றும் answer notes ஆங்கிலத்தில் உள்ளன.

01 / Understand

முக்கியக் கருத்து

fetch returns a promise for a Response. Check response.ok before reading the body. This example fetches a local data URL, so it demonstrates the response flow without depending on a third-party endpoint.

Learning goal: Explain what the example does, predict its result, and change it to solve the practice task.

02 / Explore

விரிவான விளக்கங்கள்

Fetch API என்னன்னு தெரியுமா?

Fetch API browser-ல HTTP requests பண்ண modern, promise-based way. பழைய XMLHttpRequest (XHR)-ஐ replace பண்ணது.

GET Request

JavaScript reference fragmentCODE

async function getPost(id) {
  const response = await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`);

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

  return await response.json();
}

const post = await getPost(1);
console.log(post.title);

POST, PUT, DELETE Requests

JavaScript reference fragmentCODE

// POST — புதுசா create பண்ண
async function createPost(data) {
  const response = await fetch("https://jsonplaceholder.typicode.com/posts", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(data)
  });
  return response.json();
}

// DELETE
async function deletePost(id) {
  const res = await fetch(`/api/posts/${id}`, { method: "DELETE" });
  return res.ok;
}

Response Reading

JavaScript reference fragmentCODE

const response = await fetch("/api/data", {
  signal: AbortSignal.timeout(5000) // 5s-ல cancel
});

console.log(response.status);     // 200
console.log(response.ok);         // true (200-299)

// Body read பண்றது (ஒரே ஒரு தரம் மட்டும்)
const json = await response.json();
const text = await response.text();
const blob = await response.blob();

03 / Read & predict

முழுமையான உதாரணம்

Run this complete index.js program in the JavaScript console editor below. The earlier reference fragments may need a browser page or other surrounding setup.

index.js · complete exampleCODE

async function loadCourse() {
  const url = "data:application/json," + encodeURIComponent(JSON.stringify({title:"JavaScript", lessons:32}));
  const response = await fetch(url);
  if (!response.ok) throw new Error("HTTP " + response.status);
  const course = await response.json();
  console.log(course.title);
  console.log(course.lessons);
}
loadCourse().catch(error => console.log(error.message));

எதிர்பார்க்கும் முடிவைப் பாருங்கள்

JavaScript
32

04 / Experiment

மாற்றி இயக்கிப் பாருங்கள்

Load the example, change a value, predict the output, and run it again. Use the console output to check your reasoning.

Open editor ↗

Editor load ஆனதும் code-ஐ ஏற்றி Run அழுத்துங்கள்.

OneCompiler என்ற இலவச வெளிப்புற சேவை code-ஐ இயக்குகிறது. Run செய்யும் code அங்கு அனுப்பப்படும். தனிப்பட்ட தகவல்கள் அல்லது secret keys உள்ளிட வேண்டாம்.

05 / Your turn

சிறிய பயிற்சி

Practice challenge

Change lessons to 40 in the data passed to JSON.stringify.

விடை மற்றும் விளக்கம்

The second output becomes 40. For a real API, replace the URL and retain the status check and error handling.

தவிர்க்க வேண்டிய தவறு: fetch does not reject just because an HTTP response has status 404 or 500. Cross-origin requests can also be blocked by CORS; never put secret API keys in browser code.

அடுத்த பாடத்திற்குத் தயாரா?

Explain the example in your own words.
Complete the challenge before revealing its answer.
Describe the common mistake and how to avoid it.