14、JavaScript 异步编程：从回调到 Async/Await

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

1. 异步编程基础

在 JavaScript 中，异步操作是非常常见的，比如从服务器加载图像。传统上，我们可以使用回调函数来处理异步操作。例如，使用 Image 对象从服务器加载图像的示例：

function loadImage(url, callback) {
  const img = new Image();
  img.onload = function() {
    callback(null, img);
  };
  img.onerror = function() {
    callback("Unable to load the image.", null);
  };
  img.src = url;  // 开始加载图像
}

loadImage("https://example.com/image.jpg", function(error, img) {
  if (error) {
    console.error(error);
  } else {
    document.body.appendChild(img);
  }
});

在这个例子中， loadImage 函数接受图像的 URL 和一个回调函数作为参数。当图像加载完成后，回调函数会被调用。回调函数有两个参数：一个可能的错误和加载好的图像本身。

2. 使用 Promise 对象

Promise 对象是 JavaScript 中处