JavaScript异步编程探索之旅：从Sync到Async/Await，步步提升，潜力无限！

前端

2024-02-24 02:33:39

JavaScript 异步编程初探

在深入Async/Await之前，我们首先需要了解什么是异步编程。

在同步编程中，程序代码会一行一行地执行，即每条语句必须等到上一条语句执行完成后才能执行。这种编程模式简单易懂，但在处理需要等待外部资源（如网络请求或文件读写）的场景时，就会遇到瓶颈。

异步编程则解决了这个问题。它允许程序在等待外部资源时继续执行其他任务，从而提高了程序的整体性能。

异步编程的演变

在JavaScript中，异步编程经历了几个阶段的演变，从早期的回调函数到Promise，再到Generator和Async/Await，每一阶段都在不断优化异步编程的开发体验和性能。

回调函数 是异步编程最基本的方式，也是最难理解和使用的。它通过在一个函数中传入另一个函数作为参数来实现异步操作。当异步操作完成后，被传入的函数会被调用。

// 使用回调函数实现异步网络请求
const makeRequest = (url, callback) => {
  const request = new XMLHttpRequest();
  request.open('GET', url);
  request.onload = () => {
    callback(request.responseText);
  };
  request.send();
};

makeRequest('https://example.com/data.json', (data) => {
  console.log(data);
});

Promise 是对回调函数的改进。它提供了一种更结构化的方式来处理异步操作。Promise是一个对象，它代表着异步操作的结果。当异步操作完成时，Promise的状态会从“pending”变为“fulfilled”或“rejected”。

// 使用Promise实现异步网络请求
const makeRequest = (url) => {
  return new Promise((resolve, reject) => {
    const request = new XMLHttpRequest();
    request.open('GET', url);
    request.onload = () => {
      resolve(request.responseText);
    };
    request.onerror = () => {
      reject(new Error('Request failed'));
    };
    request.send();
  });
};

makeRequest('https://example.com/data.json')
  .then((data) => {
    console.log(data);
  })
  .catch((error) => {
    console.error(error);
  });

Generator 是一种特殊的函数，它允许程序在暂停和恢复执行之间切换。Generator可以通过yield来暂停执行，并在稍后通过next()方法来恢复执行。

// 使用Generator实现异步网络请求
const makeRequest = function* () {
  const request = new XMLHttpRequest();
  request.open('GET', 'https://example.com/data.json');
  yield request.onload;
  return request.responseText;
};

const generator = makeRequest();
const data = yield generator.next();
console.log(data);

Async/Await的登场

Async/Await是Generator的语法糖，它使得异步编程变得更加简单和易于理解。Async/Await允许您使用async关键字将函数标记为异步函数，并在函数中使用await关键字来暂停执行，直到异步操作完成。

// 使用Async/Await实现异步网络请求
const makeRequest = async () => {
  const request = new XMLHttpRequest();
  request.open('GET', 'https://example.com/data.json');
  const response = await request.onload;
  return request.responseText;
};

makeRequest()
  .then((data) => {
    console.log(data);
  })
  .catch((error) => {
    console.error(error);
  });