{"id":10021069,"date":"2025-11-06T21:15:17","date_gmt":"2025-11-06T13:15:17","guid":{"rendered":"https:\/\/itmax.cn\/?p=10021069"},"modified":"2025-11-06T21:15:17","modified_gmt":"2025-11-06T13:15:17","slug":"javascript-%e5%bc%82%e6%ad%a5%e5%be%aa%e7%8e%af%e8%b8%a9%e5%9d%91%e6%8c%87%e5%8d%97","status":"publish","type":"post","link":"https:\/\/itmax.cn\/?p=10021069","title":{"rendered":"JavaScript \u5f02\u6b65\u5faa\u73af\u8e29\u5751\u6307\u5357"},"content":{"rendered":"

1. \u524d\u8a00<\/h2>\n

\u5728\u5faa\u73af\u4e2d\u4f7f\u7528 await\uff0c\u4ee3\u7801\u770b\u4f3c\u76f4\u89c2\uff0c\u4f46\u8fd0\u884c\u65f6\u8981\u4e48\u6084\u65e0\u58f0\u606f\u5730\u505c\u6b62\uff0c\u8981\u4e48\u8fd0\u884c\u901f\u5ea6\u7f13\u6162\uff0c\u8fd9\u662f\u4e3a\u4ec0\u4e48\u5462\uff1f<\/p>\n

\u672c\u7bc7\u804a\u804a JavaScript \u4e2d\u7684\u5f02\u6b65\u5faa\u73af\u95ee\u9898\u3002<\/p>\n

2. \u8e29\u5751 1\uff1afor \u5faa\u73af\u91cc\u7528 await\uff0c\u6548\u7387\u592a\u4f4e<\/h2>\n

\u5047\u8bbe\u8981\u9010\u4e2a\u83b7\u53d6\u7528\u6237\u6570\u636e\uff0c\u53ef\u80fd\u4f1a\u8fd9\u6837\u5199\uff1a<\/p>\n

const users = [1, 2, 3];\nfor (const id of users) {\n  const user = await fetchUser(id);\n  console.log(user);\n}<\/code><\/pre>\n
\u4ee3\u7801\u867d\u7136\u80fd\u8fd0\u884c\uff0c\u4f46\u4f1a\u987a\u5e8f\u6267\u884c<\/strong>\u2014\u2014\u5fc5\u987b\u7b49 fetchUser(1)<\/code> \u5b8c\u6210\uff0cfetchUser(2)<\/code> \u624d\u4f1a\u5f00\u59cb\u3002\u82e5\u4e1a\u52a1\u8981\u6c42\u4e25\u683c\u6309\u987a\u5e8f\u6267\u884c\uff0c\u8fd9\u6837\u5199\u6ca1\u95ee\u9898\uff1b\u4f46\u5982\u679c\u8bf7\u6c42\u4e4b\u95f4\u76f8\u4e92\u72ec\u7acb\uff0c\u8fd9\u79cd\u5199\u6cd5\u5c31\u592a\u6d6a\u8d39\u65f6\u95f4\u4e86\u3002<\/p>\n
3. \u8e29\u5751 2\uff1amap \u91cc\u76f4\u63a5\u7528 await\uff0c\u62ff\u5230\u7684\u5168\u662f Promise<\/h2>\n
\u5f88\u591a\u4eba\u4f1a\u5728 map()<\/code> \u91cc\u7528 await<\/code>\uff0c\u5374\u672a\u5904\u7406\u8fd4\u56de\u7684 Promise\uff0c\u7ed3\u679c\u8e29\u4e86\u5751\uff1a<\/p>\n
const users = [1, 2, 3];\nconst results = users.map(async (id) => {\n  const user = await fetchUser(id);\n  return user;\n});\nconsole.log(results); \/\/ \u8f93\u51fa [Promise, Promise, Promise]\uff0c\u800c\u975e\u5b9e\u9645\u7528\u6237\u6570\u636e<\/code><\/pre>\n
\u8bed\u6cd5\u4e0a\u6ca1\u95ee\u9898\uff0c\u4f46\u5b83\u4e0d\u4f1a\u7b49 Promise resolve<\/code>\u3002\u82e5\u60f3\u8ba9\u8bf7\u6c42\u5e76\u884c\u6267\u884c\u5e76\u83b7\u53d6\u6700\u7ec8\u7ed3\u679c\uff0c\u9700\u7528 Promise.all()<\/code>\uff1a<\/p>\n
const results = await Promise.all(users.map((id) => fetchUser(id)));<\/code><\/pre>\n
\u8fd9\u6837\u6240\u6709\u8bf7\u6c42\u4f1a\u540c\u65f6\u53d1\u8d77<\/strong>\uff0cresults<\/code> \u4e2d\u5c31\u662f\u771f\u6b63\u7684\u7528\u6237\u6570\u636e\u4e86\u3002<\/p>\n
4. \u8e29\u5751 3\uff1aPromise.all \u4e00\u9519\u5168\u9519<\/h2>\n
\u7528 Promise.all()<\/code> \u65f6\uff0c\u53ea\u8981\u6709\u4e00\u4e2a\u8bf7\u6c42\u5931\u8d25\uff0c\u6574\u4e2a\u64cd\u4f5c\u5c31\u4f1a\u62a5\u9519\uff1a<\/p>\n
const results = await Promise.all(\n  users.map((id) => fetchUser(id)) \/\/ \u5047\u8bbe fetchUser(2) \u51fa\u9519\n);<\/code><\/pre>\n
\u5982\u679c fetchUser(2)<\/code> \u8fd4\u56de 404 \u6216\u7f51\u7edc\u9519\u8bef\uff0cPromise.all()<\/code> \u4f1a\u76f4\u63a5 reject<\/code>\uff0c\u5373\u4fbf\u5176\u4ed6\u8bf7\u6c42\u6210\u529f\uff0c\u4e5f\u62ff\u4e0d\u5230\u4efb\u4f55\u7ed3\u679c\u3002<\/p>\n
5. \u66f4\u5b89\u5168\u7684\u66ff\u4ee3\u65b9\u6848<\/h2>\n
5.1. \u7528 Promise.allSettled()\uff0c\u4fdd\u7559\u6240\u6709\u7ed3\u679c<\/h3>\n
\u4f7f\u7528 Promise.allSettled()<\/code>\uff0c\u5373\u4fbf\u90e8\u5206\u8bf7\u6c42\u5931\u8d25\uff0c\u4e5f\u80fd\u62ff\u5230\u6240\u6709\u7ed3\u679c\uff0c\u4e4b\u540e\u53ef\u624b\u52a8\u5224\u65ad\u6210\u529f\u4e0e\u5426\uff1a<\/p>\n
const results = await Promise.allSettled(users.map((id) => fetchUser(id)));\n\nresults.forEach((result) => {\n  if (result.status === "fulfilled") {\n    console.log("\u2705 \u7528\u6237\u6570\u636e:", result.value);\n  } else {\n    console.warn("\u274c \u9519\u8bef:", result.reason);\n  }\n});<\/code><\/pre>\n
5.2. \u5728 map \u91cc\u52a0 try\/catch\uff0c\u8fd4\u56de\u515c\u5e95\u503c<\/h3>\n
\u4e5f\u53ef\u5728\u8bf7\u6c42\u65f6\u76f4\u63a5\u6355\u83b7\u9519\u8bef\uff0c\u7ed9\u5931\u8d25\u7684\u8bf7\u6c42\u8fd4\u56de\u9ed8\u8ba4\u503c\uff1a<\/p>\n
const results = await Promise.all(\n  users.map(async (id) => {\n    try {\n      return await fetchUser(id);\n    } catch (err) {\n      console.error(`\u83b7\u53d6\u7528\u6237${id}\u5931\u8d25`, err);\n      return { id, name: "\u672a\u77e5\u7528\u6237" }; \/\/ \u515c\u5e95\u6570\u636e\n    }\n  })\n);<\/code><\/pre>\n
\u8fd9\u6837\u8fd8\u80fd\u907f\u514d \u201cunhandled promise rejections\u201d \u9519\u8bef\u2014\u2014\u5728 Node.js \u4e25\u683c\u73af\u5883\u4e0b\uff0c\u8be5\u9519\u8bef\u53ef\u80fd\u5bfc\u81f4\u7a0b\u5e8f\u5d29\u6e83\u3002<\/p>\n
6. \u73b0\u4ee3\u5f02\u6b65\u5faa\u73af\u65b9\u6848\uff0c\u6309\u9700\u9009\u62e9<\/h2>\n
6.1. for…of + await\uff1a\u9002\u5408\u9700\u987a\u5e8f\u6267\u884c\u7684\u573a\u666f<\/h3>\n
\u82e5\u4e0b\u4e00\u4e2a\u8bf7\u6c42\u4f9d\u8d56\u4e0a\u4e00\u4e2a\u7684\u7ed3\u679c\uff0c\u6216\u9700\u9075\u5b88 API \u7684\u9891\u7387\u9650\u5236\uff0c\u53ef\u91c7\u7528\u6b64\u65b9\u6848\uff1a<\/p>\n
\/\/ \u5728 async \u51fd\u6570\u5185\nfor (const id of users) {\n  const user = await fetchUser(id);\n  console.log(user);\n}\n\/\/ \u4e0d\u5728 async \u51fd\u6570\u5185\uff0c\u7528\u7acb\u5373\u6267\u884c\u51fd\u6570\n(async () => {\n  for (const id of users) {\n    const user = await fetchUser(id);\n    console.log(user);\n  }\n})();<\/code><\/pre>\n