JavaScript异步编程指南：回调函数、Promise及async/await实战解析

前言

设想所有代码必须严格顺序执行，每个函数需等待前序函数完成，程序运行将极度缓慢，且无法充分利用计算机硬件性能。

此时，JavaScript 的异步编程机制提供了优化可能。

那么，何为异步？如何构建异步逻辑？存在哪些不同的异步模式？下文将围绕上述问题展开探讨。

异步的概念

异步意味着在特定请求处理结束前，程序可继续执行其他操作，无需等待该请求完成即可执行后续代码。

简言之，异步编程在发送请求后立即返回响应，无需等待结果；同步编程则需等待请求完成后才能进行下一步。

举例而言，下载大文件时，同步模式需等待下载完成才进行后续操作；而异步模式允许边下载边处理，从而减少等待时间。

异步编程的实现方式

实现异步编程有多种途径，常见方式包括回调函数、Promise 以及 async/await。

回调函数

回调函数是最早出现的异步实现方式之一，通常指定一个函数作为参数，并在异步操作完成后将结果传递给该函数。

例如，可通过以下方式使用回调函数获取 api 数据：

function getData(callback) {
  $.get('/api/data', function(data) {
    callback(data);
  });
}

在该代码中，我们使用了 jQuery 的 $.get 方法发送请求，并在成功的时候使用传递的回调函数返回数据。当接收到数据后，回调函数被执行并把数据传递给它。

尽管回调函数简单有效，但易导致回调地狱，因处理程序需相互嵌套，使代码难以阅读和维护。

Promise

Promise 是 ES6 中引入的一种新型异步编程模式，通过链式调用 then 方法，每一步都返回一个 Promise 对象，从而避免了回调地狱的问题。

假设我们需要通过 Promise 请求 api 获取数据，代码示例如下：

function getData() {
  return new Promise(function(resolve, reject) {
    $.get('/api/data', function(data) {
      resolve(data);
    });
  });
}

在这个示例中，我们定义了一个 getData 函数来获取数据，并使用 Promise 包裹了它。如果我们需要进一步处理返回的数据，可以通过链式调用 then 方法来处理。

例如：

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

尽管 Promise 已解决回调地狱问题，但仍有限制：首先需手动创建 Promise 对象，导致代码冗长；其次，在较老浏览器中，Promise 兼容性不佳，尤其在 IE 等浏览器中。

async/await

async/await是 ES8 中引入的异步编程模式，本质上基于 Promise。async 表示该函数返回一个 Promise 对象，而 await 关键词用于等待 Promise 对象的结果。

在使用 async/await 编写异步代码时，无需手动创建和管理 Promise 对象，而是通过 async 关键字将其转换为异步函数。以下是一个简单的例子：

async function getData() {
  const data = await $.get('/api/data');
  return data;
}

在这个例子中，我们使用了 async/await 来等待 api 请求完成后获取数据。await $get('/api/data') 这行代码会阻塞代码执行，直到请求返回数据才会继续执行接下来的代码。

虽然 async/await 更简洁，但仍依赖 Promise，无法解决早期浏览器兼容性问题。此外，若错误处理不当，async/await 可能使应用混乱且难以维护，使用时需注意错误处理。

其他异步模式

除上述常见的回调函数、Promise 和 async/await 外，还有其他一些实现异步编程的方式，例如事件监听、发布/订阅模式、流式操作等。这里我们稍微介绍一下事件监听和发布/订阅模式。

事件监听

在 JavaScript 中，可使用 addEventListener 绑定事件处理程序。当事件发生时，自动调用相应处理程序。

例如：

const button = document.querySelector('button');
function handleClick() {
  console.log('Button has been clicked');
}
button.addEventListener('click', handleClick);

在这个例子中，我们通过 addEventListener 方法将 handleClick 函数添加为按钮的 click 事件的处理程序。每当按钮被点击时，handleClick 函数就会被调用。

发布/订阅模式

发布/订阅模式，也称为观察者模式，是一种常见异步编程模式。在该模式中，订阅者可注册对特定事件的监听，事件发生时，发布者通知所有已注册订阅者执行相应操作。

在 JavaScript 中，可使用 EventEmitter 类实现此模式。以下是一个简单的例子：

const EventEmitter = require('events');
class MyEmitter extends EventEmitter {}
const myEmitter = new MyEmitter();
myEmitter.on('event', () => {
  console.log('an event occurred!');
});
myEmitter.emit('event');

在这个例子中，我们通过创建一个 MyEmitter 类来扩展 EventEmitter，并在其上继续添加事件和监听器。当 myEmitter.emit 方法被调用时，我们的回调函数就会被执行。

结论

在 JavaScript 中，异步编程技术是高效利用计算机资源和提高代码性能的关键。了解不同的异步编程模式和实现方式对于开发人员来说非常重要。

回调函数是最早出现的实现异步编程的方式之一，然而它易导致代码的深层次嵌套，后来 Promise 通过链式调用方法让代码变得更加整洁，而 async/await 更是通过将代码转换为异步函数，简化了异步代码的编写。

除此之外，还有事件监听、发布/订阅等异步编程模式可以使用。不同的场景和需求需要采用不同的异步编程技术，排查异步回调地狱以获得更好的可读性和可维护性。

以上就是JavaScript异步编程的干货知识点分享的详细内容，更多关于JavaScript异步编程的资料请关注本站其它相关文章！

JavaScript异步编程核心模式：回调、Promise与async/await详解

前言