Web开发的异步解决方案

2023-01-04 01:48:00

JavaScript 异步编程演变：从回调到 Async/Await

回调函数：异步编程的基石

在 JavaScript 蓬勃发展的早期，异步编程主要依赖于回调函数。回调函数是会在另一个函数执行完毕后触发的函数。例如，我们使用回调函数实现异步图像加载：

function loadImage(url, callback) {
  const image = new Image();
  image.onload = () => callback(image);
  image.src = url;
}

loadImage('image.png', (image) => {
  document.body.appendChild(image);
});

回调函数虽能满足异步需求，但嵌套回调会使代码难以阅读和管理。

Promise：异步编程的救星

Promise 提供了一种更加优雅的解决方案。它表示一个异步操作的结果，并具有 pending、fulfilled 和 rejected 三种状态。

const loadImage = url => {
  return new Promise((resolve, reject) => {
    const image = new Image();
    image.onload = () => resolve(image);
    image.onerror = () => reject(new Error('Image could not be loaded'));
    image.src = url;
  });
};

loadImage('image.png')
  .then(image => document.body.appendChild(image))
  .catch(error => console.error(error));

Promise 链式调用使代码结构更清晰，可读性更强。

Async/Await：异步编程的终极形态

Async/Await 是 ES8 中引入的语法，进一步简化了异步编程。Async/Await 函数是一种可以暂停执行的特殊函数，直到异步操作完成。

async function loadImage(url) {
  const image = new Image();
  await image.onload;
  return image;
}

(async () => {
  const image = await loadImage('image.png');
  document.body.appendChild(image);
})();