经验笔记：Web开发中的异步与同步编程

漆黑的莫莫

已于 2024-09-10 16:11:31 修改

阅读量890

点赞数 14

分类专栏： TypeScript-JavaScript-Node.js 文章标签：笔记

于 2024-09-10 15:03:31 首次发布

本文链接：https://blog.csdn.net/qq_45831414/article/details/142099336

版权

TypeScript-JavaScript-Node.js 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

异步-同步编程经验笔记

一、引言

在现代Web开发中，异步编程是一项至关重要的技能。随着SPA（single page web application，单页应用程序）的兴起，用户体验对于即时响应的需求变得越来越高，这就要求开发者能够有效地处理异步操作而不阻塞UI线程。JavaScript作为一种广泛使用的客户端脚本语言，提供了多种异步编程模型，其中包括回调函数、事件监听、发布/订阅模式、Generator函数、Web Workers、Promise以及async/await等。本文将探讨这几种异步编程模式，并讨论它们如何帮助解决异步编程中常见的问题。

二、回调函数（Callback）

回调函数是最早的异步编程模式之一，它是指在一个异步操作完成后调用的函数。通常，这个函数作为参数传递给另一个函数，以便在某个事件发生或某些操作完成时调用。

优点:
- 实现简单，不需要额外的语言特性支持。
缺点:
- 容易造成回调地狱，即多个异步操作嵌套在一起，导致代码难以阅读和维护。
- 错误处理比较麻烦，需要在每一层回调中手动处理错误。

示例:

function readData(callback) {
  setTimeout(() => {
    callback(null, 'Data');
  }, 1000);
}

readData((err, data) => {
  if (err) throw err;
  console.log(data); // "Data"
});

三、事件监听（Event Listener）

事件监听机制是另一种异步处理方式，主要用于响应用户交互或其他类型的事件。在DOM中，事件监听器常用于响应用户的点击、键盘输入等行为。

优点:
- 提供了一种分离关注点的方式，使得程序的不同部分可以独立地注册和响应事件。
缺点:
- 事件可能不会按预期顺序触发，有时需要复杂的逻辑来确保事件正确处理。
- 如果没有适当的管理，可能会导致内存泄漏。

示例:

document.getElementById('myButton').addEventListener('click', function() {
  console.log('Button clicked!');
});

四、发布/订阅模式（Publish/Subscribe）

发布/订阅模式是一种消息通信模式，其中一个对象（发布者）发送消息，而其他对象（订阅者）接收消息。这种模式通常用于解耦组件之间的直接依赖关系。

优点:
- 促进模块化设计，组件之间通过事件进行通信，而不是直接相互引用。
缺点:
- 需要一个中心化的事件总线或消息队列来管理事件的发布与订阅。
- 有可能导致订阅过多或事件名称冲突等问题。

示例:

const events = {};

function subscribe(eventName, handler) {
  if (!events[eventName]) events[eventName] = [];
  events[eventName].push(handler);
}

function publish(eventName, data) {
  const handlers = events[eventName];
  if (handlers) handlers.forEach(handler => handler(data));
}

subscribe('newPost', post => console.log(`New post received: ${post}`));

publish('newPost', 'Hello World!');

五、Generator 函数

Generator函数是一种特殊的函数，它可以用来创建迭代器，支持在函数执行过程中暂停和恢复执行。这对于处理复杂的异步任务特别有用，因为它允许在等待异步操作的同时执行其他代码。
适用于需要暂停和恢复执行的任务，可以与Promise结合使用来简化异步流程。

特点:
- 使用function*来定义。
- 可以使用yield表达式来暂停和恢复函数的执行。
- 可以与Promise结合使用，简化异步流程。

示例:

function* idGenerator() {
  let id = 0;
  while (true) {
    yield id++;
  }
}

const gen = idGenerator();
console.log(gen.next().value); // 0
console.log(gen.next().value); // 1

与TypeScript结合:
TypeScript为Generator函数提供了静态类型检查，使得你可以更安全地使用这些函数，并确保在生成器函数内部的变量类型一致性。

六、Web Workers

Web Workers是浏览器提供的一种多线程解决方案，它允许在后台线程上运行JavaScript，从而避免阻塞UI线程。这对于执行长时间运行的任务，如大量数据处理、图像处理等非常有用。
适用于需要在后台执行耗时任务的场景，可以避免阻塞UI线程，提高用户体验。

特点:
- 不影响UI渲染，提高用户体验。
- 可以与主线程通信，发送消息和接收消息。

示例:

<script>
  const worker = new Worker('worker.js');

  worker.postMessage({ task: 'compute', data: [1, 2, 3, 4] });

  worker.onmessage = function(event) {
    console.log('Message received from the worker', event.data);
  };

  worker.onerror = function(event) {
    console.error('Error occurred in worker', event);
  };
</script>

// worker.js
self.onmessage = function(event) {
  const result = event.data.data.reduce((a, b) => a + b, 0);
  self.postMessage({ result });
};

七、Promise

Promise是一种用于异步计算的对象，它代表了一个最终会在未来完成（或失败）的操作及其结果。Promise的主要优势在于它可以避免“回调地狱”（Callback Hell），即嵌套的回调函数导致的代码可读性和可维护性降低的问题。

优点:
- 解决了回调地狱的问题，提高了代码的可读性。
- 一旦Promise的状态确定（无论是resolved还是rejected），这个状态就不会改变。
- 可以通过.then()和.catch()方法链式调用来处理成功或失败的情况。
方法:
- then(): 处理成功的回调。
- catch(): 处理失败的回调。
- Promise.all(): 等待所有Promise完成，返回一个包含所有结果的数组。
- Promise.race(): 返回第一个完成的Promise的结果。
- Promise.allSettled(): ES11引入，等待所有Promise完成，并返回每个Promise的状态和结果。
- Promise.any(): ES12引入，只要有一个Promise成功，就返回该成功的结果；否则，所有失败时抛出错误。

八、Async/Await

Async/Await可以视为Generator函数和Promise的一个语法糖，它允许以更接近同步代码的方式来编写异步代码。async关键字用于声明一个异步函数，而await关键字用于等待一个Promise的解析。

优点:
- 使得异步代码看起来更像是同步代码，提高了代码的可读性。
- await关键字只能在async函数内部使用，这有助于保持异步逻辑的封装性。
- async函数总是返回一个Promise。

使用示例:

async function fetchUser() {
  try {
    const response = await fetch('/api/user');
    const user = await response.json();
    console.log(user);
  } catch (error) {
    console.error('Failed to fetch user:', error);
  }
}

九、错误处理

异步操作中错误处理非常重要。使用try...catch结构可以在async函数中捕获由await引发的任何错误。

示例:

export function to(promise, errorExt) {
  return promise
    .then(data => [null, data])
    .catch(err => {
      if (errorExt) {
        const parsedError = Object.assign({}, err, errorExt);
        return [parsedError, undefined];
      }
      return [err, undefined];
    });
}

十、宏任务与微任务

在JavaScript的事件循环中，宏任务和微任务的概念也很重要。宏任务如setTimeout、setInterval等，每个宏任务执行完才会执行下一个宏任务；而微任务如Promise的.then方法，会在当前宏任务结束之后立即执行。

宏任务:
- 浏览器环境: setTimeout, setInterval, requestAnimationFrame
- Node.js环境: 加上setImmediate
微任务:
- 浏览器和Node.js环境: Promise, 在Node.js中还有process.nextTick

十一、结论

通过使用Promise和async/await，开发者可以更好地管理和编写异步代码，从而提高代码的可读性和维护性。这些工具不仅简化了异步逻辑的表达，还提供了一种优雅的方式来处理错误。随着ES规范的发展，新的Promise API如Promise.any和Promise.allSettled也为开发者提供了更多的灵活性和控制力。

在实际开发中，根据不同的应用场景和需求，开发者可以选择最适合的技术来实现异步逻辑。例如，在简单的数据加载场景下，使用Promise或async/await可能是最合适的选择；而在需要处理用户交互的复杂应用中，事件监听和发布/订阅模式则能更好地满足需求。了解这些不同技术的特点和适用场景，可以帮助开发者写出更加高效、易于维护的代码。