JavaScript 异步编程和回调

编程语言中的异步性

计算机在设计上是异步的。

异步意味着事情可以独立于主程序流程发生。

在当前的消费级计算机中，每个程序都会运行一个特定的时间段，然后停止执行，让另一个程序继续执行。这个过程循环运行得非常快，以至于我们无法察觉。我们认为我们的计算机同时运行着许多程序，但这是一种错觉（除了多处理器机器）。

程序在内部使用中断，这是一种发送给处理器的信号，用于引起系统的注意。

现在我们先不讨论内部机制，只需要记住，程序是异步的，并在需要关注时暂停执行，允许计算机在此期间执行其他操作，这是正常的。当程序等待来自网络的响应时，它无法在请求完成之前停止处理器。

通常，编程语言是同步的，有些语言提供了一种在语言中或通过库来管理异步性的方法。C、Java、C#、PHP、Go、Ruby、Swift 和 Python 默认都是同步的。其中一些语言使用线程来处理异步操作，即生成一个新的进程。

JavaScript

JavaScript 默认是同步的，并且是单线程的。这意味着代码无法创建新线程并并行运行。

代码行按顺序执行，一个接一个，例如

const a = 1;
const b = 2;
const c = a * b;
console.log(c);
doSomething();

JavaScript复制到剪贴板

但是 JavaScript 出生于浏览器中，它最初的主要工作是响应用户操作，例如 onClick、onMouseOver、onChange、onSubmit 等等。它如何使用同步编程模型来做到这一点呢？

答案在于它的环境。浏览器提供了一种方法来实现这一点，它提供了一组可以处理此类功能的 API。

最近，Node.js 引入了非阻塞 I/O 环境，将此概念扩展到文件访问、网络调用等。

回调函数

你无法知道用户何时会点击按钮。因此，你为点击事件定义一个事件处理程序。这个事件处理程序接受一个函数，当事件触发时，该函数会被调用。

document.getElementById('button').addEventListener('click', () => {
  // item clicked
});

JavaScript复制到剪贴板

这就是所谓的回调函数。

回调函数是一个简单的函数，它作为值传递给另一个函数，并且只有在事件发生时才会执行。我们可以这样做是因为 JavaScript 具有一等函数，它们可以被分配给变量并传递给其他函数（称为高阶函数）。

通常将所有客户端代码包装在 window 对象上的 load 事件监听器中，该监听器仅在页面准备就绪时运行回调函数。

window.addEventListener('load', () => {
  // window loaded
  // do what you want
});

JavaScript复制到剪贴板

回调函数被广泛使用，不仅仅是在 DOM 事件中。

一个常见的例子是使用计时器。

setTimeout(() => {
  // runs after 2 seconds
}, 2000);

JavaScript复制到剪贴板

XHR 请求也接受回调函数，在本例中，通过将函数分配给一个属性，该属性将在特定事件发生时被调用（在本例中，请求的状态发生变化）。

const xhr = new XMLHttpRequest();
xhr.onreadystatechange = () => {
  if (xhr.readyState === 4) {
    xhr.status === 200 ? console.log(xhr.responseText) : console.error('error');
  }
};
xhr.open('GET', 'https://yoursite.com');
xhr.send();

JavaScript复制到剪贴板

处理回调函数中的错误

如何处理回调函数中的错误？一个非常常见的策略是使用 Node.js 采用的方法：任何回调函数中的第一个参数都是错误对象：错误优先回调函数。

如果没有错误，该对象为 null。如果有错误，它包含一些错误描述和其他信息。

const fs = require('node:fs');

fs.readFile('/file.json', (err, data) => {
  if (err) {
    // handle error
    console.log(err);
    return;
  }

  // no errors, process data
  console.log(data);
});

JavaScript复制到剪贴板

回调函数的问题

回调函数对于简单的情况非常有用！

但是，每个回调函数都会增加一层嵌套，当你有许多回调函数时，代码很快就会变得复杂。

window.addEventListener('load', () => {
  document.getElementById('button').addEventListener('click', () => {
    setTimeout(() => {
      items.forEach(item => {
        // your code here
      });
    }, 2000);
  });
});

JavaScript复制到剪贴板

这只是一个简单的 4 层代码，但我见过更多层的嵌套，这并不有趣。

我们如何解决这个问题？

回调函数的替代方案

从 ES6 开始，JavaScript 引入了几个特性，帮助我们处理不涉及使用回调函数的异步代码：Promise（ES6）和 Async/Await（ES2017）。

上一页阻塞与非阻塞概述下一页探索 JavaScript 定时器