• Callbacks: the earliest form of asynchronous programming
• Promises: resolve / reject, .then(), .catch(), .finally()
• async/await: syntax sugar for Promises, making async logic more readable
• Event Loop: macrotask (task queue) vs. microtask (Promise queue)

Promise

let myPromise = new Promise((resolve, reject) => {
  setTimeout(() => resolve("Success!"), 1000);
});
myPromise.then(result => console.log(result));

• .then() Always Returns a Promise
• Promise.race()
• Promise.all()

async/await

const fetchData = async () => {
  try {
    const response = await fetch('<https://jsonplaceholder.typicode.com/todos/1>');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Error:', error);
  }
};

• async Functions Always Return a Promise
  • The return value becomes the resolved value of the Promise.
  • Throwing an error (throw new Error()) makes the Promise reject with that error.
• Using await to Resolve a Promise

Where to use await

• Inside an async function
• At the top level of a module

Event Loop

JS 的异步机制，理解 setTimeout、Promise 和 async/await 的执行顺序

console.log("Script start");
setTimeout(() => console.log("setTimeout"), 0);
Promise.resolve().then(() => console.log("Promise resolved"));
console.log("Script end");

// Script start
// Script end
// Promise resolved
// setTimeout