JavaScript异步编程

发表于 2023-11-15 分类于前端开发

异步机制

JavaScript 中的异步机制是一种用于处理非同步操作的编程模型。JavaScript 是单线程的，这意味着它一次只能执行一个任务。但在现代 Web 开发中，有许多需要等待的操作，如网络请求、文件读写、用户输入等。为了避免阻塞主线程的执行，JavaScript 使用异步机制来处理这些操作。

以下是 JavaScript 异步机制的核心组成部分：

回调函数：回调函数是 JavaScript 中处理异步操作的基本方式。您可以传递一个函数作为参数，当异步操作完成时，该函数将被调用。例如，处理 AJAX 请求的回调函数会在数据返回时执行。
事件循环：JavaScript 运行时环境（如浏览器或 Node.js）包含一个事件循环，它等待和分发异步操作的完成。事件循环从任务队列中获取任务并执行它们，直到任务队列为空。
Promise：Promise 是一种更强大和灵活的异步编程模型，它允许您更好地管理异步操作的成功和失败情况，以及串联多个异步操作。Promise 提供了 .then() 和 .catch() 方法，使异步代码更具可读性。
async/await：async/await 是 ECMAScript 2017 引入的异步编程特性，它建立在 Promise 的基础上，提供了一种更清晰和同步式的方式来编写异步代码。async 函数返回一个 Promise，可以使用 await 来等待异步操作完成。
定时器：JavaScript 提供了 setTimeout 和 setInterval 等定时器函数，允许您在将来的某个时间点或以固定时间间隔执行代码。
事件监听：JavaScript 可以使用事件监听器来处理事件，如鼠标点击、键盘输入等。事件监听器可以异步地响应事件，并执行相应的处理函数。

JavaScript 异步机制的目标是避免阻塞主线程，以便用户界面保持响应性，并在等待的同时执行其他任务。异步编程可以在处理复杂的操作时非常有用，但也需要小心处理异步代码的顺序和错误处理，以确保代码的正确性和可维护性。

回调函数

在 JavaScript 中，回调函数是一种函数，它作为另一个函数的参数传递，并在某个特定事件发生或异步操作完成后被调用。回调函数通常用于处理异步编程、事件处理、数据请求等情况，以确保代码在适当的时候执行。

回调函数的基本思想是将某个操作的处理逻辑作为参数传递给其他函数，使得这些操作能够在需要的时候执行。以下是回调函数的一些常见用途：

处理异步操作：例如，当完成一个网络请求时，回调函数可以处理响应数据。在这种情况下，回调函数会在异步操作完成后被触发执行。
事件处理：回调函数常用于处理用户界面上的事件，如点击、鼠标悬停、键盘输入等。当事件发生时，相关的回调函数会被调用。
数据处理：回调函数可以用于对数据进行处理或转换。例如，对数组中的每个元素执行某个操作时，可以传递一个回调函数。
模块化编程：回调函数有助于将代码模块化，以便将功能分解为小块，并将这些块组合在一起，以完成更复杂的任务。

示例：

// 一个简单的异步操作，模拟从服务器获取数据
function fetchDataFromServer(callback) {
  setTimeout(function () {
    const data = "这是从服务器返回的数据";
    callback(data); // 调用回调函数并传递数据
  }, 2000);
}

// 回调函数，用于处理从服务器获取的数据
function processData(data) {
  console.log("处理数据：" + data);
}

// 调用函数，并传递回调函数
fetchDataFromServer(processData);

回调函数是 JavaScript 异步编程的重要组成部分，它允许您在需要时传递自定义逻辑，以处理不同的事件和操作。随着 JavaScript 的发展，其他异步处理机制，如 Promises 和 async/await，也变得更加流行，但回调函数仍然是一种非常常见和有用的编程模式。

定时器

setTimeout()

setTimeout 是 JavaScript 的一个内置函数，用于实现定时执行某个函数或代码块。setTimeout 允许您指定一个回调函数和一个时间延迟，然后在延迟时间之后执行这个回调函数。

以下是 setTimeout 的基本语法：

1	setTimeout(callback, delay);

callback 是要执行的函数或代码块。
delay 是延迟的时间，以毫秒为单位，指示在多久后执行回调函数。

setTimeout 不是主函数，它用于异步编程，通常用于执行在将来某个时间点的操作。当您希望延迟一段时间后执行某些任务，或者希望在稍后的事件循环中执行某些操作时，setTimeout 是一个非常有用的工具。

主函数是指代码的入口点，通常是程序的起始点，它定义了程序的控制流。在浏览器环境中，通常是通过在HTML中的<script>标签或外部JavaScript文件中的代码来定义主函数。setTimeout 可以在主函数中使用，但它本身不是主函数。

setInterval()

setInterval 是 JavaScript 中的一个定时器函数，用于定期执行指定的代码或函数。它按照指定的时间间隔（以毫秒为单位）循环执行一个函数或一段代码，直到通过 clearInterval 停止。

setInterval 的基本语法如下：

1	setInterval(function, delay);

function：要周期性调用的函数或执行的代码块。
delay：两次调用之间的时间间隔，以毫秒为单位。

例如，以下代码将每隔 1000 毫秒（1 秒）执行一次函数 myFunction：

function myFunction() {
  console.log('Interval is running...');
}

setInterval(myFunction, 1000);

setInterval 返回一个唯一的标识符，可以将其传递给 clearInterval 函数，以停止定时器。例如：

const intervalId = setInterval(myFunction, 1000);

// 停止定时器
clearInterval(intervalId);

需要注意的是，setInterval 的时间间隔不一定精确。如果执行的代码需要较长时间，可能会导致多个定时器回调函数累积在一起。此外，定时器函数不会等待上一次调用完成，因此如果上一次调用的执行时间超过间隔时间，可能会导致多个回调同时执行。

如果您需要在一次定时器完成后等待固定时间再执行下一次，可以使用 setTimeout 来实现递归调用。这可以确保不会出现多个定时器回调函数重叠执行的问题。

Promise

Promises 是 JavaScript 中用于管理异步操作的一种机制，它提供了一种更结构化、更易于理解的方式来处理异步编程。Promises 用于处理可能尚未完成的操作，并提供了处理成功和失败情况的机制。

一个 Promise 表示一个尚未完成的操作，它具有三种状态：

Pending（进行中）：初始状态，表示操作尚未完成。
Fulfilled（已完成）：操作成功完成，可以获取结果。
Rejected（已拒绝）：操作失败，可以获取错误信息。

Promises 提供了以下主要方法和特性：

new Promise(executor)：创建一个 Promise 对象，接受一个执行器函数（executor）作为参数，该函数在 Promise 被创建时立即执行，用于开始执行异步操作。
then(onFulfilled, onRejected)：用于指定操作成功（Fulfilled）和操作失败（Rejected）时的回调函数。then 方法可以链式调用。
catch(onRejected)：用于捕获操作失败时的回调函数，通常用于处理错误情况。
finally(onFinally)：用于指定不管操作成功或失败都要执行的回调函数，通常用于清理操作。

Promises 的基本示例：

const myPromise = new Promise((resolve, reject) => {
  // 异步操作
  setTimeout(() => {
    const randomValue = Math.random();
    if (randomValue > 0.5) {
      resolve(randomValue); // 操作成功
    } else {
      reject("Operation failed"); // 操作失败
    }
  }, 1000);
});

myPromise
  .then(result => {
    console.log("Success:", result);
  })
  .catch(error => {
    console.error("Error:", error);
  })
  .finally(() => {
    console.log("Operation completed");
  });

Promises 是用于处理异步操作的强大工具，它们在处理异步代码的可读性和可维护性方面比传统回调函数更有优势。Promises 的引入大大改善了 JavaScript 中异步编程的方式，使其更容易理解和管理。

async/await

async/await 是 JavaScript 中一种用于进行异步编程的特性，它使得处理异步操作更加清晰和可读。这个特性是在 ECMAScript 2017（ES8）中引入的。

异步编程是在处理需要等待一些非同步操作完成的情况下使用的编程方式。在 JavaScript 中，这种情况经常发生，例如处理异步请求（如网络请求）、定时器、文件读写、数据库查询等等。传统的方式是使用回调函数或者Promise来处理异步操作，但这可能导致回调地狱（Callback Hell）和难以理解的代码。

async/await 的目标是简化异步编程，使其看起来更像同步代码，从而提高可读性和可维护性。下面是 async/await 的基本工作方式：

async 函数声明：通过在函数前加上 async 关键字，将普通函数声明为异步函数。
await 操作符：在异步函数内，可以使用 await 操作符来等待一个 Promise 完成，而不会阻塞整个程序。当 await 后面的 Promise 完成时，函数会继续执行。

下面是一个示例，演示了 async/await 如何改善异步编程的可读性：

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Error:', error);
  }
}

fetchData();

在这个示例中，fetchData 函数是一个异步函数，它使用 await 来等待网络请求完成，并解析响应数据。这使得代码看起来更像同步代码，而不需要嵌套回调函数。如果发生错误，可以使用 try...catch 来捕获异常。

async/await 是异步编程的一种现代方法，它改善了异步代码的可读性和可维护性，并减少了回调地狱的问题。它在处理异步操作时非常有用，但需要记住它只能在异步函数内部使用。

Promise与async/await对比

选择使用 Promise 还是 async/await 取决于您的具体需求和代码风格。两者都用于管理异步操作，但它们在语法和用法上有一些区别。

以下是一些比较和考虑因素：

可读性和可维护性：
- async/await 通常被认为更清晰和易于理解，因为它使异步代码看起来更像同步代码，没有回调嵌套，有助于提高代码的可读性。
- Promise 也能够提供较好的可读性，但在处理多个异步操作时，可能需要更多的 .then 和 .catch 回调，这可能会导致代码稍显冗长。
错误处理：
- async/await 使用 try...catch 语法来处理错误，使错误处理更类似于同步代码的方式，更容易理解。
- Promise 使用 .catch 回调来处理错误，较之 async/await 语法稍显繁琐，尤其是在处理多个 Promise 链时。
兼容性：
- Promise 是在 ECMAScript 2015 (ES6) 引入的，较早的 JavaScript 引擎可能不支持 Promise，需要使用 polyfill 或转译工具。
- async/await 是在 ECMAScript 2017 (ES8) 引入的，对于较旧的浏览器，也可能需要进行兼容性处理。
项目要求：
- 如果您正在维护或加入一个已有项目，可能需要考虑项目中已有的异步代码风格，以确保一致性。
- 如果您从零开始编写新的代码，可以根据个人或团队的偏好选择使用哪种方法。

总之，Promise 和 async/await 都有其优势，具体的选择取决于您的需求和编程风格。在实际项目中，通常会同时使用这两种方式，根据具体情况选择合适的方法来处理异步操作。async/await 在许多情况下提供了更清晰的解决方案，而 Promise 仍然是 JavaScript 异步编程的重要工具之一。