首页

Appearance

异步编程 ​

是什么 ​

JavaScript 的异步编程是一种编程范式，它允许程序在等待某些长时间操作（例如文件读写、网络请求等）的完成时继续执行其他代码，而不是停下来等待。这种方式可以提高程序的性能和响应性，特别是在涉及到 I/O 操作时，因为 I/O 操作往往比 CPU 计算慢得多。

知识点 ​

异步编程在 JavaScript 中是一个广泛的主题，涉及许多关键概念和知识点。以下是一些主要的知识点：

  1. 事件循环（Event Loop）：

    • 了解 JavaScript 的事件循环是如何工作的，以及它是如何处理异步操作和回调队列的。
    • 理解宏任务（macro-tasks）和微任务（micro-tasks）的区别。

  2. 回调函数（Callbacks）：

    • 学习如何使用回调函数处理异步操作。
    • 理解回调函数可能导致的问题，例如回调地狱（callback hell）。

  3. Promise 对象：

    • 掌握 Promise 的基本用法，包括创建 Promise、then、catch 和 finally 方法。
    • 理解 Promise 的状态（pending, fulfilled, rejected）和状态转换。
    • 学习如何用 Promises 处理并发异步操作，例如使用 Promise.all、Promise.race 等。

  4. async/await：

    • 掌握如何使用 async 函数和 await 表达式简化异步操作。
    • 理解 async/await 如何与 Promises 一起工作。
    • 学习如何使用 try-catch 语句处理 async/await 中的错误。

  5. 错误处理：

    • 学习如何在异步编程中正确处理错误。
    • 理解在不同异步模式（回调、Promises、async/await）中的错误处理方式。

  6. 事件驱动编程：

    • 在 Node.js 中，学习如何使用事件发射器（EventEmitter）来处理异步事件。
    • 理解事件监听器和事件触发的概念。

  7. 异步迭代器和生成器：

    • 学习如何使用异步迭代器（Async Iterators）和异步生成器（Async Generators）来处理异步操作序列。

  8. 任务调度：

    • 理解 setTimeout 和 setInterval 的用法，以及它们如何在异步编程中调度任务。

  9. 异步模块和工具：

    • 学习现代 JavaScript 框架和库中的异步模型，例如 Node.js 的 async 模块、Axios、Fetch API 等。
    • 理解如何使用这些工具来执行异步 HTTP 请求和其他异步操作。

  10. 并发控制：

    • 掌握如何管理和控制并发执行的异步操作，例如通过使用信号量、互斥量等概念。

  11. 性能和优化：

    • 学习如何分析和优化异步代码的性能，例如避免不必要的异步操作、减少等待时间等。

这些知识点构成了 JavaScript 异步编程的基础，并且可以在不同的环境和场景下应用，包括浏览器和 Node.js。掌握这些概念对于编写高效、可维护和可扩展的异步代码至关重要。

异步编程方式 ​

在 JavaScript 中，处理异步编程的方式主要有以下几种：

  1. 回调函数（Callbacks）： 最初的异步编程模式是通过回调函数来实现的。你将一个函数作为参数传递给另一个函数，在异步操作完成时执行这个回调函数。

    javascript
    function doSomethingAsync(callback) {
  setTimeout(() => {
    // 执行异步任务
    callback("result");
  }, 1000);
}

doSomethingAsync((result) => {
  console.log(result); // 处理结果
});

    回调模式的问题在于，随着回调函数的嵌套，代码可读性和可维护性会大大降低，这种情况通常被称为“回调地狱”。

  2. Promise 对象： Promises 提供了一个更好的错误处理和链式调用的机制。一个 Promise 代表了一个最终可能完成或失败的异步操作，并且它的结果值。

    javascript
    new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("result");
  }, 1000);
})
  .then((result) => {
    console.log(result); // 处理结果
  })
  .catch((error) => {
    console.error(error); // 错误处理
  });

    Promises 改善了异步代码的结构，并允许更容易地组合和顺序执行异步操作。

  3. async/await： async/await 是一个更现代的异步编程解决方案，它让异步代码看起来和同步代码更相似。一个 async 函数总是返回一个 Promise，而 await 关键字可以暂停 async 函数的执行，等待 Promise 解决。

    javascript
    async function asyncFunction() {
  try {
    const result = await new Promise((resolve) => {
      setTimeout(() => {
        resolve("result");
      }, 1000);
    });
    console.log(result); // 处理结果
  } catch (error) {
    console.error(error); // 错误处理
  }
}

asyncFunction();

    async/await 使得编写异步代码更加直观和简洁。

  4. 生成器（Generators）和异步迭代器（Async Iterators）： 生成器函数允许你通过 yield 关键字暂停和恢复函数的执行。当配合 Promises 使用时，它们可以用于控制异步流程。

    javascript
    function* generatorFunction() {
  const result = yield new Promise((resolve) =>
    setTimeout(() => resolve("result"), 1000)
  );
  console.log(result);
}

const iterator = generatorFunction();
const promise = iterator.next().value;
promise.then((result) => iterator.next(result));

    异步迭代器是生成器的异步版本，允许 await 在 for...of 循环中使用。

  5. 事件驱动（Event-driven）： 在 Node.js 中，事件驱动模型非常重要。EventEmitter 类用于处理异步事件。

    javascript
    const EventEmitter = require("events");
const eventEmitter = new EventEmitter();

eventEmitter.on("event", (result) => {
  console.log(result); // 处理事件
});

setTimeout(() => {
  eventEmitter.emit("event", "result");
}, 1000);

  6. 回调队列和微任务队列： JavaScript 运行时使用事件循环，其中包括宏任务队列（用于诸如 setTimeout、setInterval 的回调）和微任务队列（用于 Promises）。了解这些机制有助于编写更高效的异步代码。

  7. 发布/订阅（Pub/Sub）：这是一种消息传递模式，我们可以订阅一个主题，当有新的消息发布到这个主题时，所有的订阅者都会收到这个消息。

选择哪种方式取决于具体的应用场景、代码可读性、易于维护等因素。随着 JavaScript 的发展，async/await 由于其简洁性和易于理解的特性，已经成为许多开发者处理异步操作的首选方法。

使用场景 ​

JavaScript 异步编程主要用于不能立即完成的操作，这些操作通常涉及等待，例如等待网络请求返回、等待文件读写操作完成、或者等待定时器触发。使用异步编程，可以避免这些操作阻塞主线程，从而提高应用程序的性能和响应性。

以下是一些常见的异步编程使用场景及示例：

  1. 网络请求： 通常使用 fetch() 或 XMLHttpRequest 发送网络请求并处理响应。

    javascript
    fetch("https://api.example.com/data")
  .then((response) => response.json())
  .then((data) => console.log(data))
  .catch((error) => console.error("Error:", error));

  2. 文件操作（在 Node.js 中）： 异步读取文件内容，避免阻塞其他操作。

    javascript
    const fs = require("fs");

fs.readFile("/path/to/file", "utf8", (err, data) => {
  if (err) {
    console.error(err);
    return;
  }
  console.log(data);
});

  3. 数据库操作（在使用 Node.js 进行服务器端开发时）： 异步查询数据库，不会阻塞服务器的主线程。

    javascript
    const { Pool } = require("pg");
const pool = new Pool();

pool.query("SELECT * FROM my_table", (err, res) => {
  if (err) {
    throw err;
  }
  console.log(res.rows);
});

  4. 定时任务： 使用 setTimeout() 或 setInterval() 执行延迟操作或定期重复操作。

    javascript
    // 打印消息后等待2秒钟
setTimeout(() => {
  console.log("This message is shown after 2 seconds");
}, 2000);

  5. 事件监听： 在用户交互或其他事件触发时执行异步操作。

    javascript
    document.getElementById("myButton").addEventListener("click", () => {
  // 异步操作，比如发送一个网络请求
  fetch("/some-url").then(/* ... */);
});

  6. Promise 链： 处理多个异步操作的顺序。

    javascript
    doAsyncTask1()
  .then((result1) => {
    console.log(result1);
    return doAsyncTask2(result1);
  })
  .then((result2) => {
    console.log(result2);
    return doAsyncTask3(result2);
  })
  .then((result3) => {
    console.log(result3);
  })
  .catch((error) => {
    console.error("Something went wrong", error);
  });

  7. 异步循环： 使用 async/await 在循环中处理异步操作。

    javascript
    async function processArray(array) {
  for (const item of array) {
    await processItem(item); // 假设 processItem 是异步的
  }
  console.log("All items have been processed");
}

  8. Web Workers： 执行耗时的计算，而不冻结用户界面。

    javascript
    const worker = new Worker("worker.js");

worker.postMessage({ type: "start", payload: "Do some work" });

worker.onmessage = function (event) {
  console.log("Received message from worker:", event.data);
};

这些场景展示了异步编程在 JavaScript 中的多样性和重要性。通过使用适当的异步模式和 API，开发者可以构建快速响应且用户体验良好的应用程序。

除了上述场景，JavaScript 中的异步编程还可以用于以下方面：

  1. 动画： 使用requestAnimationFrame进行平滑的动画，它会在浏览器重绘之前执行代码，这是一个异步操作。

    javascript
    function animate() {
  // 更新动画状态
  // ...

  // 请求下一帧动画
  requestAnimationFrame(animate);
}

// 启动动画
requestAnimationFrame(animate);

  2. 流处理（在 Node.js 中）： 使用流（Streams）异步处理大文件，避免一次性加载到内存中，可以提高性能和效率。

    javascript
    const fs = require("fs");

const readStream = fs.createReadStream("/path/to/large/file");
const writeStream = fs.createWriteStream("/path/to/destination");

readStream.on("data", (chunk) => {
  writeStream.write(chunk);
});

readStream.on("end", () => {
  writeStream.end();
});

  3. 消息队列和任务调度（在 Node.js 中）： 使用异步操作处理后台任务和消息队列。

    javascript
    const { Queue } = require("bull");

const myQueue = new Queue("myQueue");

myQueue.process((job, done) => {
  // 异步处理任务
  doSomeAsyncWork(job.data).then(done);
});

myQueue.add({ task: "send email" });

  4. 服务端事件推送（Server-Sent Events, SSE）： 使用 SSE 在服务器与客户端之间建立单向通信通道，服务器可以异步推送数据到客户端。

    javascript
    if (typeof EventSource !== "undefined") {
  const evtSource = new EventSource("sse-server");
  evtSource.onmessage = function (event) {
    const newElement = document.createElement("div");
    newElement.textContent = "message: " + event.data;
    document.body.appendChild(newElement);
  };
}

  5. 异步导入模块（Dynamic Imports）： 使用动态导入（import()）语法在需要时才加载模块，这是一个异步操作。

    javascript
    button.addEventListener("click", async () => {
  const module = await import("./module.js");
  module.load();
});

  6. Promise.all 和 Promise.race： 同时处理多个异步操作，Promise.all 等待所有操作完成，而 Promise.race 返回最先完成的操作。

    javascript
    Promise.all([fetch("/endpoint1"), fetch("/endpoint2")]).then(
  ([response1, response2]) => {
    // 两个请求都完成后的处理
  }
);

Promise.race([fetch("/endpoint1"), fetch("/endpoint2")]).then(
  (firstResponse) => {
    // 最先完成的请求的处理
  }
);

  7. 异步迭代器和生成器： 使用异步迭代器 (for-await-of) 处理或生成异步流的数据。

    javascript
    async function* asyncGenerator() {
  let i = 0;
  while (i < 3) {
    yield new Promise((resolve) => setTimeout(resolve, 100, i++));
  }
}

(async () => {
  for await (const num of asyncGenerator()) {
    console.log(num);
  }
})();

这些示例进一步展现了异步编程的多样性和强大功能。在 JavaScript 中，几乎所有涉及等待的操作都可以异步执行，以提高应用程序的响应性和性能。

hancenter808@outlook.com

Copyright © 2024 Hanwei