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

Async / Await

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

Detailed notesRunnable JavaScriptPractice + answer

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

01 / Understand

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

An async function returns a promise. await pauses that function until a promise settles; it does not block the whole JavaScript runtime.

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

02 / Explore

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

Asynchronous JavaScript

JavaScript single-threaded ஆனாலும் event loop மூலம் async operations (network requests, timers) handle பண்ணும். Promises மற்றும் async/await modern async code-க்கான tools.

Promises

JavaScript reference fragmentCODE

const fetchData = new Promise((resolve, reject) => {
  setTimeout(() => {
    const success = Math.random() > 0.3;
    if (success) resolve({ data: "Hello!" });
    else reject(new Error("Network error"));
  }, 1000);
});

fetchData
  .then(result => console.log(result.data))
  .catch(err => console.error(err.message))
  .finally(() => console.log("Request complete"));

async / await

JavaScript reference fragmentCODE

// async function எப்பவும் Promise return பண்ணும்
async function getUser(id) {
  try {
    const response = await fetch(`/api/users/${id}`);
    if (!response.ok) {
      throw new Error(`HTTP error: ${response.status}`);
    }
    return await response.json();
  } catch (err) {
    console.error("Failed:", err.message);
    throw err;
  }
}

const user = await getUser(1);
console.log(user.name);

Promise Combinators

JavaScript reference fragmentCODE

// Promise.all — எல்லாமே wait பண்ணும், ஒண்ணு fail ஆனா fail
const [users, posts] = await Promise.all([fetch("/api/users"), fetch("/api/posts")]);

// Promise.allSettled — எல்லாமே wait பண்ணும், never fails
const results = await Promise.allSettled([p1, p2, p3]);

// Promise.race — முதல்ல finish ஆகுறது win
const first = await Promise.race([p1, p2, p3]);

Best practice: Failures பொருட்படுத்தாம எல்லா results-உம் வேணும்னா Promise.allSettled use பண்ணு. எல்லாமே succeed ஆகணும்னா Promise.all use பண்ணு.

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 loadProgress() {
  console.log("Loading");
  const lessons = await Promise.resolve(3);
  console.log("Completed: " + lessons);
}
loadProgress().catch(console.error);
console.log("Other work");

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

Loading
Other work
Completed: 3

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

Predict the order if the final log says "Page ready" instead.

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

Loading, then Page ready, then Completed: 3. The continuation after await runs asynchronously.

தவிர்க்க வேண்டிய தவறு: Await a promise inside try/catch when you need to handle its rejection locally. Avoid launching an async task and forgetting its errors.

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

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