Asynchronous JavaScript

Synchronous vs Asynchronous

// Synchronous (একের পর এক)
console.log("1");
console.log("2");
console.log("3");
// Output: 1, 2, 3

// Asynchronous (সমান্তরাল)
console.log("1");
setTimeout(() => console.log("2"), 1000);
console.log("3");
// Output: 1, 3, 2 (1 সেকেন্ড পরে)

setTimeout ও setInterval

// ১ বার, delay এর পরে
setTimeout(() => {
    console.log("৩ সেকেন্ড পর");
}, 3000);

// বারবার, প্রতি interval এ
let id = setInterval(() => {
    console.log("প্রতি সেকেন্ডে");
}, 1000);

// থামানো
clearInterval(id);
clearTimeout(timeoutId);

Callback (পুরনো পদ্ধতি)

function fetchData(callback) {
    setTimeout(() => {
        callback(null, "ডেটা পাওয়া গেছে");
    }, 2000);
}

fetchData((err, data) => {
    if (err) console.error(err);
    else console.log(data);
});

// Callback Hell ❌
getUser(1, (user) => {
    getPosts(user.id, (posts) => {
        getComments(posts[0].id, (comments) => {
            // ... আরও nested
        });
    });
});

Promises (ES6) ⭐

Promise হলো একটি ভবিষ্যত মানের প্রতিশ্রুতি। ৩টি state: pending, fulfilled, rejected।

const promise = new Promise((resolve, reject) => {
    setTimeout(() => {
        const success = true;
        if (success) resolve("ডেটা পাওয়া গেছে");
        else reject("ভুল ঘটেছে");
    }, 2000);
});

promise
    .then(data => console.log(data))      // success
    .catch(err => console.error(err))      // error
    .finally(() => console.log("শেষ"));    // সবসময়

// Chaining
fetch("/api/user")
    .then(res => res.json())
    .then(user => fetch(`/api/posts/${user.id}`))
    .then(res => res.json())
    .then(posts => console.log(posts))
    .catch(err => console.error(err));

async/await (ES2017) ⭐⭐

Promise-এর জন্য সিনট্যাক্টিক সুগার — সিঙ্ক্রোনাস কোডের মতো দেখায়।

async function loadUser() {
    try {
        const res = await fetch("/api/user");
        const user = await res.json();

        const postsRes = await fetch(`/api/posts/${user.id}`);
        const posts = await postsRes.json();

        console.log(user, posts);
        return { user, posts };
    } catch (err) {
        console.error("ভুল:", err);
    }
}

loadUser().then(data => console.log(data));

// Arrow function version
const loadData = async () => {
    const res = await fetch("/api/data");
    return await res.json();
};

Promise.all / allSettled / race

// সবগুলো success হলে তবেই
const [user, posts, comments] = await Promise.all([
    fetch("/user").then(r => r.json()),
    fetch("/posts").then(r => r.json()),
    fetch("/comments").then(r => r.json())
]);

// কিছু fail হলেও সব wait
const results = await Promise.allSettled([p1, p2, p3]);

// যেটা আগে শেষ হয়
const fastest = await Promise.race([p1, p2]);