ECMAScript 异步编程

在浏览器中，JavaScript 是单线程的，异步编程的目的之一就是避免阻塞线程。

Callback

Callback 是 JavaScript 最早的异步编程模式之一。

它将一个函数作为参数传递给另一个函数，并在异步操作完成后调用该函数。

function mainFunction(callback) {

  setTimeout(function() {
    callback("Operation complete");
  }, 1000);
}
 
function callbackFunction(result) {
  console.log("Result: " + result);
}
 
mainFunction(callbackFunction);

Generator

Generator 是一种特殊的函数，它可以在执行期间暂停和恢复，返回一个 Generator 对象。

可以使用 Generator 函数来创建迭代器的异步编程模式。

function* generator() {
  yield 1;
  yield 2;
  yield 3;
}

const gen = generator(); // "Generator { }"

console.log(gen.next().value); // 1
console.log(gen.next().value); // 2
console.log(gen.next().value); // 3

Promise

Promise 是 ES6 引入的一种异步编程模式。

Promise 是一个 JavaScript 对象，表示一个可能尚未完成的异步操作或事件。

Promise 有三种状态：pending（等待中）、fulfilled（已完成）、rejected（已拒绝）。

const myPromise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("foo");
  }, 300);
});

myPromise
  .then((value) => `${value} and bar`)
  .then((value) => `${value} and bar again`)
  .then((value) => `${value} and again`)
  .then((value) => `${value} and again`)
  .then((value) => {
    console.log(value);
  })
  .catch((err) => {
    console.error(err);
  });

async/await

async/await 是基于 Promise 的一种异步编程模式，用于简化和提高异步代码的可读性。

async 关键字用于定义一个异步函数，使其返回一个 Promise 对象

await 关键字用于等待一个 Promise 对象的完成，并返回其解决值。

function resolveAfter2Seconds() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve('resolved');
    }, 2000);
  });
}

async function asyncCall() {
  console.log('calling');
  const result = await resolveAfter2Seconds();
  console.log(result);
  // Expected output: "resolved"
}

asyncCall();