Node.js 中使用 qrcode 包生成二维码的异步处理指南

本文旨在解决在 Node.js 应用中，使用 `qrcode` 包生成二维码时，因异步操作导致变量未能正确获取生成结果的问题。文章将深入剖析 `QRCode.toDataURL()` 方法的 Promise 特性，并通过 `async/await` 和 `.then()` 两种主流异步处理方式，提供清晰的代码示例和详细解释，确保开发者能够准确捕获并利用生成的二维码数据。

理解 qrcode 生成中的异步挑战

在 Node.js 环境下，许多 I/O 操作（如文件读写、网络请求）以及一些计算密集型任务都是异步执行的，以避免阻塞主线程。qrcode 库的 QRCode.toDataURL() 方法也不例外，它返回一个 Promise 对象，表示二维码生成过程的最终结果（成功或失败）。

当尝试生成二维码并将其存储在一个变量中，然后立即打印该变量时，常见的问题是变量显示为 undefined。这并非因为二维码未生成，而是因为 console.log() 在 Promise 异步操作完成并赋值给变量之前就已经执行了。

考虑以下示例代码，它展示了这种常见的误解：

import QRCode from "qrcode";

let qrcodeDataUrl;

QRCode.toDataURL("这是一段测试文本!")
  .then((url) => {
    // Promise 成功解决后，url 才会被赋值
    qrcodeDataUrl = url;
    console.log("在 Promise 内部获取到的 URL:", qrcodeDataUrl);
  })
  .catch((err) => {
    console.error("生成二维码时发生错误:", err);
  });

// 这里的 console.log 会在 Promise 解决之前执行
console.log("在 Promise 外部立即获取到的 URL:", qrcodeDataUrl);

运行上述代码，你会发现“在 Promise 外部立即获取到的 URL”很可能输出 undefined，而“在 Promise 内部获取到的 URL”则能正确显示数据。这明确指出了异步操作与同步代码执行顺序之间的脱节。Node.js 的事件循环机制决定了 console.log("在 Promise 外部...") 是同步代码，会立即执行，而 .then() 回调中的代码则会被推迟到 Promise 状态变为 fulfilled（已解决）时才执行。

解决方案：正确处理异步数据流

要解决这个问题，我们需要确保在 qrcodeDataUrl 变量被赋值之后再进行依赖于它的操作。Node.js 提供了多种处理异步操作的方式，其中最常用且推荐的是 async/await 语法和 Promise 的 .then() 方法。

方法一：使用 async/await (推荐)

async/await 是 ES2017 引入的语法糖，它使得异步代码看起来和写起来更像同步代码，极大地提高了可读性和可维护性。要使用 await 关键字，它必须在一个 async 函数内部。

AI建筑知识问答

用人工智能ChatGPT帮你解答所有建筑问题

172

查看详情

以下是使用 async/await 修正上述问题的示例：

import QRCode from "qrcode";

async function generateQrCodeAndLog() {
  let qrcodeDataUrl;
  const textToEncode = "我是一只小马驹！"; // 编码内容

  try {
    // await 会暂停当前 async 函数的执行，直到 Promise 解决
    // 解决后的值会直接赋给 qrcodeDataUrl
    qrcodeDataUrl = await QRCode.toDataURL(textToEncode);
    console.log("成功生成二维码 URL (使用 async/await):", qrcodeDataUrl);
  } catch (err) {
    console.error("生成二维码时发生错误 (使用 async/await):", err);
  }

  // 此时 qrcodeDataUrl 已经确保被赋值（如果 Promise 成功解决）
  // 可以在这里进行后续操作，例如保存到文件、发送到客户端等
  if (qrcodeDataUrl) {
    console.log("二维码数据已准备就绪，可以进行后续处理。");
  }
}

// 调用 async 函数
generateQrCodeAndLog();

在这个 async 函数中，await QRCode.toDataURL(textToEncode) 会等待 QRCode.toDataURL() 返回的 Promise 完成。一旦 Promise 成功解决，其结果（即 url）就会被赋给 qrcodeDataUrl，然后 async 函数会从暂停的地方继续执行。这样，当 console.log() 执行时，qrcodeDataUrl 变量就已经包含了正确的二维码数据。try...catch 块用于捕获 await 操作中可能抛出的错误，确保程序的健壮性。

方法二：使用 Promise 的 .then() 回调

这是处理 Promise 的传统方式。所有依赖于 Promise 结果的操作都应该放在 .then() 回调函数中。

import QRCode from "qrcode";

let qrcodeDataUrl;
const textToEncode = "你好，世界！"; // 编码内容

QRCode.toDataURL(textToEncode)
  .then((url) => {
    // 在这里，url 已经包含了生成的二维码数据
    qrcodeDataUrl = url;
    console.log("成功生成二维码 URL (使用 .then()):", qrcodeDataUrl);

    // 所有依赖于 qrcodeDataUrl 的后续操作都应该放在这里
    // 例如：
    // saveQrCodeToFile(qrcodeDataUrl);
    // sendQrCodeToClient(qrcodeDataUrl);
  })
  .catch((err) => {
    // 捕获 Promise 链中的任何错误
    console.error("生成二维码时发生错误 (使用 .then()):", err);
  });

// 再次强调，这里的代码会在 Promise 解决之前执行
// 如果在此处尝试使用 qrcodeDataUrl，它可能仍然是 undefined
// 因此，不建议将依赖于异步结果的代码放在这里

虽然这种方法也能正确处理异步结果，但当异步操作链条较长或逻辑复杂时，可能会导致“回调地狱”（Callback Hell），降低代码的可读性。因此，在现代 Node.js 开发中，async/await 通常是更优的选择。

总结与最佳实践

处理 Node.js 中的异步操作是构建健壮应用程序的关键。当使用 qrcode 或其他任何返回 Promise 的库时，务必记住以下几点：

1. 理解 Promise: 它们代表了一个异步操作的最终完成（或失败）及其结果值。
2. 避免同步思维: 不要期望在 Promise 外部立即获取其结果，因为外部代码是同步执行的。
3. 正确处理异步结果:
   • 对于简单的场景，可以使用 .then() 回调将依赖逻辑封装在其中。
   • 对于更复杂的异步流程或为了提高代码可读性，强烈推荐使用 async/await 语法。
4. 错误处理: 始终使用 .catch()（对于 Promise）或 try...catch 块（对于 async/await）来捕获和处理异步操作中可能发生的错误，以增强应用程序的健壮性。

通过正确地应用 async/await 或 Promise 的 .then() 方法，您可以确保在 Node.js 应用中，qrcode 生成的二维码数据能够被准确、及时地捕获和利用，从而避免因异步特性导致的 undefined 问题。

以上就是Node.js 中使用 qrcode 包生成二维码的异步处理指南的详细内容，更多请关注php中文网其它相关文章！