JavaScript 异步加载内容：回调函数、Promise 和 async/await

JavaScript 异步加载内容：回调函数、Promise 和 async/await

在 JavaScript 中，异步加载是指在代码执行过程中，不需要等待某个操作的完成，可以同时进行其他操作。常见的异步加载方式包括使用回调函数、Promise、async/await 等。

1. 回调函数

通过将需要等待的操作封装成一个函数，并将回调函数作为参数传入，在操作完成后调用回调函数。例如：

function loadData(callback) {
  // 模拟异步加载数据
  setTimeout(function() {
    var data = 'data';
    callback(data);
  }, 1000);
}

function handleData(data) {
  console.log(data);
}

loadData(handleData);

2. Promise

Promise 是 ES6 新增的一种异步编程解决方案，可以更优雅地处理异步操作。通过 Promise 对象的 then 方法可以链式调用多个异步操作，而不需要嵌套多层回调函数。例如：

function loadData() {
  return new Promise(function(resolve, reject) {
    // 模拟异步加载数据
    setTimeout(function() {
      var data = 'data';
      resolve(data);
    }, 1000);
  });
}

loadData().then(function(data) {
  console.log(data);
});

3. async/await

async/await 是 ES7 新增的一种异步编程解决方案，基于 Promise 实现，可以更直观地编写异步代码。async 函数返回一个 Promise 对象，可以使用 await 关键字等待异步操作的完成。例如：

function loadData() {
  return new Promise(function(resolve, reject) {
    // 模拟异步加载数据
    setTimeout(function() {
      var data = 'data';
      resolve(data);
    }, 1000);
  });
}

async function getData() {
  var data = await loadData();
  console.log(data);
}

getData();

上述是常见的异步加载方式，根据具体的场景需求选择合适的方式进行异步操作。