{"id":669,"date":"2024-06-22T00:09:08","date_gmt":"2024-06-21T16:09:08","guid":{"rendered":"https:\/\/levin.ink\/?p=669"},"modified":"2024-06-22T00:09:08","modified_gmt":"2024-06-21T16:09:08","slug":"js-3-10-promise-async-await","status":"publish","type":"post","link":"https:\/\/levin.ink\/?p=669","title":{"rendered":"JS &#8211; 3-10 Promise, async await"},"content":{"rendered":"<h1>\u7b80\u4ecb\uff1a\u56de\u8c03<\/h1>\n<p>JavaScript \u4e3b\u673a\uff08host\uff09\u73af\u5883\u63d0\u4f9b\u4e86\u8bb8\u591a\u51fd\u6570\uff0c\u8fd9\u4e9b\u51fd\u6570\u5141\u8bb8\u6211\u4eec\u8ba1\u5212\u00a0<strong>\u5f02\u6b65<\/strong>\u00a0\u884c\u4e3a\uff08action\uff09\u3002\u6362\u53e5\u8bdd\u8bf4\uff0c\u6211\u4eec\u73b0\u5728\u5f00\u59cb\u6267\u884c\u7684\u884c\u4e3a\uff0c\u4f46\u5b83\u4eec\u4f1a\u5728\u7a0d\u540e\u5b8c\u6210\u3002<br \/>\n\u4f8b\u5982\uff0c<code>setTimeout<\/code>\u00a0\u51fd\u6570\u5c31\u662f\u4e00\u4e2a\u8fd9\u6837\u7684\u51fd\u6570\u3002<br \/>\n\u8fd9\u513f\u6709\u4e00\u4e9b\u5b9e\u9645\u4e2d\u7684\u5f02\u6b65\u884c\u4e3a\u7684\u793a\u4f8b\uff0c\u4f8b\u5982\u52a0\u8f7d\u811a\u672c\u548c\u6a21\u5757\uff08\u6211\u4eec\u5c06\u5728\u540e\u9762\u7684\u7ae0\u8282\u4e2d\u4ecb\u7ecd\uff09\u3002<br \/>\n\u8ba9\u6211\u4eec\u770b\u4e00\u4e0b\u51fd\u6570\u00a0<code>loadScript(src)<\/code>\uff0c\u8be5\u51fd\u6570\u4f7f\u7528\u7ed9\u5b9a\u7684\u00a0<code>src<\/code>\u00a0\u52a0\u8f7d\u811a\u672c\uff1a<\/p>\n<pre><code class=\"language-js\">function loadScript(src) {\n  \/\/ \u521b\u5efa\u4e00\u4e2a &lt;script&gt; \u6807\u7b7e\uff0c\u5e76\u5c06\u5176\u9644\u52a0\u5230\u9875\u9762\n  \/\/ \u8fd9\u5c06\u4f7f\u5f97\u5177\u6709\u7ed9\u5b9a src \u7684\u811a\u672c\u5f00\u59cb\u52a0\u8f7d\uff0c\u5e76\u5728\u52a0\u8f7d\u5b8c\u6210\u540e\u8fd0\u884c\n  let script = document.createElement('script');\n  script.src = src;\n  document.head.append(script);\n}\n<\/code><\/pre>\n<p>\u5b83\u5c06\u4e00\u4e2a\u65b0\u7684\u3001\u5e26\u6709\u7ed9\u5b9a\u00a0<code>src<\/code>\u00a0\u7684\u3001\u52a8\u6001\u521b\u5efa\u7684\u6807\u7b7e\u00a0<code>&lt;script src=&quot;\u2026&quot;&gt;<\/code>\u00a0\u63d2\u5165\u5230\u6587\u6863\u4e2d\u3002\u6d4f\u89c8\u5668\u5c06\u81ea\u52a8\u5f00\u59cb\u52a0\u8f7d\u5b83\uff0c\u5e76\u5728\u52a0\u8f7d\u5b8c\u6210\u540e\u6267\u884c\u5b83\u3002<br \/>\n\u6211\u4eec\u53ef\u4ee5\u50cf\u8fd9\u6837\u4f7f\u7528\u8fd9\u4e2a\u51fd\u6570\uff1a<\/p>\n<pre><code class=\"language-js\">\/\/ \u5728\u7ed9\u5b9a\u8def\u5f84\u4e0b\u52a0\u8f7d\u5e76\u6267\u884c\u811a\u672c\nloadScript('\/my\/script.js');\n<\/code><\/pre>\n<p>\u811a\u672c\u662f\u201c\u5f02\u6b65\u201d\u8c03\u7528\u7684\uff0c\u56e0\u4e3a\u5b83\u4ece\u73b0\u5728\u5f00\u59cb\u52a0\u8f7d\uff0c\u4f46\u662f\u5728\u8fd9\u4e2a\u52a0\u8f7d\u51fd\u6570\u6267\u884c\u5b8c\u6210\u540e\u624d\u8fd0\u884c\u3002<br \/>\n\u5982\u679c\u5728\u00a0<code>loadScript(\u2026)<\/code>\u00a0\u4e0b\u9762\u6709\u4efb\u4f55\u5176\u4ed6\u4ee3\u7801\uff0c\u5b83\u4eec\u4e0d\u4f1a\u7b49\u5230\u811a\u672c\u52a0\u8f7d\u5b8c\u6210\u624d\u6267\u884c\u3002<\/p>\n<pre><code class=\"language-js\">loadScript('\/my\/script.js');\n\/\/ loadScript \u4e0b\u9762\u7684\u4ee3\u7801\n\/\/ \u4e0d\u4f1a\u7b49\u5230\u811a\u672c\u52a0\u8f7d\u5b8c\u6210\u624d\u6267\u884c\n\/\/ ...\n<\/code><\/pre>\n<p>\u5047\u8bbe\u6211\u4eec\u9700\u8981\u5728\u65b0\u811a\u672c\u52a0\u8f7d\u540e\u7acb\u5373\u4f7f\u7528\u5b83\u3002\u5b83\u58f0\u660e\u4e86\u65b0\u51fd\u6570\uff0c\u6211\u4eec\u60f3\u8fd0\u884c\u5b83\u4eec\u3002<br \/>\n\u4f46\u5982\u679c\u6211\u4eec\u5728\u00a0<code>loadScript(\u2026)<\/code>\u00a0\u8c03\u7528\u540e\u7acb\u5373\u6267\u884c\u6b64\u64cd\u4f5c\uff0c\u8fd9\u5c06\u4e0d\u4f1a\u6709\u6548\u3002<\/p>\n<pre><code class=\"language-js\">loadScript('\/my\/script.js'); \/\/ \u8fd9\u4e2a\u811a\u672c\u6709 &quot;function newFunction() {\u2026}&quot;\n\nnewFunction(); \/\/ \u6ca1\u6709\u8fd9\u4e2a\u51fd\u6570\uff01\n<\/code><\/pre>\n<p>\u81ea\u7136\u60c5\u51b5\u4e0b\uff0c\u6d4f\u89c8\u5668\u53ef\u80fd\u6ca1\u6709\u65f6\u95f4\u52a0\u8f7d\u811a\u672c\u3002\u5230\u76ee\u524d\u4e3a\u6b62\uff0c<code>loadScript<\/code>\u00a0\u51fd\u6570\u5e76\u6ca1\u6709\u63d0\u4f9b\u8ddf\u8e2a\u52a0\u8f7d\u5b8c\u6210\u7684\u65b9\u6cd5\u3002\u811a\u672c\u52a0\u8f7d\u5e76\u6700\u7ec8\u8fd0\u884c\uff0c\u4ec5\u6b64\u800c\u5df2\u3002\u4f46\u6211\u4eec\u5e0c\u671b\u4e86\u89e3\u811a\u672c\u4f55\u65f6\u52a0\u8f7d\u5b8c\u6210\uff0c\u4ee5\u4f7f\u7528\u5176\u4e2d\u7684\u65b0\u51fd\u6570\u548c\u53d8\u91cf\u3002<br \/>\n\u8ba9\u6211\u4eec\u6dfb\u52a0\u4e00\u4e2a\u00a0<code>callback<\/code>\u00a0\u51fd\u6570\u4f5c\u4e3a\u00a0<code>loadScript<\/code>\u00a0\u7684\u7b2c\u4e8c\u4e2a\u53c2\u6570\uff0c\u8be5\u51fd\u6570\u5e94\u5728\u811a\u672c\u52a0\u8f7d\u5b8c\u6210\u65f6\u6267\u884c\uff1a<\/p>\n<pre><code class=\"language-js\">function loadScript(src, callback) {\n  let script = document.createElement('script');\n  script.src = src;\n\n  script.onload = () =&gt; callback(script);\n\n  document.head.append(script);\n}\n<\/code><\/pre>\n<p><code>onload<\/code>\u00a0\u4e8b\u4ef6\u901a\u5e38\u4f1a\u5728\u811a\u672c\u52a0\u8f7d\u548c\u6267\u884c\u5b8c\u6210\u540e\u6267\u884c\u4e00\u4e2a\u51fd\u6570\u3002<br \/>\n\u73b0\u5728\uff0c\u5982\u679c\u6211\u4eec\u60f3\u8c03\u7528\u8be5\u811a\u672c\u4e2d\u7684\u65b0\u51fd\u6570\uff0c\u6211\u4eec\u5e94\u8be5\u5c06\u5176\u5199\u5728\u56de\u8c03\u51fd\u6570\u4e2d\uff1a<\/p>\n<pre><code class=\"language-js\">loadScript('\/my\/script.js', function() {\n  \/\/ \u5728\u811a\u672c\u52a0\u8f7d\u5b8c\u6210\u540e\uff0c\u56de\u8c03\u51fd\u6570\u624d\u4f1a\u6267\u884c\n  newFunction(); \/\/ \u73b0\u5728\u5b83\u5de5\u4f5c\u4e86\n  ...\n});\n<\/code><\/pre>\n<p>\u8fd9\u662f\u6211\u4eec\u7684\u60f3\u6cd5\uff1a\u7b2c\u4e8c\u4e2a\u53c2\u6570\u662f\u4e00\u4e2a\u51fd\u6570\uff08\u901a\u5e38\u662f\u533f\u540d\u51fd\u6570\uff09\uff0c\u8be5\u51fd\u6570\u4f1a\u5728\u884c\u4e3a\uff08action\uff09\u5b8c\u6210\u65f6\u8fd0\u884c\u3002<br \/>\n\u8fd9\u662f\u4e00\u4e2a\u5e26\u6709\u771f\u5b9e\u811a\u672c\u7684\u53ef\u8fd0\u884c\u7684\u793a\u4f8b\uff1a<\/p>\n<pre><code class=\"language-js\">function loadScript(src, callback) {\n  let script = document.createElement('script');\n  script.src = src;\n  script.onload = () =&gt; callback(script);\n  document.head.append(script);\n}\n\nloadScript('https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/lodash.js\/3.2.0\/lodash.js', script =&gt; {\n  alert(`\u9177\uff0c\u811a\u672c ${script.src} \u52a0\u8f7d\u5b8c\u6210`);\n  alert( _ ); \/\/ _ \u662f\u6240\u52a0\u8f7d\u7684\u811a\u672c\u4e2d\u58f0\u660e\u7684\u4e00\u4e2a\u51fd\u6570\n});\n<\/code><\/pre>\n<p>\u8fd9\u88ab\u79f0\u4e3a\u201c\u57fa\u4e8e\u56de\u8c03\u201d\u7684\u5f02\u6b65\u7f16\u7a0b\u98ce\u683c\u3002\u5f02\u6b65\u6267\u884c\u67d0\u9879\u529f\u80fd\u7684\u51fd\u6570\u5e94\u8be5\u63d0\u4f9b\u4e00\u4e2a\u00a0<code>callback<\/code>\u00a0\u53c2\u6570\u7528\u4e8e\u5728\u76f8\u5e94\u4e8b\u4ef6\u5b8c\u6210\u65f6\u8c03\u7528\u3002\uff08\u8bd1\u6ce8\uff1a\u4e0a\u9762\u8fd9\u4e2a\u4f8b\u5b50\u4e2d\u7684\u76f8\u5e94\u4e8b\u4ef6\u662f\u6307\u811a\u672c\u52a0\u8f7d\uff09<br \/>\n\u8fd9\u91cc\u6211\u4eec\u5728\u00a0<code>loadScript<\/code>\u00a0\u4e2d\u5c31\u662f\u8fd9\u4e48\u505a\u7684\uff0c\u4f46\u5f53\u7136\u8fd9\u662f\u4e00\u79cd\u901a\u7528\u65b9\u6cd5\u3002<\/p>\n<h2>\u5728\u56de\u8c03\u4e2d\u56de\u8c03<\/h2>\n<p>\u6211\u4eec\u5982\u4f55\u4f9d\u6b21\u52a0\u8f7d\u4e24\u4e2a\u811a\u672c\uff1a\u7b2c\u4e00\u4e2a\uff0c\u7136\u540e\u662f\u7b2c\u4e8c\u4e2a\uff1f<br \/>\n\u81ea\u7136\u7684\u89e3\u51b3\u65b9\u6848\u662f\u5c06\u7b2c\u4e8c\u4e2a\u00a0<code>loadScript<\/code>\u00a0\u8c03\u7528\u653e\u5165\u56de\u8c03\u4e2d\uff0c\u5982\u4e0b\u6240\u793a\uff1a<\/p>\n<pre><code class=\"language-js\">loadScript('\/my\/script.js', function(script) {\n\n  alert(`\u9177\uff0c\u811a\u672c ${script.src} \u52a0\u8f7d\u5b8c\u6210\uff0c\u8ba9\u6211\u4eec\u7ee7\u7eed\u52a0\u8f7d\u53e6\u4e00\u4e2a\u5427`);\n\n  loadScript('\/my\/script2.js', function(script) {\n    alert(`\u9177\uff0c\u7b2c\u4e8c\u4e2a\u811a\u672c\u52a0\u8f7d\u5b8c\u6210`);\n  });\n\n});\n<\/code><\/pre>\n<p>\u5728\u5916\u90e8\u00a0<code>loadScript<\/code>\u00a0\u6267\u884c\u5b8c\u6210\u65f6\uff0c\u56de\u8c03\u5c31\u4f1a\u53d1\u8d77\u5185\u90e8\u7684\u00a0<code>loadScript<\/code>\u3002<br \/>\n\u5982\u679c\u6211\u4eec\u8fd8\u60f3\u8981\u4e00\u4e2a\u811a\u672c\u5462\uff1f<br \/>\n\u56e0\u6b64\uff0c\u6bcf\u4e00\u4e2a\u65b0\u884c\u4e3a\uff08action\uff09\u90fd\u5728\u56de\u8c03\u5185\u90e8\u3002\u8fd9\u5bf9\u4e8e\u51e0\u4e2a\u884c\u4e3a\u6765\u8bf4\u8fd8\u597d\uff0c\u4f46\u5bf9\u4e8e\u8bb8\u591a\u884c\u4e3a\u6765\u8bf4\u5c31\u4e0d\u597d\u4e86\uff0c\u6240\u4ee5\u6211\u4eec\u5f88\u5feb\u5c31\u4f1a\u770b\u5230\u5176\u4ed6\u53d8\u4f53\u3002<\/p>\n<h2>\u5904\u7406 Error<\/h2>\n<p>\u5728\u4e0a\u8ff0\u793a\u4f8b\u4e2d\uff0c\u6211\u4eec\u5e76\u6ca1\u6709\u8003\u8651\u51fa\u73b0 error \u7684\u60c5\u51b5\u3002\u5982\u679c\u811a\u672c\u52a0\u8f7d\u5931\u8d25\u600e\u4e48\u529e\uff1f\u6211\u4eec\u7684\u56de\u8c03\u5e94\u8be5\u80fd\u591f\u5bf9\u6b64\u4f5c\u51fa\u53cd\u5e94\u3002<br \/>\n\u8fd9\u662f\u00a0<code>loadScript<\/code>\u00a0\u7684\u6539\u8fdb\u7248\u672c\uff0c\u53ef\u4ee5\u8ddf\u8e2a\u52a0\u8f7d\u9519\u8bef\uff1a<\/p>\n<pre><code class=\"language-js\">function loadScript(src, callback) {\n  let script = document.createElement('script');\n  script.src = src;\n\n  script.onload = () =&gt; callback(null, script);\n  script.onerror = () =&gt; callback(new Error(`Script load error for ${src}`));\n\n  document.head.append(script);\n}\n<\/code><\/pre>\n<p>\u52a0\u8f7d\u6210\u529f\u65f6\uff0c\u5b83\u4f1a\u8c03\u7528\u00a0<code>callback(null, script)<\/code>\uff0c\u5426\u5219\u8c03\u7528\u00a0<code>callback(error)<\/code>\u3002<br \/>\n\u7528\u6cd5\uff1a<\/p>\n<pre><code class=\"language-js\">loadScript('\/my\/script.js', function(error, script) {\n  if (error) {\n    \/\/ \u5904\u7406 error\n  } else {\n    \/\/ \u811a\u672c\u52a0\u8f7d\u6210\u529f\n  }\n});\n<\/code><\/pre>\n<p>\u518d\u6b21\u5f3a\u8c03\uff0c\u6211\u4eec\u5728\u00a0<code>loadScript<\/code>\u00a0\u4e2d\u6240\u4f7f\u7528\u7684\u65b9\u6848\u5176\u5b9e\u5f88\u666e\u904d\u3002\u5b83\u88ab\u79f0\u4e3a\u201cError \u4f18\u5148\u56de\u8c03\uff08error-first callback\uff09\u201d\u98ce\u683c\u3002<br \/>\n\u7ea6\u5b9a\u662f\uff1a<\/p>\n<ol>\n<li><code>callback<\/code>\u00a0\u7684\u7b2c\u4e00\u4e2a\u53c2\u6570\u662f\u4e3a error \u800c\u4fdd\u7559\u7684\u3002\u4e00\u65e6\u51fa\u73b0 error\uff0c<code>callback(err)<\/code>\u00a0\u5c31\u4f1a\u88ab\u8c03\u7528\u3002<\/li>\n<li>\u7b2c\u4e8c\u4e2a\u53c2\u6570\uff08\u548c\u4e0b\u4e00\u4e2a\u53c2\u6570\uff0c\u5982\u679c\u9700\u8981\u7684\u8bdd\uff09\u7528\u4e8e\u6210\u529f\u7684\u7ed3\u679c\u3002\u6b64\u65f6\u00a0<code>callback(null, result1, result2\u2026)<\/code>\u00a0\u5c31\u4f1a\u88ab\u8c03\u7528\u3002<br \/>\n\u56e0\u6b64\uff0c\u5355\u4e00\u7684\u00a0<code>callback<\/code>\u00a0\u51fd\u6570\u53ef\u4ee5\u540c\u65f6\u5177\u6709\u62a5\u544a error \u548c\u4f20\u9012\u8fd4\u56de\u7ed3\u679c\u7684\u4f5c\u7528\u3002<\/li>\n<\/ol>\n<h2>\u5384\u8fd0\u91d1\u5b57\u5854<\/h2>\n<p>\u4e4d\u4e00\u770b\uff0c\u5b83\u50cf\u662f\u4e00\u79cd\u53ef\u884c\u7684\u5f02\u6b65\u7f16\u7a0b\u65b9\u5f0f\u3002\u7684\u786e\u5982\u6b64\uff0c\u5bf9\u4e8e\u4e00\u4e2a\u6216\u4e24\u4e2a\u5d4c\u5957\u7684\u8c03\u7528\u770b\u8d77\u6765\u8fd8\u4e0d\u9519\u3002<br \/>\n\u4f46\u5bf9\u4e8e\u4e00\u4e2a\u63a5\u4e00\u4e2a\u7684\u591a\u4e2a\u5f02\u6b65\u884c\u4e3a\uff0c\u4ee3\u7801\u5c06\u4f1a\u53d8\u6210\u8fd9\u6837\uff1a<\/p>\n<pre><code class=\"language-js\">loadScript('1.js', function(error, script) {\n\n  if (error) {\n    handleError(error);\n  } else {\n    \/\/ ...\n    loadScript('2.js', function(error, script) {\n      if (error) {\n        handleError(error);\n      } else {\n        \/\/ ...\n        loadScript('3.js', function(error, script) {\n          if (error) {\n            handleError(error);\n          } else {\n            \/\/ ...\u52a0\u8f7d\u5b8c\u6240\u6709\u811a\u672c\u540e\u7ee7\u7eed (*)\n          }\n        });\n\n      }\n    });\n  }\n});\n<\/code><\/pre>\n<p>\u5728\u4e0a\u9762\u8fd9\u6bb5\u4ee3\u7801\u4e2d\uff1a<\/p>\n<ol>\n<li>\u6211\u4eec\u52a0\u8f7d\u00a0<code>1.js<\/code>\uff0c\u5982\u679c\u6ca1\u6709\u53d1\u751f\u9519\u8bef\u3002<\/li>\n<li>\u6211\u4eec\u52a0\u8f7d\u00a0<code>2.js<\/code>\uff0c\u5982\u679c\u6ca1\u6709\u53d1\u751f\u9519\u8bef\u2026\u2026<\/li>\n<li>\u6211\u4eec\u52a0\u8f7d\u00a0<code>3.js<\/code>\uff0c\u5982\u679c\u6ca1\u6709\u53d1\u751f\u9519\u8bef \u2014\u2014 \u505a\u5176\u4ed6\u64cd\u4f5c\u00a0<code>(*)<\/code>\u3002<br \/>\n\u968f\u7740\u8c03\u7528\u5d4c\u5957\u7684\u589e\u52a0\uff0c\u4ee3\u7801\u5c42\u6b21\u53d8\u5f97\u66f4\u6df1\uff0c\u7ef4\u62a4\u96be\u5ea6\u4e5f\u968f\u4e4b\u589e\u52a0\uff0c\u5c24\u5176\u662f\u6211\u4eec\u4f7f\u7528\u7684\u662f\u53ef\u80fd\u5305\u542b\u4e86\u5f88\u591a\u5faa\u73af\u548c\u6761\u4ef6\u8bed\u53e5\u7684\u771f\u5b9e\u4ee3\u7801\uff0c\u800c\u4e0d\u662f\u4f8b\u5b50\u4e2d\u7684\u00a0<code>...<\/code>\u3002<br \/>\n\u6709\u65f6\u8fd9\u4e9b\u88ab\u79f0\u4e3a\u201c\u56de\u8c03\u5730\u72f1\u201d\u6216\u201c\u5384\u8fd0\u91d1\u5b57\u5854\u201d\u3002<br \/>\n\u5d4c\u5957\u8c03\u7528\u7684\u201c\u91d1\u5b57\u5854\u201d\u968f\u7740\u6bcf\u4e2a\u5f02\u6b65\u884c\u4e3a\u4f1a\u5411\u53f3\u589e\u957f\u3002\u5f88\u5feb\u5b83\u5c31\u5931\u63a7\u4e86\u3002<br \/>\n\u6240\u4ee5\u8fd9\u79cd\u7f16\u7801\u65b9\u5f0f\u4e0d\u662f\u5f88\u597d\u3002<br \/>\n\u6211\u4eec\u53ef\u4ee5\u901a\u8fc7\u4f7f\u6bcf\u4e2a\u884c\u4e3a\u90fd\u6210\u4e3a\u4e00\u4e2a\u72ec\u7acb\u7684\u51fd\u6570\u6765\u5c1d\u8bd5\u51cf\u8f7b\u8fd9\u79cd\u95ee\u9898\uff0c\u5982\u4e0b\u6240\u793a\uff1a<\/li>\n<\/ol>\n<pre><code class=\"language-js\">loadScript('1.js', step1);\n\nfunction step1(error, script) {\n  if (error) {\n    handleError(error);\n  } else {\n    \/\/ ...\n    loadScript('2.js', step2);\n  }\n}\n\nfunction step2(error, script) {\n  if (error) {\n    handleError(error);\n  } else {\n    \/\/ ...\n    loadScript('3.js', step3);\n  }\n}\n\nfunction step3(error, script) {\n  if (error) {\n    handleError(error);\n  } else {\n    \/\/ ...\u52a0\u8f7d\u5b8c\u6240\u6709\u811a\u672c\u540e\u7ee7\u7eed (*)\n  }\n}\n<\/code><\/pre>\n<p>\u770b\u5230\u4e86\u5417\uff1f\u5b83\u7684\u4f5c\u7528\u76f8\u540c\uff0c\u4f46\u662f\u6ca1\u6709\u6df1\u5c42\u7684\u5d4c\u5957\u4e86\uff0c\u56e0\u4e3a\u6211\u4eec\u5c06\u6bcf\u4e2a\u884c\u4e3a\u90fd\u7f16\u5199\u6210\u4e86\u4e00\u4e2a\u72ec\u7acb\u7684\u9876\u5c42\u51fd\u6570\u3002<br \/>\n\u5b83\u53ef\u4ee5\u5de5\u4f5c\uff0c\u4f46\u662f\u4ee3\u7801\u770b\u8d77\u6765\u5c31\u50cf\u662f\u4e00\u4e2a\u88ab\u6495\u88c2\u7684\u8868\u683c\u3002\u4f60\u53ef\u80fd\u5df2\u7ecf\u6ce8\u610f\u5230\u4e86\uff0c\u5b83\u7684\u53ef\u8bfb\u6027\u5f88\u5dee\uff0c\u5728\u9605\u8bfb\u65f6\u4f60\u9700\u8981\u5728\u5404\u4e2a\u4ee3\u7801\u5757\u4e4b\u95f4\u8df3\u8f6c\u3002\u8fd9\u5f88\u4e0d\u65b9\u4fbf\uff0c\u7279\u522b\u662f\u5982\u679c\u8bfb\u8005\u5bf9\u4ee3\u7801\u4e0d\u719f\u6089\uff0c\u4ed6\u4eec\u751a\u81f3\u4e0d\u77e5\u9053\u5e94\u8be5\u8df3\u8f6c\u5230\u4ec0\u4e48\u5730\u65b9\u3002<br \/>\n\u6b64\u5916\uff0c\u540d\u4e3a\u00a0<code>step*<\/code>\u00a0\u7684\u51fd\u6570\u90fd\u662f\u4e00\u6b21\u6027\u4f7f\u7528\u7684\uff0c\u521b\u5efa\u5b83\u4eec\u5c31\u662f\u4e3a\u4e86\u907f\u514d\u201c\u5384\u8fd0\u91d1\u5b57\u5854\u201d\u3002\u6ca1\u6709\u4eba\u4f1a\u5728\u884c\u4e3a\u94fe\u4e4b\u5916\u91cd\u7528\u5b83\u4eec\u3002\u56e0\u6b64\uff0c\u8fd9\u91cc\u7684\u547d\u540d\u7a7a\u95f4\u6709\u70b9\u6df7\u4e71\u3002<br \/>\n\u6211\u4eec\u5e0c\u671b\u8fd8\u6709\u66f4\u597d\u7684\u65b9\u6cd5\u3002<br \/>\n\u5e78\u8fd0\u7684\u662f\uff0c\u6709\u5176\u4ed6\u65b9\u6cd5\u53ef\u4ee5\u907f\u514d\u6b64\u7c7b\u91d1\u5b57\u5854\u3002\u6700\u597d\u7684\u65b9\u6cd5\u4e4b\u4e00\u5c31\u662f \u201cpromise\u201d\uff0c\u6211\u4eec\u5c06\u5728\u4e0b\u4e00\u7ae0\u4e2d\u4ecb\u7ecd\u5b83\u3002<\/p>\n<h1>Promise<\/h1>\n<p>\u60f3\u8c61\u4e00\u4e0b\uff0c\u4f60\u662f\u4e00\u4f4d\u9876\u5c16\u6b4c\u624b\uff0c\u7c89\u4e1d\u6ca1\u65e5\u6ca1\u591c\u5730\u8be2\u95ee\u4f60\u4e0b\u9996\u6b4c\u4ec0\u4e48\u65f6\u5019\u53d1\u3002<br \/>\n\u4e3a\u4e86\u4ece\u4e2d\u89e3\u653e\uff0c\u4f60\u627f\u8bfa\uff08promise\uff09\u4f1a\u5728\u5355\u66f2\u53d1\u5e03\u7684\u7b2c\u4e00\u65f6\u95f4\u53d1\u7ed9\u4ed6\u4eec\u3002\u4f60\u7ed9\u4e86\u7c89\u4e1d\u4eec\u4e00\u4e2a\u5217\u8868\u3002\u4ed6\u4eec\u53ef\u4ee5\u5728\u4e0a\u9762\u586b\u5199\u4ed6\u4eec\u7684\u7535\u5b50\u90ae\u4ef6\u5730\u5740\uff0c\u4ee5\u4fbf\u5f53\u6b4c\u66f2\u53d1\u5e03\u540e\uff0c\u8ba9\u6240\u6709\u8ba2\u9605\u4e86\u7684\u4eba\u80fd\u591f\u7acb\u5373\u6536\u5230\u3002\u5373\u4fbf\u9047\u5230\u4e0d\u6d4b\uff0c\u4f8b\u5982\u5f55\u97f3\u5ba4\u53d1\u751f\u4e86\u706b\u707e\uff0c\u4ee5\u81f4\u4f60\u65e0\u6cd5\u53d1\u5e03\u65b0\u6b4c\uff0c\u4ed6\u4eec\u4e5f\u80fd\u53ca\u65f6\u6536\u5230\u76f8\u5173\u901a\u77e5\u3002<br \/>\n\u6bcf\u4e2a\u4eba\u90fd\u5f88\u5f00\u5fc3\uff1a\u4f60\u4e0d\u4f1a\u88ab\u4efb\u4f55\u4eba\u50ac\u4fc3\uff0c\u7c89\u4e1d\u4eec\u4e5f\u4e0d\u7528\u62c5\u5fc3\u9519\u8fc7\u6b4c\u66f2\u53d1\u884c\u3002<br \/>\n\u8fd9\u662f\u6211\u4eec\u5728\u7f16\u7a0b\u4e2d\u7ecf\u5e38\u9047\u5230\u7684\u4e8b\u513f\u4e0e\u771f\u5b9e\u751f\u6d3b\u7684\u7c7b\u6bd4\uff1a<\/p>\n<ol>\n<li>\u201c\u751f\u4ea7\u8005\u4ee3\u7801\uff08producing code\uff09\u201d\u4f1a\u505a\u4e00\u4e9b\u4e8b\u513f\uff0c\u5e76\u4e14\u4f1a\u9700\u8981\u4e00\u4e9b\u65f6\u95f4\u3002\u4f8b\u5982\uff0c\u901a\u8fc7\u7f51\u7edc\u52a0\u8f7d\u6570\u636e\u7684\u4ee3\u7801\u3002\u5b83\u5c31\u50cf\u4e00\u4f4d\u201c\u6b4c\u624b\u201d\u3002<\/li>\n<li>\u201c\u6d88\u8d39\u8005\u4ee3\u7801\uff08consuming code\uff09\u201d\u60f3\u8981\u5728\u201c\u751f\u4ea7\u8005\u4ee3\u7801\u201d\u5b8c\u6210\u5de5\u4f5c\u7684\u7b2c\u4e00\u65f6\u95f4\u5c31\u80fd\u83b7\u5f97\u5176\u5de5\u4f5c\u6210\u679c\u3002\u8bb8\u591a\u51fd\u6570\u53ef\u80fd\u90fd\u9700\u8981\u8fd9\u4e2a\u7ed3\u679c\u3002\u8fd9\u4e9b\u5c31\u662f\u201c\u7c89\u4e1d\u201d\u3002<\/li>\n<li><strong>Promise<\/strong>\u00a0\u662f\u5c06\u201c\u751f\u4ea7\u8005\u4ee3\u7801\u201d\u548c\u201c\u6d88\u8d39\u8005\u4ee3\u7801\u201d\u8fde\u63a5\u5728\u4e00\u8d77\u7684\u4e00\u4e2a\u7279\u6b8a\u7684 JavaScript \u5bf9\u8c61\u3002\u7528\u6211\u4eec\u7684\u7c7b\u6bd4\u6765\u8bf4\uff1a\u8fd9\u5c31\u662f\u5c31\u50cf\u662f\u201c\u8ba2\u9605\u5217\u8868\u201d\u3002\u201c\u751f\u4ea7\u8005\u4ee3\u7801\u201d\u82b1\u8d39\u5b83\u6240\u9700\u7684\u4efb\u610f\u957f\u5ea6\u65f6\u95f4\u6765\u4ea7\u51fa\u6240\u627f\u8bfa\u7684\u7ed3\u679c\uff0c\u800c \u201cpromise\u201d \u5c06\u5728\u5b83\uff08\u8bd1\u6ce8\uff1a\u6307\u7684\u662f\u201c\u751f\u4ea7\u8005\u4ee3\u7801\u201d\uff0c\u4e5f\u5c31\u662f\u4e0b\u6587\u6240\u8bf4\u7684 executor\uff09\u51c6\u5907\u597d\u65f6\uff0c\u5c06\u7ed3\u679c\u5411\u6240\u6709\u8ba2\u9605\u4e86\u7684\u4ee3\u7801\u5f00\u653e\u3002<br \/>\n\u8fd9\u79cd\u7c7b\u6bd4\u5e76\u4e0d\u5341\u5206\u51c6\u786e\uff0c\u56e0\u4e3a JavaScipt \u7684 promise \u6bd4\u7b80\u5355\u7684\u8ba2\u9605\u5217\u8868\u66f4\u52a0\u590d\u6742\uff1a\u5b83\u4eec\u8fd8\u62e5\u6709\u5176\u4ed6\u7684\u529f\u80fd\u548c\u5c40\u9650\u6027\u3002\u4f46\u4ee5\u6b64\u5f00\u59cb\u633a\u597d\u7684\u3002<br \/>\nPromise \u5bf9\u8c61\u7684\u6784\u9020\u5668\uff08constructor\uff09\u8bed\u6cd5\u5982\u4e0b\uff1a<\/li>\n<\/ol>\n<pre><code class=\"language-js\">let promise = new Promise(function(resolve, reject) {\n  \/\/ executor\uff08\u751f\u4ea7\u8005\u4ee3\u7801\uff0c\u201c\u6b4c\u624b\u201d\uff09\n});\n<\/code><\/pre>\n<p>\u4f20\u9012\u7ed9\u00a0<code>new Promise<\/code>\u00a0\u7684\u51fd\u6570\u88ab\u79f0\u4e3a\u00a0<strong>executor<\/strong>\u3002\u5f53\u00a0<code>new Promise<\/code>\u00a0\u88ab\u521b\u5efa\uff0cexecutor \u4f1a\u81ea\u52a8\u8fd0\u884c\u3002\u5b83\u5305\u542b\u6700\u7ec8\u5e94\u4ea7\u51fa\u7ed3\u679c\u7684\u751f\u4ea7\u8005\u4ee3\u7801\u3002\u6309\u7167\u4e0a\u9762\u7684\u7c7b\u6bd4\uff1aexecutor \u5c31\u662f\u201c\u6b4c\u624b\u201d\u3002<br \/>\n\u5b83\u7684\u53c2\u6570\u00a0<code>resolve<\/code>\u00a0\u548c\u00a0<code>reject<\/code>\u00a0\u662f\u7531 JavaScript \u81ea\u8eab\u63d0\u4f9b\u7684\u56de\u8c03\u3002\u6211\u4eec\u7684\u4ee3\u7801\u4ec5\u5728 executor \u7684\u5185\u90e8\u3002<br \/>\n\u5f53 executor \u83b7\u5f97\u4e86\u7ed3\u679c\uff0c\u65e0\u8bba\u662f\u65e9\u8fd8\u662f\u665a\u90fd\u6ca1\u5173\u7cfb\uff0c\u5b83\u5e94\u8be5\u8c03\u7528\u4ee5\u4e0b\u56de\u8c03\u4e4b\u4e00\uff1a<\/p>\n<ul>\n<li><code>resolve(value)<\/code>\u00a0\u2014\u2014 \u5982\u679c\u4efb\u52a1\u6210\u529f\u5b8c\u6210\u5e76\u5e26\u6709\u7ed3\u679c\u00a0<code>value<\/code>\u3002<\/li>\n<li><code>reject(error)<\/code>\u00a0\u2014\u2014 \u5982\u679c\u51fa\u73b0\u4e86 error\uff0c<code>error<\/code>\u00a0\u5373\u4e3a error \u5bf9\u8c61\u3002<br \/>\n\u6240\u4ee5\u603b\u7ed3\u4e00\u4e0b\u5c31\u662f\uff1aexecutor \u4f1a\u81ea\u52a8\u8fd0\u884c\u5e76\u5c1d\u8bd5\u6267\u884c\u4e00\u9879\u5de5\u4f5c\u3002\u5c1d\u8bd5\u7ed3\u675f\u540e\uff0c\u5982\u679c\u6210\u529f\u5219\u8c03\u7528\u00a0<code>resolve<\/code>\uff0c\u5982\u679c\u51fa\u73b0 error \u5219\u8c03\u7528\u00a0<code>reject<\/code>\u3002<br \/>\n\u7531\u00a0<code>new Promise<\/code>\u00a0\u6784\u9020\u5668\u8fd4\u56de\u7684\u00a0<code>promise<\/code>\u00a0\u5bf9\u8c61\u5177\u6709\u4ee5\u4e0b\u5185\u90e8\u5c5e\u6027\uff1a<\/li>\n<li><code>state<\/code>\u00a0\u2014\u2014 \u6700\u521d\u662f\u00a0<code>&quot;pending&quot;<\/code>\uff0c\u7136\u540e\u5728\u00a0<code>resolve<\/code>\u00a0\u88ab\u8c03\u7528\u65f6\u53d8\u4e3a\u00a0<code>&quot;fulfilled&quot;<\/code>\uff0c\u6216\u8005\u5728\u00a0<code>reject<\/code>\u00a0\u88ab\u8c03\u7528\u65f6\u53d8\u4e3a\u00a0<code>&quot;rejected&quot;<\/code>\u3002<\/li>\n<li><code>result<\/code>\u00a0\u2014\u2014 \u6700\u521d\u662f\u00a0<code>undefined<\/code>\uff0c\u7136\u540e\u5728\u00a0<code>resolve(value)<\/code>\u00a0\u88ab\u8c03\u7528\u65f6\u53d8\u4e3a\u00a0<code>value<\/code>\uff0c\u6216\u8005\u5728\u00a0<code>reject(error)<\/code>\u00a0\u88ab\u8c03\u7528\u65f6\u53d8\u4e3a\u00a0<code>error<\/code>\u3002<br \/>\n\u6240\u4ee5\uff0cexecutor \u6700\u7ec8\u5c06\u00a0<code>promise<\/code>\u00a0\u79fb\u81f3\u4ee5\u4e0b\u72b6\u6001\u4e4b\u4e00\uff1a<br \/>\n<div class='fancybox-wrapper lazyload-container-unload' data-fancybox='post-images' href='https:\/\/levin.ink\/wp-content\/uploads\/2024\/06\/Pasted-image-20240621161601.png'><img class=\"lazyload lazyload-style-1\" src=\"data:image\/svg+xml;base64,PCEtLUFyZ29uTG9hZGluZy0tPgo8c3ZnIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgc3Ryb2tlPSIjZmZmZmZmMDAiPjxnPjwvZz4KPC9zdmc+\"  decoding=\"async\" data-original=\"https:\/\/levin.ink\/wp-content\/uploads\/2024\/06\/Pasted-image-20240621161601.png\" src=\"data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB\/AAffA0nNPuCLAAAAAElFTkSuQmCC\" alt=\"Pasted image 20240621161601.png\"><\/div><br \/>\n\u4e0b\u9762\u662f\u4e00\u4e2a promise \u6784\u9020\u5668\u548c\u4e00\u4e2a\u7b80\u5355\u7684 executor \u51fd\u6570\uff0c\u8be5 executor \u51fd\u6570\u5177\u6709\u5305\u542b\u65f6\u95f4\uff08\u5373\u00a0<code>setTimeout<\/code>\uff09\u7684\u201c\u751f\u4ea7\u8005\u4ee3\u7801\u201d\uff1a<\/li>\n<\/ul>\n<pre><code class=\"language-js\">let promise = new Promise(function(resolve, reject) {\n  \/\/ \u5f53 promise \u88ab\u6784\u9020\u5b8c\u6210\u65f6\uff0c\u81ea\u52a8\u6267\u884c\u6b64\u51fd\u6570\n\n  \/\/ 1 \u79d2\u540e\u53d1\u51fa\u5de5\u4f5c\u5df2\u7ecf\u88ab\u5b8c\u6210\u7684\u4fe1\u53f7\uff0c\u5e76\u5e26\u6709\u7ed3\u679c &quot;done&quot;\n  setTimeout(() =&gt; resolve(&quot;done&quot;), 1000);\n});\n<\/code><\/pre>\n<p>\u901a\u8fc7\u8fd0\u884c\u4e0a\u9762\u7684\u4ee3\u7801\uff0c\u6211\u4eec\u53ef\u4ee5\u770b\u5230\u4e24\u4ef6\u4e8b\uff1a<\/p>\n<ol>\n<li>\n<p>executor \u88ab\u81ea\u52a8\u4e14\u7acb\u5373\u8c03\u7528\uff08\u901a\u8fc7\u00a0<code>new Promise<\/code>\uff09\u3002<\/p>\n<\/li>\n<li>\n<p>executor \u63a5\u53d7\u4e24\u4e2a\u53c2\u6570\uff1a<code>resolve<\/code>\u00a0\u548c\u00a0<code>reject<\/code>\u3002\u8fd9\u4e9b\u51fd\u6570\u7531 JavaScript \u5f15\u64ce\u9884\u5148\u5b9a\u4e49\uff0c\u56e0\u6b64\u6211\u4eec\u4e0d\u9700\u8981\u521b\u5efa\u5b83\u4eec\u3002\u6211\u4eec\u53ea\u9700\u8981\u5728\u51c6\u5907\u597d\uff08\u8bd1\u6ce8\uff1a\u6307\u7684\u662f executor \u51c6\u5907\u597d\uff09\u65f6\u8c03\u7528\u5176\u4e2d\u4e4b\u4e00\u5373\u53ef\u3002<\/p>\n<p>\u7ecf\u8fc7 1 \u79d2\u7684\u201c\u5904\u7406\u201d\u540e\uff0cexecutor \u8c03\u7528\u00a0<code>resolve(&quot;done&quot;)<\/code>\u00a0\u6765\u4ea7\u751f\u7ed3\u679c\u3002\u8fd9\u5c06\u6539\u53d8\u00a0<code>promise<\/code>\u00a0\u5bf9\u8c61\u7684\u72b6\u6001\uff1a<br \/>\n\u8fd9\u662f\u4e00\u4e2a\u6210\u529f\u5b8c\u6210\u4efb\u52a1\u7684\u4f8b\u5b50\uff0c\u4e00\u4e2a\u201c\u6210\u529f\u5b9e\u73b0\u4e86\u7684\u8bfa\u8a00\u201d\u3002<br \/>\n\u4e0b\u9762\u5219\u662f\u4e00\u4e2a executor \u4ee5 error \u62d2\u7edd promise \u7684\u793a\u4f8b\uff1a<\/p>\n<\/li>\n<\/ol>\n<pre><code class=\"language-js\">let promise = new Promise(function(resolve, reject) {\n  \/\/ 1 \u79d2\u540e\u53d1\u51fa\u5de5\u4f5c\u5df2\u7ecf\u88ab\u5b8c\u6210\u7684\u4fe1\u53f7\uff0c\u5e76\u5e26\u6709 error\n  setTimeout(() =&gt; reject(new Error(&quot;Whoops!&quot;)), 1000);\n});\n<\/code><\/pre>\n<p>\u603b\u800c\u8a00\u4e4b\uff0cexecutor \u5e94\u8be5\u6267\u884c\u4e00\u9879\u5de5\u4f5c\uff08\u901a\u5e38\u662f\u9700\u8981\u82b1\u8d39\u4e00\u4e9b\u65f6\u95f4\u7684\u4e8b\u513f\uff09\uff0c\u7136\u540e\u8c03\u7528\u00a0<code>resolve<\/code>\u00a0\u6216\u00a0<code>reject<\/code>\u00a0\u6765\u6539\u53d8\u5bf9\u5e94\u7684 promise \u5bf9\u8c61\u7684\u72b6\u6001\u3002<br \/>\n\u4e0e\u6700\u521d\u7684 \u201cpending\u201d promise \u76f8\u53cd\uff0c\u4e00\u4e2a resolved \u6216 rejected \u7684 promise \u90fd\u4f1a\u88ab\u79f0\u4e3a \u201csettled\u201d\u3002<\/p>\n<blockquote>\n<p>\u8fd9\u53ea\u80fd\u6709\u4e00\u4e2a\u7ed3\u679c\u6216\u4e00\u4e2a error<br \/>\nexecutor \u53ea\u80fd\u8c03\u7528\u4e00\u4e2a\u00a0<code>resolve<\/code>\u00a0\u6216\u4e00\u4e2a\u00a0<code>reject<\/code>\u3002\u4efb\u4f55\u72b6\u6001\u7684\u66f4\u6539\u90fd\u662f\u6700\u7ec8\u7684\u3002<br \/>\n\u6240\u6709\u5176\u4ed6\u7684\u518d\u5bf9\u00a0<code>resolve<\/code>\u00a0\u548c\u00a0<code>reject<\/code>\u00a0\u7684\u8c03\u7528\u90fd\u4f1a\u88ab\u5ffd\u7565\uff1a<\/p>\n<\/blockquote>\n<pre><code class=\"language-js\">let promise = new Promise(function(resolve, reject) {\n  resolve(&quot;done&quot;);\n\n  reject(new Error(&quot;\u2026&quot;)); \/\/ \u88ab\u5ffd\u7565\n  setTimeout(() =&gt; resolve(&quot;\u2026&quot;)); \/\/ \u88ab\u5ffd\u7565\n});\n<\/code><\/pre>\n<blockquote>\n<p>\u8fd9\u7684\u5b97\u65e8\u662f\uff0c\u4e00\u4e2a\u88ab executor \u5b8c\u6210\u7684\u5de5\u4f5c\u53ea\u80fd\u6709\u4e00\u4e2a\u7ed3\u679c\u6216\u4e00\u4e2a error\u3002<br \/>\n\u5e76\u4e14\uff0c<code>resolve\/reject<\/code>\u00a0\u53ea\u9700\u8981\u4e00\u4e2a\u53c2\u6570\uff08\u6216\u4e0d\u5305\u542b\u4efb\u4f55\u53c2\u6570\uff09\uff0c\u5e76\u4e14\u5c06\u5ffd\u7565\u989d\u5916\u7684\u53c2\u6570\u3002<\/p>\n<\/blockquote>\n<blockquote>\n<p>\u4ee5\u00a0<code>Error<\/code>\u00a0\u5bf9\u8c61 reject<br \/>\n\u5982\u679c\u4ec0\u4e48\u4e1c\u897f\u51fa\u4e86\u95ee\u9898\uff0cexecutor \u5e94\u8be5\u8c03\u7528\u00a0<code>reject<\/code>\u3002\u8fd9\u53ef\u4ee5\u4f7f\u7528\u4efb\u4f55\u7c7b\u578b\u7684\u53c2\u6570\u6765\u5b8c\u6210\uff08\u5c31\u50cf\u00a0<code>resolve<\/code>\u00a0\u4e00\u6837\uff09\u3002\u4f46\u5efa\u8bae\u4f7f\u7528\u00a0<code>Error<\/code>\u00a0\u5bf9\u8c61\uff08\u6216\u7ee7\u627f\u81ea\u00a0<code>Error<\/code>\u00a0\u7684\u5bf9\u8c61\uff09\u3002\u8fd9\u6837\u505a\u7684\u7406\u7531\u5f88\u5feb\u5c31\u4f1a\u663e\u800c\u6613\u89c1\u3002<\/p>\n<\/blockquote>\n<blockquote>\n<p>resolve\/reject \u53ef\u4ee5\u7acb\u5373\u8fdb\u884c<br \/>\n\u5b9e\u9645\u4e0a\uff0cexecutor \u901a\u5e38\u662f\u5f02\u6b65\u6267\u884c\u67d0\u4e9b\u64cd\u4f5c\uff0c\u5e76\u5728\u4e00\u6bb5\u65f6\u95f4\u540e\u8c03\u7528\u00a0<code>resolve\/reject<\/code>\uff0c\u4f46\u8fd9\u4e0d\u662f\u5fc5\u987b\u7684\u3002\u6211\u4eec\u8fd8\u53ef\u4ee5\u7acb\u5373\u8c03\u7528\u00a0<code>resolve<\/code>\u00a0\u6216\u00a0<code>reject<\/code>\uff0c\u5c31\u50cf\u8fd9\u6837\uff1a<\/p>\n<\/blockquote>\n<pre><code class=\"language-js\">let promise = new Promise(function(resolve, reject) {\n  \/\/ \u4e0d\u82b1\u65f6\u95f4\u53bb\u505a\u8fd9\u9879\u5de5\u4f5c\n  resolve(123); \/\/ \u7acb\u5373\u7ed9\u51fa\u7ed3\u679c\uff1a123\n});\n<\/code><\/pre>\n<blockquote>\n<p>\u4f8b\u5982\uff0c\u5f53\u6211\u4eec\u5f00\u59cb\u505a\u4e00\u4e2a\u4efb\u52a1\u65f6\uff0c\u4f46\u968f\u540e\u770b\u5230\u4e00\u5207\u90fd\u5df2\u7ecf\u5b8c\u6210\u5e76\u5df2\u88ab\u7f13\u5b58\u65f6\uff0c\u53ef\u80fd\u5c31\u4f1a\u53d1\u751f\u8fd9\u79cd\u60c5\u51b5\u3002<br \/>\n\u8fd9\u633a\u597d\u3002\u6211\u4eec\u7acb\u5373\u5c31\u6709\u4e86\u4e00\u4e2a resolved \u7684 promise\u3002<\/p>\n<\/blockquote>\n<blockquote>\n<p><code>state<\/code>\u00a0\u548c\u00a0<code>result<\/code>\u00a0\u90fd\u662f\u5185\u90e8\u7684<br \/>\nPromise \u5bf9\u8c61\u7684\u00a0<code>state<\/code>\u00a0\u548c\u00a0<code>result<\/code>\u00a0\u5c5e\u6027\u90fd\u662f\u5185\u90e8\u7684\u3002\u6211\u4eec\u65e0\u6cd5\u76f4\u63a5\u8bbf\u95ee\u5b83\u4eec\u3002\u4f46\u6211\u4eec\u53ef\u4ee5\u5bf9\u5b83\u4eec\u4f7f\u7528\u00a0<code>.then<\/code>\/<code>.catch<\/code>\/<code>.finally<\/code>\u00a0\u65b9\u6cd5\u3002\u6211\u4eec\u5728\u4e0b\u9762\u5bf9\u8fd9\u4e9b\u65b9\u6cd5\u8fdb\u884c\u4e86\u63cf\u8ff0\u3002<\/p>\n<\/blockquote>\n<h2>\u6d88\u8d39\u8005 then,catch<\/h2>\n<p>Promise \u5bf9\u8c61\u5145\u5f53\u7684\u662f executor\uff08\u201c\u751f\u4ea7\u8005\u4ee3\u7801\u201d\u6216\u201c\u6b4c\u624b\u201d\uff09\u548c\u6d88\u8d39\u51fd\u6570\uff08\u201c\u7c89\u4e1d\u201d\uff09\u4e4b\u95f4\u7684\u8fde\u63a5\uff0c\u540e\u8005\u5c06\u63a5\u6536\u7ed3\u679c\u6216 error\u3002\u53ef\u4ee5\u901a\u8fc7\u4f7f\u7528\u00a0<code>.then<\/code>\u00a0\u548c\u00a0<code>.catch<\/code>\u00a0\u65b9\u6cd5\u6ce8\u518c\u6d88\u8d39\u51fd\u6570\u3002<\/p>\n<h3>then<\/h3>\n<p>\u6700\u91cd\u8981\u6700\u57fa\u7840\u7684\u4e00\u4e2a\u5c31\u662f\u00a0<code>.then<\/code>\u3002<br \/>\n\u8bed\u6cd5\u5982\u4e0b\uff1a<\/p>\n<pre><code class=\"language-js\">promise.then(\n  function(result) { \/* handle a successful result *\/ },\n  function(error) { \/* handle an error *\/ }\n);\n<\/code><\/pre>\n<p><code>.then<\/code>\u00a0\u7684\u7b2c\u4e00\u4e2a\u53c2\u6570\u662f\u4e00\u4e2a\u51fd\u6570\uff0c\u8be5\u51fd\u6570\u5c06\u5728 promise resolved \u4e14\u63a5\u6536\u5230\u7ed3\u679c\u540e\u6267\u884c\u3002<br \/>\n<code>.then<\/code>\u00a0\u7684\u7b2c\u4e8c\u4e2a\u53c2\u6570\u4e5f\u662f\u4e00\u4e2a\u51fd\u6570\uff0c\u8be5\u51fd\u6570\u5c06\u5728 promise rejected \u4e14\u63a5\u6536\u5230 error \u4fe1\u606f\u540e\u6267\u884c\u3002<br \/>\n\u4f8b\u5982\uff0c\u4ee5\u4e0b\u662f\u5bf9\u6210\u529f resolved \u7684 promise \u505a\u51fa\u7684\u53cd\u5e94\uff1a<\/p>\n<pre><code class=\"language-js\">let promise = new Promise(function(resolve, reject) {\n  setTimeout(() =&gt; resolve(&quot;done!&quot;), 1000);\n});\n\n\/\/ resolve \u8fd0\u884c .then \u4e2d\u7684\u7b2c\u4e00\u4e2a\u51fd\u6570\npromise.then(\n  result =&gt; alert(result), \/\/ 1 \u79d2\u540e\u663e\u793a &quot;done!&quot;\n  error =&gt; alert(error) \/\/ \u4e0d\u8fd0\u884c\n);\n<\/code><\/pre>\n<p>\u7b2c\u4e00\u4e2a\u51fd\u6570\u88ab\u8fd0\u884c\u4e86\u3002<br \/>\n\u5982\u679c\u6211\u4eec\u53ea\u5bf9\u6210\u529f\u5b8c\u6210\u7684\u60c5\u51b5\u611f\u5174\u8da3\uff0c\u90a3\u4e48\u6211\u4eec\u53ef\u4ee5\u53ea\u4e3a\u00a0<code>.then<\/code>\u00a0\u63d0\u4f9b\u4e00\u4e2a\u51fd\u6570\u53c2\u6570\uff1a<\/p>\n<pre><code class=\"language-js\">let promise = new Promise(resolve =&gt; {\n  setTimeout(() =&gt; resolve(&quot;done!&quot;), 1000);\n});\n\npromise.then(alert); \/\/ 1 \u79d2\u540e\u663e\u793a &quot;done!&quot;\n<\/code><\/pre>\n<h3>catch<\/h3>\n<p>\u5982\u679c\u6211\u4eec\u53ea\u5bf9 error \u611f\u5174\u8da3\uff0c\u90a3\u4e48\u6211\u4eec\u53ef\u4ee5\u4f7f\u7528\u00a0<code>null<\/code>\u00a0\u4f5c\u4e3a\u7b2c\u4e00\u4e2a\u53c2\u6570\uff1a<code>.then(null, errorHandlingFunction)<\/code>\u3002\u6216\u8005\u6211\u4eec\u4e5f\u53ef\u4ee5\u4f7f\u7528\u00a0<code>.catch(errorHandlingFunction)<\/code>\uff0c\u5176\u5b9e\u662f\u4e00\u6837\u7684\uff1a<\/p>\n<pre><code class=\"language-js\">let promise = new Promise((resolve, reject) =&gt; {\n  setTimeout(() =&gt; reject(new Error(&quot;Whoops!&quot;)), 1000);\n});\n\n\/\/ .catch(f) \u4e0e promise.then(null, f) \u4e00\u6837\npromise.catch(alert); \/\/ 1 \u79d2\u540e\u663e\u793a &quot;Error: Whoops!&quot;\n<\/code><\/pre>\n<p><code>.catch(f)<\/code>\u00a0\u8c03\u7528\u662f\u00a0<code>.then(null, f)<\/code>\u00a0\u7684\u5b8c\u5168\u7684\u6a21\u62df\uff0c\u5b83\u53ea\u662f\u4e00\u4e2a\u7b80\u5199\u5f62\u5f0f\u3002<\/p>\n<h2>\u6e05\u7406 finally<\/h2>\n<p>\u5c31\u50cf\u5e38\u89c4\u00a0<code>try {...} catch {...}<\/code>\u00a0\u4e2d\u7684\u00a0<code>finally<\/code>\u00a0\u5b50\u53e5\u4e00\u6837\uff0cpromise \u4e2d\u4e5f\u6709\u00a0<code>finally<\/code>\u3002<br \/>\n\u8c03\u7528\u00a0<code>.finally(f)<\/code>\u00a0\u7c7b\u4f3c\u4e8e\u00a0<code>.then(f, f)<\/code>\uff0c\u56e0\u4e3a\u5f53 promise settled \u65f6\u00a0<code>f<\/code>\u00a0\u5c31\u4f1a\u6267\u884c\uff1a\u65e0\u8bba promise \u88ab resolve \u8fd8\u662f reject\u3002<br \/>\n<code>finally<\/code>\u00a0\u7684\u529f\u80fd\u662f\u8bbe\u7f6e\u4e00\u4e2a\u5904\u7406\u7a0b\u5e8f\u5728\u524d\u9762\u7684\u64cd\u4f5c\u5b8c\u6210\u540e\uff0c\u6267\u884c\u6e05\u7406\/\u7ec8\u7ed3\u3002<br \/>\n\u4f8b\u5982\uff0c\u505c\u6b62\u52a0\u8f7d\u6307\u793a\u5668\uff0c\u5173\u95ed\u4e0d\u518d\u9700\u8981\u7684\u8fde\u63a5\u7b49\u3002<br \/>\n\u628a\u5b83\u60f3\u8c61\u6210\u6d3e\u5bf9\u7684\u7ec8\u7ed3\u8005\u3002\u65e0\u8bba\u6d3e\u5bf9\u662f\u597d\u662f\u574f\uff0c\u6709\u591a\u5c11\u670b\u53cb\u53c2\u52a0\uff0c\u6211\u4eec\u90fd\u9700\u8981\uff08\u6216\u8005\u81f3\u5c11\u5e94\u8be5\uff09\u5728\u5b83\u4e4b\u540e\u8fdb\u884c\u6e05\u7406\u3002<br \/>\n\u4ee3\u7801\u53ef\u80fd\u770b\u8d77\u6765\u50cf\u8fd9\u6837\uff1a<\/p>\n<pre><code class=\"language-js\">new Promise((resolve, reject) =&gt; {\n  \/* \u505a\u4e00\u4e9b\u9700\u8981\u65f6\u95f4\u7684\u4e8b\uff0c\u4e4b\u540e\u8c03\u7528\u53ef\u80fd\u4f1a resolve \u4e5f\u53ef\u80fd\u4f1a reject *\/\n})\n  \/\/ \u5728 promise \u4e3a settled \u65f6\u8fd0\u884c\uff0c\u65e0\u8bba\u6210\u529f\u4e0e\u5426\n  .finally(() =&gt; stop loading indicator)\n  \/\/ \u6240\u4ee5\uff0c\u52a0\u8f7d\u6307\u793a\u5668\uff08loading indicator\uff09\u59cb\u7ec8\u4f1a\u5728\u6211\u4eec\u7ee7\u7eed\u4e4b\u524d\u505c\u6b62\n  .then(result =&gt; show result, err =&gt; show error)\n<\/code><\/pre>\n<p>\u8bf7\u6ce8\u610f\uff0c<code>finally(f)<\/code>\u00a0\u5e76\u4e0d\u5b8c\u5168\u662f\u00a0<code>then(f,f)<\/code>\u00a0\u7684\u522b\u540d\u3002<br \/>\n\u5b83\u4eec\u4e4b\u95f4\u6709\u91cd\u8981\u7684\u533a\u522b\uff1a<\/p>\n<ol>\n<li><code>finally<\/code>\u00a0\u5904\u7406\u7a0b\u5e8f\uff08handler\uff09\u6ca1\u6709\u53c2\u6570\u3002\u5728\u00a0<code>finally<\/code>\u00a0\u4e2d\uff0c\u6211\u4eec\u4e0d\u77e5\u9053 promise \u662f\u5426\u6210\u529f\u3002\u6ca1\u5173\u7cfb\uff0c\u56e0\u4e3a\u6211\u4eec\u7684\u4efb\u52a1\u901a\u5e38\u662f\u6267\u884c\u201c\u5e38\u89c4\u201d\u7684\u5b8c\u6210\u7a0b\u5e8f\uff08finalizing procedures\uff09\u3002<br \/>\n\u8bf7\u770b\u4e0a\u9762\u7684\u4f8b\u5b50\uff1a\u5982\u4f60\u6240\u89c1\uff0c<code>finally<\/code>\u00a0\u5904\u7406\u7a0b\u5e8f\u6ca1\u6709\u53c2\u6570\uff0cpromise \u7684\u7ed3\u679c\u7531\u4e0b\u4e00\u4e2a\u5904\u7406\u7a0b\u5e8f\u5904\u7406\u3002<\/li>\n<li><code>finally<\/code>\u00a0\u5904\u7406\u7a0b\u5e8f\u5c06\u7ed3\u679c\u6216 error \u201c\u4f20\u9012\u201d\u7ed9\u4e0b\u4e00\u4e2a\u5408\u9002\u7684\u5904\u7406\u7a0b\u5e8f\u3002<br \/>\n\u4f8b\u5982\uff0c\u5728\u8fd9\u7ed3\u679c\u88ab\u4ece\u00a0<code>finally<\/code>\u00a0\u4f20\u9012\u7ed9\u4e86\u00a0<code>then<\/code>\uff1a<\/li>\n<\/ol>\n<pre><code class=\"language-js\">new Promise((resolve, reject) =&gt; {\n  setTimeout(() =&gt; resolve(&quot;value&quot;), 2000)\n})\n  .finally(() =&gt; alert(&quot;Promise ready&quot;)) \/\/ \u5148\u89e6\u53d1\n  .then(result =&gt; alert(result)); \/\/ &lt;-- .then \u663e\u793a &quot;value&quot;\n<\/code><\/pre>\n<p>\u6b63\u5982\u6211\u4eec\u6240\u770b\u5230\u7684\uff0c\u7b2c\u4e00\u4e2a promise \u8fd4\u56de\u7684\u00a0<code>value<\/code>\u00a0\u901a\u8fc7\u00a0<code>finally<\/code>\u00a0\u88ab\u4f20\u9012\u7ed9\u4e86\u4e0b\u4e00\u4e2a\u00a0<code>then<\/code>\u3002<br \/>\n\u8fd9\u975e\u5e38\u65b9\u4fbf\uff0c\u56e0\u4e3a\u00a0<code>finally<\/code>\u00a0\u5e76\u4e0d\u610f\u5473\u7740\u5904\u7406\u4e00\u4e2a promise \u7684\u7ed3\u679c\u3002\u5982\u524d\u6240\u8ff0\uff0c\u65e0\u8bba\u7ed3\u679c\u662f\u4ec0\u4e48\uff0c\u5b83\u90fd\u662f\u8fdb\u884c\u5e38\u89c4\u6e05\u7406\u7684\u5730\u65b9\u3002<br \/>\n\u4e0b\u9762\u662f\u4e00\u4e2a promise \u8fd4\u56de\u7ed3\u679c\u4e3a error \u7684\u793a\u4f8b\uff0c\u8ba9\u6211\u4eec\u770b\u770b\u5b83\u662f\u5982\u4f55\u901a\u8fc7\u00a0<code>finally<\/code>\u00a0\u88ab\u4f20\u9012\u7ed9\u00a0<code>catch<\/code>\u00a0\u7684\uff1a<\/p>\n<pre><code class=\"language-js\">new Promise((resolve, reject) =&gt; {\n  throw new Error(&quot;error&quot;);\n})\n  .finally(() =&gt; alert(&quot;Promise ready&quot;)) \/\/ \u5148\u89e6\u53d1\n  .catch(err =&gt; alert(err));  \/\/ &lt;-- .catch \u663e\u793a\u8fd9\u4e2a error\n<\/code><\/pre>\n<ol>\n<li><code>finally<\/code>\u00a0\u5904\u7406\u7a0b\u5e8f\u4e5f\u4e0d\u5e94\u8be5\u8fd4\u56de\u4efb\u4f55\u5185\u5bb9\u3002\u5982\u679c\u5b83\u8fd4\u56de\u4e86\uff0c\u8fd4\u56de\u7684\u503c\u4f1a\u9ed8\u8ba4\u88ab\u5ffd\u7565\u3002<br \/>\n\u6b64\u89c4\u5219\u7684\u552f\u4e00\u4f8b\u5916\u662f\u5f53\u00a0<code>finally<\/code>\u00a0\u5904\u7406\u7a0b\u5e8f\u629b\u51fa error \u65f6\u3002\u6b64\u65f6\u8fd9\u4e2a error\uff08\u800c\u4e0d\u662f\u4efb\u4f55\u4e4b\u524d\u7684\u7ed3\u679c\uff09\u4f1a\u88ab\u8f6c\u5230\u4e0b\u4e00\u4e2a\u5904\u7406\u7a0b\u5e8f\u3002<br \/>\n\u603b\u7ed3\uff1a<\/li>\n<\/ol>\n<ul>\n<li><code>finally<\/code>\u00a0\u5904\u7406\u7a0b\u5e8f\u6ca1\u6709\u5f97\u5230\u524d\u4e00\u4e2a\u5904\u7406\u7a0b\u5e8f\u7684\u7ed3\u679c\uff08\u5b83\u6ca1\u6709\u53c2\u6570\uff09\u3002\u800c\u8fd9\u4e2a\u7ed3\u679c\u88ab\u4f20\u9012\u7ed9\u4e86\u4e0b\u4e00\u4e2a\u5408\u9002\u7684\u5904\u7406\u7a0b\u5e8f\u3002<\/li>\n<li>\u5982\u679c\u00a0<code>finally<\/code>\u00a0\u5904\u7406\u7a0b\u5e8f\u8fd4\u56de\u4e86\u4e00\u4e9b\u5185\u5bb9\uff0c\u90a3\u4e48\u8fd9\u4e9b\u5185\u5bb9\u4f1a\u88ab\u5ffd\u7565\u3002<\/li>\n<li>\u5f53\u00a0<code>finally<\/code>\u00a0\u629b\u51fa error \u65f6\uff0c\u6267\u884c\u5c06\u8f6c\u5230\u6700\u8fd1\u7684 error \u7684\u5904\u7406\u7a0b\u5e8f\u3002<br \/>\n\u5982\u679c\u6211\u4eec\u6b63\u786e\u4f7f\u7528\u00a0<code>finally<\/code>\uff08\u5c06\u5176\u7528\u4e8e\u5e38\u89c4\u6e05\u7406\uff09\uff0c\u90a3\u4e48\u8fd9\u4e9b\u529f\u80fd\u5c06\u5f88\u6709\u7528\u3002<\/li>\n<\/ul>\n<blockquote>\n<p>\u6211\u4eec\u53ef\u4ee5\u5bf9 settled \u7684 promise \u9644\u52a0\u5904\u7406\u7a0b\u5e8f<br \/>\n\u5982\u679c promise \u4e3a pending \u72b6\u6001\uff0c<code>.then\/catch\/finally<\/code>\u00a0\u5904\u7406\u7a0b\u5e8f\uff08handler\uff09\u5c06\u7b49\u5f85\u5b83\u7684\u7ed3\u679c\u3002<br \/>\n\u6709\u65f6\u5019\uff0c\u5f53\u6211\u4eec\u5411\u4e00\u4e2a promise \u6dfb\u52a0\u5904\u7406\u7a0b\u5e8f\u65f6\uff0c\u5b83\u53ef\u80fd\u5df2\u7ecf settled \u4e86\u3002<br \/>\n\u5728\u8fd9\u79cd\u60c5\u51b5\u4e0b\uff0c\u8fd9\u4e9b\u5904\u7406\u7a0b\u5e8f\u4f1a\u7acb\u5373\u6267\u884c\uff1a<\/p>\n<\/blockquote>\n<pre><code class=\"language-js\">\/\/ \u4e0b\u9762\u8fd9 promise \u5728\u88ab\u521b\u5efa\u540e\u7acb\u5373\u53d8\u4e3a resolved \u72b6\u6001\nlet promise = new Promise(resolve =&gt; resolve(&quot;done!&quot;));\n\npromise.then(alert); \/\/ done!\uff08\u73b0\u5728\u663e\u793a\uff09\n<\/code><\/pre>\n<p>\u8bf7\u6ce8\u610f\u8fd9\u4f7f\u5f97 promise \u6bd4\u73b0\u5b9e\u751f\u6d3b\u4e2d\u7684\u201c\u8ba2\u9605\u5217\u8868\u201d\u65b9\u6848\u5f3a\u5927\u5f97\u591a\u3002\u5982\u679c\u6b4c\u624b\u5df2\u7ecf\u53d1\u5e03\u4e86\u4ed6\u4eec\u7684\u5355\u66f2\uff0c\u7136\u540e\u67d0\u4e2a\u4eba\u5728\u8ba2\u9605\u5217\u8868\u4e0a\u8fdb\u884c\u4e86\u6ce8\u518c\uff0c\u5219\u4ed6\u4eec\u5f88\u53ef\u80fd\u4e0d\u4f1a\u6536\u5230\u8be5\u5355\u66f2\u3002\u5b9e\u9645\u751f\u6d3b\u4e2d\u7684\u8ba2\u9605\u5fc5\u987b\u5728\u6d3b\u52a8\u5f00\u59cb\u4e4b\u524d\u8fdb\u884c\u3002<br \/>\nPromise \u5219\u66f4\u52a0\u7075\u6d3b\u3002\u6211\u4eec\u53ef\u4ee5\u968f\u65f6\u6dfb\u52a0\u5904\u7406\u7a0b\u5e8f\uff08handler\uff09\uff1a\u5982\u679c\u7ed3\u679c\u5df2\u7ecf\u5728\u4e86\uff0c\u5b83\u4eec\u5c31\u4f1a\u6267\u884c\u3002<\/p>\n<h2>\u793a\u4f8b loadScript<\/h2>\n<p>\u63a5\u4e0b\u6765\uff0c\u8ba9\u6211\u4eec\u770b\u4e00\u4e0b\u5173\u4e8e promise \u5982\u4f55\u5e2e\u52a9\u6211\u4eec\u7f16\u5199\u5f02\u6b65\u4ee3\u7801\u7684\u66f4\u591a\u5b9e\u9645\u793a\u4f8b\u3002<br \/>\n\u6211\u4eec\u4ece\u4e0a\u4e00\u7ae0\u83b7\u5f97\u4e86\u7528\u4e8e\u52a0\u8f7d\u811a\u672c\u7684\u00a0<code>loadScript<\/code>\u00a0\u51fd\u6570\u3002<br \/>\n\u8fd9\u662f\u57fa\u4e8e\u56de\u8c03\u51fd\u6570\u7684\u53d8\u4f53\uff0c\u8bb0\u4f4f\u5b83\uff1a<\/p>\n<pre><code class=\"language-js\">function loadScript(src, callback) {\n  let script = document.createElement('script');\n  script.src = src;\n\n  script.onload = () =&gt; callback(null, script);\n  script.onerror = () =&gt; callback(new Error(`Script load error for ${src}`));\n\n  document.head.append(script);\n}\n<\/code><\/pre>\n<p>\u8ba9\u6211\u4eec\u7528 promise \u91cd\u5199\u5b83\u3002<br \/>\n\u65b0\u51fd\u6570\u00a0<code>loadScript<\/code>\u00a0\u5c06\u4e0d\u9700\u8981\u56de\u8c03\u3002\u53d6\u800c\u4ee3\u4e4b\u7684\u662f\uff0c\u5b83\u5c06\u521b\u5efa\u5e76\u8fd4\u56de\u4e00\u4e2a\u5728\u52a0\u8f7d\u5b8c\u6210\u65f6 resolve \u7684 promise \u5bf9\u8c61\u3002\u5916\u90e8\u4ee3\u7801\u53ef\u4ee5\u4f7f\u7528\u00a0<code>.then<\/code>\u00a0\u5411\u5176\u6dfb\u52a0\u5904\u7406\u7a0b\u5e8f\uff08\u8ba2\u9605\u51fd\u6570\uff09\uff1a<\/p>\n<pre><code class=\"language-js\">function loadScript(src) {\n  return new Promise(function(resolve, reject) {\n    let script = document.createElement('script');\n    script.src = src;\n\n    script.onload = () =&gt; resolve(script);\n    script.onerror = () =&gt; reject(new Error(`Script load error for ${src}`));\n\n    document.head.append(script);\n  });\n}\n<\/code><\/pre>\n<p>\u7528\u6cd5\uff1a<\/p>\n<pre><code class=\"language-js\">let promise = loadScript(&quot;https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/lodash.js\/4.17.11\/lodash.js&quot;);\n\npromise.then(\n  script =&gt; alert(`${script.src} is loaded!`),\n  error =&gt; alert(`Error: ${error.message}`)\n);\n\npromise.then(script =&gt; alert('Another handler...'));\n<\/code><\/pre>\n<p>\u6211\u4eec\u7acb\u523b\u5c31\u80fd\u53d1\u73b0 promise \u76f8\u8f83\u4e8e\u57fa\u4e8e\u56de\u8c03\u7684\u6a21\u5f0f\u7684\u4e00\u4e9b\u597d\u5904\uff1a<\/p>\n<table>\n<thead>\n<tr>\n<th>promise<\/th>\n<th>callback<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>promise \u5141\u8bb8\u6211\u4eec\u6309\u7167\u81ea\u7136\u987a\u5e8f\u8fdb\u884c\u7f16\u7801\u3002\u9996\u5148\uff0c\u6211\u4eec\u8fd0\u884c\u00a0<code>loadScript<\/code>\u00a0\u548c\u00a0<code>.then<\/code>\u00a0\u6765\u5904\u7406\u7ed3\u679c\u3002<\/td>\n<td>\u5728\u8c03\u7528\u00a0<code>loadScript(script, callback)<\/code>\u00a0\u65f6\uff0c\u6211\u4eec\u5fc5\u987b\u6709\u4e00\u4e2a\u00a0<code>callback<\/code>\u00a0\u51fd\u6570\u53ef\u4f9b\u4f7f\u7528\u3002\u6362\u53e5\u8bdd\u8bf4\uff0c\u5728\u8c03\u7528\u00a0<code>loadScript<\/code>\u00a0<strong>\u4e4b\u524d<\/strong>\uff0c\u6211\u4eec\u5fc5\u987b\u77e5\u9053\u5982\u4f55\u5904\u7406\u7ed3\u679c\u3002<\/td>\n<\/tr>\n<tr>\n<td>\u6211\u4eec\u53ef\u4ee5\u6839\u636e\u9700\u8981\uff0c\u5728 promise \u4e0a\u591a\u6b21\u8c03\u7528\u00a0<code>.then<\/code>\u3002\u6bcf\u6b21\u8c03\u7528\uff0c\u6211\u4eec\u90fd\u4f1a\u5728\u201c\u8ba2\u9605\u5217\u8868\u201d\u4e2d\u6dfb\u52a0\u4e00\u4e2a\u65b0\u7684\u201c\u7c89\u4e1d\u201d\uff0c\u4e00\u4e2a\u65b0\u7684\u8ba2\u9605\u51fd\u6570\u3002\u5728\u4e0b\u4e00\u7ae0\u5c06\u5bf9\u6b64\u5185\u5bb9\u8fdb\u884c\u8be6\u7ec6\u4ecb\u7ecd\uff1a<a href=\"https:\/\/zh.javascript.info\/promise-chaining\">Promise \u94fe<\/a>\u3002<\/td>\n<td>\u53ea\u80fd\u6709\u4e00\u4e2a\u56de\u8c03\u3002<\/td>\n<\/tr>\n<tr>\n<td>\u56e0\u6b64\uff0cpromise \u4e3a\u6211\u4eec\u63d0\u4f9b\u4e86\u66f4\u597d\u7684\u4ee3\u7801\u6d41\u548c\u7075\u6d3b\u6027\u3002<\/td>\n<td><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h1>Promise \u94fe<\/h1>\n<p>\u6211\u4eec\u56de\u987e\u4e00\u4e0b\u00a0<a href=\"https:\/\/zh.javascript.info\/callbacks\">\u7b80\u4ecb\uff1a\u56de\u8c03<\/a>\u00a0\u4e00\u7ae0\u4e2d\u63d0\u5230\u7684\u95ee\u9898\uff1a\u6211\u4eec\u6709\u4e00\u7cfb\u5217\u7684\u5f02\u6b65\u4efb\u52a1\u8981\u4e00\u4e2a\u63a5\u4e00\u4e2a\u5730\u6267\u884c \u2014\u2014 \u4f8b\u5982\uff0c\u52a0\u8f7d\u811a\u672c\u3002\u6211\u4eec\u5982\u4f55\u5199\u51fa\u66f4\u597d\u7684\u4ee3\u7801\u5462\uff1f<br \/>\nPromise \u63d0\u4f9b\u4e86\u4e00\u4e9b\u65b9\u6848\u6765\u505a\u5230\u8fd9\u4e00\u70b9\u3002<br \/>\n\u5728\u672c\u7ae0\u4e2d\uff0c\u6211\u4eec\u5c06\u4e00\u8d77\u5b66\u4e60 promise \u94fe\u3002<br \/>\n\u5b83\u770b\u8d77\u6765\u5c31\u50cf\u8fd9\u6837\uff1a<\/p>\n<pre><code class=\"language-js\">new Promise(function(resolve, reject) {\n\n  setTimeout(() =&gt; resolve(1), 1000); \/\/ (*)\n\n}).then(function(result) { \/\/ (**)\n\n  alert(result); \/\/ 1\n  return result * 2;\n\n}).then(function(result) { \/\/ (***)\n\n  alert(result); \/\/ 2\n  return result * 2;\n\n}).then(function(result) {\n\n  alert(result); \/\/ 4\n  return result * 2;\n\n});\n<\/code><\/pre>\n<p>\u5b83\u7684\u60f3\u6cd5\u662f\u901a\u8fc7\u00a0<code>.then<\/code>\u00a0\u5904\u7406\u7a0b\u5e8f\uff08handler\uff09\u94fe\u8fdb\u884c\u4f20\u9012 result\u3002<br \/>\n\u8fd0\u884c\u6d41\u7a0b\u5982\u4e0b\uff1a<\/p>\n<ol>\n<li>\u521d\u59cb promise \u5728 1 \u79d2\u540e resolve\u00a0<code>(*)<\/code>\uff0c<\/li>\n<li>\u7136\u540e\u00a0<code>.then<\/code>\u00a0\u5904\u7406\u7a0b\u5e8f\u88ab\u8c03\u7528\u00a0<code>(**)<\/code>\uff0c\u5b83\u53c8\u521b\u5efa\u4e86\u4e00\u4e2a\u65b0\u7684 promise\uff08\u4ee5\u00a0<code>2<\/code>\u00a0\u4f5c\u4e3a\u503c resolve\uff09\u3002<\/li>\n<li>\u4e0b\u4e00\u4e2a\u00a0<code>then<\/code>\u00a0<code>(***)<\/code>\u00a0\u5f97\u5230\u4e86\u524d\u4e00\u4e2a\u00a0<code>then<\/code>\u00a0\u7684\u503c\uff0c\u5bf9\u8be5\u503c\u8fdb\u884c\u5904\u7406\uff08*2\uff09\u5e76\u5c06\u5176\u4f20\u9012\u7ed9\u4e0b\u4e00\u4e2a\u5904\u7406\u7a0b\u5e8f\u3002<\/li>\n<li>\u2026\u2026\u4f9d\u6b64\u7c7b\u63a8\u3002<br \/>\n\u968f\u7740 result \u5728\u5904\u7406\u7a0b\u5e8f\u94fe\u4e2d\u4f20\u9012\uff0c\u6211\u4eec\u53ef\u4ee5\u770b\u5230\u4e00\u7cfb\u5217\u7684\u00a0<code>alert<\/code>\u00a0\u8c03\u7528\uff1a<code>1<\/code>\u00a0\u2192\u00a0<code>2<\/code>\u00a0\u2192\u00a0<code>4<\/code>\u3002<br \/>\n<div class='fancybox-wrapper lazyload-container-unload' data-fancybox='post-images' href='https:\/\/levin.ink\/wp-content\/uploads\/2024\/06\/Pasted-image-20240621165704.png'><img class=\"lazyload lazyload-style-1\" src=\"data:image\/svg+xml;base64,PCEtLUFyZ29uTG9hZGluZy0tPgo8c3ZnIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgc3Ryb2tlPSIjZmZmZmZmMDAiPjxnPjwvZz4KPC9zdmc+\"  decoding=\"async\" data-original=\"https:\/\/levin.ink\/wp-content\/uploads\/2024\/06\/Pasted-image-20240621165704.png\" src=\"data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB\/AAffA0nNPuCLAAAAAElFTkSuQmCC\" alt=\"Pasted image 20240621165704.png\"><\/div><br \/>\n\u8fd9\u6837\u4e4b\u6240\u4ee5\u662f\u53ef\u884c\u7684\uff0c\u662f\u56e0\u4e3a\u6bcf\u4e2a\u5bf9\u00a0<code>.then<\/code>\u00a0\u7684\u8c03\u7528\u90fd\u4f1a\u8fd4\u56de\u4e86\u4e00\u4e2a\u65b0\u7684 promise\uff0c\u56e0\u6b64\u6211\u4eec\u53ef\u4ee5\u5728\u5176\u4e4b\u4e0a\u8c03\u7528\u4e0b\u4e00\u4e2a\u00a0<code>.then<\/code>\u3002<br \/>\n\u5f53\u5904\u7406\u7a0b\u5e8f\u8fd4\u56de\u4e00\u4e2a\u503c\u65f6\uff0c\u5b83\u5c06\u6210\u4e3a\u8be5 promise \u7684 result\uff0c\u6240\u4ee5\u5c06\u4f7f\u7528\u5b83\u8c03\u7528\u4e0b\u4e00\u4e2a\u00a0<code>.then<\/code>\u3002<br \/>\n<strong>\u65b0\u624b\u5e38\u72af\u7684\u4e00\u4e2a\u7ecf\u5178\u9519\u8bef\uff1a\u4ece\u6280\u672f\u4e0a\u8bb2\uff0c\u6211\u4eec\u4e5f\u53ef\u4ee5\u5c06\u591a\u4e2a\u00a0<code>.then<\/code>\u00a0\u6dfb\u52a0\u5230\u4e00\u4e2a promise \u4e0a\u3002\u4f46\u8fd9\u5e76\u4e0d\u662f promise \u94fe\uff08chaining\uff09\u3002<\/strong><br \/>\n\u4f8b\u5982\uff1a<\/li>\n<\/ol>\n<pre><code class=\"language-js\">let promise = new Promise(function(resolve, reject) {\n  setTimeout(() =&gt; resolve(1), 1000);\n});\n\npromise.then(function(result) {\n  alert(result); \/\/ 1\n  return result * 2;\n});\n\npromise.then(function(result) {\n  alert(result); \/\/ 1\n  return result * 2;\n});\n\npromise.then(function(result) {\n  alert(result); \/\/ 1\n  return result * 2;\n});\n<\/code><\/pre>\n<p>\u6211\u4eec\u5728\u8fd9\u91cc\u6240\u505a\u7684\u53ea\u662f\u4e00\u4e2a promise \u7684\u51e0\u4e2a\u5904\u7406\u7a0b\u5e8f\u3002\u5b83\u4eec\u4e0d\u4f1a\u76f8\u4e92\u4f20\u9012 result\uff1b\u76f8\u53cd\uff0c\u5b83\u4eec\u4e4b\u95f4\u5f7c\u6b64\u72ec\u7acb\u8fd0\u884c\u5904\u7406\u4efb\u52a1\u3002<br \/>\n\u8fd9\u662f\u5b83\u7684\u4e00\u5f20\u793a\u610f\u56fe\uff08\u4f60\u53ef\u4ee5\u5c06\u5176\u4e0e\u4e0a\u9762\u7684\u94fe\u5f0f\u8c03\u7528\u505a\u4e00\u4e0b\u6bd4\u8f83\uff09\uff1a<br \/>\n<div class='fancybox-wrapper lazyload-container-unload' data-fancybox='post-images' href='https:\/\/levin.ink\/wp-content\/uploads\/2024\/06\/Pasted-image-20240621165914.png'><img class=\"lazyload lazyload-style-1\" src=\"data:image\/svg+xml;base64,PCEtLUFyZ29uTG9hZGluZy0tPgo8c3ZnIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgc3Ryb2tlPSIjZmZmZmZmMDAiPjxnPjwvZz4KPC9zdmc+\"  decoding=\"async\" data-original=\"https:\/\/levin.ink\/wp-content\/uploads\/2024\/06\/Pasted-image-20240621165914.png\" src=\"data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB\/AAffA0nNPuCLAAAAAElFTkSuQmCC\" alt=\"Pasted image 20240621165914.png\"><\/div><br \/>\n\u5728\u540c\u4e00\u4e2a promise \u4e0a\u7684\u6240\u6709\u00a0<code>.then<\/code>\u00a0\u83b7\u5f97\u7684\u7ed3\u679c\u90fd\u76f8\u540c \u2014\u2014 \u8be5 promise \u7684\u7ed3\u679c\u3002\u6240\u4ee5\uff0c\u5728\u4e0a\u9762\u7684\u4ee3\u7801\u4e2d\uff0c\u6240\u6709\u00a0<code>alert<\/code>\u00a0\u90fd\u663e\u793a\u76f8\u540c\u7684\u5185\u5bb9\uff1a<code>1<\/code>\u3002<br \/>\n\u5b9e\u9645\u4e0a\u6211\u4eec\u6781\u5c11\u9047\u5230\u4e00\u4e2a promise \u9700\u8981\u591a\u4e2a\u5904\u7406\u7a0b\u5e8f\u7684\u60c5\u51b5\u3002\u4f7f\u7528\u94fe\u5f0f\u8c03\u7528\u7684\u9891\u7387\u66f4\u9ad8\u3002<\/p>\n<h2>\u8fd4\u56de promise<\/h2>\n<p><code>.then(handler)<\/code>\u00a0\u4e2d\u6240\u4f7f\u7528\u7684\u5904\u7406\u7a0b\u5e8f\uff08handler\uff09\u53ef\u4ee5\u521b\u5efa\u5e76\u8fd4\u56de\u4e00\u4e2a promise\u3002<br \/>\n\u5728\u8fd9\u79cd\u60c5\u51b5\u4e0b\uff0c\u5176\u4ed6\u7684\u5904\u7406\u7a0b\u5e8f\u5c06\u7b49\u5f85\u5b83 settled \u540e\u518d\u83b7\u5f97\u5176\u7ed3\u679c\u3002<br \/>\n\u4f8b\u5982\uff1a<\/p>\n<pre><code class=\"language-js\">new Promise(function(resolve, reject) {\n\n  setTimeout(() =&gt; resolve(1), 1000);\n\n}).then(function(result) {\n\n  alert(result); \/\/ 1\n\n  return new Promise((resolve, reject) =&gt; { \/\/ (*)\n    setTimeout(() =&gt; resolve(result * 2), 1000);\n  });\n\n}).then(function(result) { \/\/ (**)\n\n  alert(result); \/\/ 2\n\n  return new Promise((resolve, reject) =&gt; {\n    setTimeout(() =&gt; resolve(result * 2), 1000);\n  });\n\n}).then(function(result) {\n\n  alert(result); \/\/ 4\n\n});\n<\/code><\/pre>\n<p>\u8fd9\u91cc\u7b2c\u4e00\u4e2a\u00a0<code>.then<\/code>\u00a0\u663e\u793a\u00a0<code>1<\/code>\u00a0\u5e76\u5728\u00a0<code>(*)<\/code>\u00a0\u884c\u8fd4\u56de\u00a0<code>new Promise(\u2026)<\/code>\u30021 \u79d2\u540e\u5b83\u4f1a\u8fdb\u884c resolve\uff0c\u7136\u540e result\uff08<code>resolve<\/code>\u00a0\u7684\u53c2\u6570\uff0c\u5728\u8fd9\u91cc\u5b83\u662f\u00a0<code>result*2<\/code>\uff09\u88ab\u4f20\u9012\u7ed9\u7b2c\u4e8c\u4e2a\u00a0<code>.then<\/code>\u00a0\u7684\u5904\u7406\u7a0b\u5e8f\u3002\u8fd9\u4e2a\u5904\u7406\u7a0b\u5e8f\u4f4d\u4e8e\u00a0<code>(**)<\/code>\u00a0\u884c\uff0c\u5b83\u663e\u793a\u00a0<code>2<\/code>\uff0c\u5e76\u6267\u884c\u76f8\u540c\u7684\u884c\u4e3a\u3002<br \/>\n\u6240\u4ee5\u8f93\u51fa\u4e0e\u524d\u9762\u7684\u793a\u4f8b\u76f8\u540c\uff1a1 \u2192 2 \u2192 4\uff0c\u4f46\u662f\u73b0\u5728\u5728\u6bcf\u6b21\u00a0<code>alert<\/code>\u00a0\u8c03\u7528\u4e4b\u95f4\u4f1a\u6709 1 \u79d2\u949f\u7684\u5ef6\u8fdf\u3002<br \/>\n\u8fd4\u56de promise \u4f7f\u6211\u4eec\u80fd\u591f\u6784\u5efa\u5f02\u6b65\u884c\u4e3a\u94fe\u3002<\/p>\n<h2>\u793a\u4f8b loadScript<\/h2>\n<p>\u8ba9\u6211\u4eec\u5c06\u672c\u7ae0\u6240\u8bb2\u7684\u8fd9\u4e2a\u7279\u6027\u4e0e\u5728\u00a0<a href=\"https:\/\/zh.javascript.info\/promise-basics#loadscript\">\u4e0a\u4e00\u7ae0<\/a>\u00a0\u4e2d\u5b9a\u4e49\u7684 promise \u5316\u7684\u00a0<code>loadScript<\/code>\u00a0\u7ed3\u5408\u4f7f\u7528\uff0c\u6309\u987a\u5e8f\u4f9d\u6b21\u52a0\u8f7d\u811a\u672c\uff1a<\/p>\n<pre><code class=\"language-js\">loadScript(&quot;\/article\/promise-chaining\/one.js&quot;)\n  .then(function(script) {\n    return loadScript(&quot;\/article\/promise-chaining\/two.js&quot;);\n  })\n  .then(function(script) {\n    return loadScript(&quot;\/article\/promise-chaining\/three.js&quot;);\n  })\n  .then(function(script) {\n    \/\/ \u4f7f\u7528\u5728\u811a\u672c\u4e2d\u58f0\u660e\u7684\u51fd\u6570\n    \/\/ \u4ee5\u8bc1\u660e\u811a\u672c\u786e\u5b9e\u88ab\u52a0\u8f7d\u5b8c\u6210\u4e86\n    one();\n    two();\n    three();\n  });\n<\/code><\/pre>\n<p>\u6211\u4eec\u53ef\u4ee5\u7528\u7bad\u5934\u51fd\u6570\u6765\u91cd\u5199\u4ee3\u7801\uff0c\u8ba9\u5176\u53d8\u5f97\u7b80\u77ed\u4e00\u4e9b\uff1a<\/p>\n<pre><code class=\"language-js\">loadScript(&quot;\/article\/promise-chaining\/one.js&quot;)\n  .then(script =&gt; loadScript(&quot;\/article\/promise-chaining\/two.js&quot;))\n  .then(script =&gt; loadScript(&quot;\/article\/promise-chaining\/three.js&quot;))\n  .then(script =&gt; {\n    \/\/ \u811a\u672c\u52a0\u8f7d\u5b8c\u6210\uff0c\u6211\u4eec\u53ef\u4ee5\u5728\u8fd9\u513f\u4f7f\u7528\u811a\u672c\u4e2d\u58f0\u660e\u7684\u51fd\u6570\n    one();\n    two();\n    three();\n  });\n<\/code><\/pre>\n<p>\u5728\u8fd9\u513f\uff0c\u6bcf\u4e2a\u00a0<code>loadScript<\/code>\u00a0\u8c03\u7528\u90fd\u8fd4\u56de\u4e00\u4e2a promise\uff0c\u5e76\u4e14\u5728\u5b83 resolve \u65f6\u4e0b\u4e00\u4e2a\u00a0<code>.then<\/code>\u00a0\u5f00\u59cb\u8fd0\u884c\u3002\u7136\u540e\uff0c\u5b83\u542f\u52a8\u4e0b\u4e00\u4e2a\u811a\u672c\u7684\u52a0\u8f7d\u3002\u6240\u4ee5\uff0c\u811a\u672c\u662f\u4e00\u4e2a\u63a5\u4e00\u4e2a\u5730\u52a0\u8f7d\u7684\u3002<br \/>\n\u6211\u4eec\u53ef\u4ee5\u5411\u94fe\u4e2d\u6dfb\u52a0\u66f4\u591a\u7684\u5f02\u6b65\u884c\u4e3a\u3002\u8bf7\u6ce8\u610f\uff0c\u4ee3\u7801\u4ecd\u7136\u662f\u201c\u6241\u5e73\u201d\u7684 \u2014\u2014 \u5b83\u5411\u4e0b\u589e\u957f\uff0c\u800c\u4e0d\u662f\u5411\u53f3\u3002\u8fd9\u91cc\u6ca1\u6709\u201c\u5384\u8fd0\u91d1\u5b57\u5854\u201d\u7684\u8ff9\u8c61\u3002<br \/>\n\u4ece\u6280\u672f\u4e0a\u8bb2\uff0c\u6211\u4eec\u53ef\u4ee5\u5411\u6bcf\u4e2a\u00a0<code>loadScript<\/code>\u00a0\u76f4\u63a5\u6dfb\u52a0\u00a0<code>.then<\/code>\uff0c\u5c31\u50cf\u8fd9\u6837\uff1a<\/p>\n<pre><code class=\"language-js\">loadScript(&quot;\/article\/promise-chaining\/one.js&quot;).then(script1 =&gt; {\n  loadScript(&quot;\/article\/promise-chaining\/two.js&quot;).then(script2 =&gt; {\n    loadScript(&quot;\/article\/promise-chaining\/three.js&quot;).then(script3 =&gt; {\n      \/\/ \u6b64\u51fd\u6570\u53ef\u4ee5\u8bbf\u95ee\u53d8\u91cf script1\uff0cscript2 \u548c script3\n      one();\n      two();\n      three();\n    });\n  });\n});\n<\/code><\/pre>\n<p>\u8fd9\u6bb5\u4ee3\u7801\u505a\u4e86\u76f8\u540c\u7684\u4e8b\u513f\uff1a\u6309\u987a\u5e8f\u52a0\u8f7d 3 \u4e2a\u811a\u672c\u3002\u4f46\u5b83\u662f\u201c\u5411\u53f3\u589e\u957f\u201d\u7684\u3002\u6240\u4ee5\u4f1a\u6709\u548c\u4f7f\u7528\u56de\u8c03\u51fd\u6570\u4e00\u6837\u7684\u95ee\u9898\u3002<br \/>\n\u521a\u5f00\u59cb\u4f7f\u7528 promise \u7684\u4eba\u53ef\u80fd\u4e0d\u77e5\u9053 promise \u94fe\uff0c\u6240\u4ee5\u4ed6\u4eec\u5c31\u8fd9\u6837\u5199\u4e86\u3002\u901a\u5e38\uff0c\u94fe\u5f0f\u662f\u9996\u9009\u3002<br \/>\n\u6709\u65f6\u5019\u76f4\u63a5\u5199\u00a0<code>.then<\/code>\u00a0\u4e5f\u662f\u53ef\u4ee5\u7684\uff0c\u56e0\u4e3a\u5d4c\u5957\u7684\u51fd\u6570\u53ef\u4ee5\u8bbf\u95ee\u5916\u90e8\u4f5c\u7528\u57df\u3002\u5728\u4e0a\u9762\u7684\u4f8b\u5b50\u4e2d\uff0c\u5d4c\u5957\u5728\u6700\u6df1\u5c42\u7684\u90a3\u4e2a\u56de\u8c03\uff08callback\uff09\u53ef\u4ee5\u8bbf\u95ee\u6240\u6709\u53d8\u91cf\u00a0<code>script1<\/code>\uff0c<code>script2<\/code>\u00a0\u548c\u00a0<code>script3<\/code>\u3002\u4f46\u8fd9\u662f\u4e00\u4e2a\u4f8b\u5916\uff0c\u800c\u4e0d\u662f\u4e00\u6761\u89c4\u5219\u3002<\/p>\n<blockquote>\n<p>Thenables<br \/>\n\u786e\u5207\u5730\u8bf4\uff0c\u5904\u7406\u7a0b\u5e8f\u8fd4\u56de\u7684\u4e0d\u5b8c\u5168\u662f\u4e00\u4e2a promise\uff0c\u800c\u662f\u8fd4\u56de\u7684\u88ab\u79f0\u4e3a \u201cthenable\u201d \u5bf9\u8c61 \u2014\u2014 \u4e00\u4e2a\u5177\u6709\u65b9\u6cd5\u00a0<code>.then<\/code>\u00a0\u7684\u4efb\u610f\u5bf9\u8c61\u3002\u5b83\u4f1a\u88ab\u5f53\u505a\u4e00\u4e2a promise \u6765\u5bf9\u5f85\u3002<br \/>\n\u8fd9\u4e2a\u60f3\u6cd5\u662f\uff0c\u7b2c\u4e09\u65b9\u5e93\u53ef\u4ee5\u5b9e\u73b0\u81ea\u5df1\u7684\u201cpromise \u517c\u5bb9\uff08promise-compatible\uff09\u201d\u5bf9\u8c61\u3002\u5b83\u4eec\u53ef\u4ee5\u5177\u6709\u6269\u5c55\u7684\u65b9\u6cd5\u96c6\uff0c\u4f46\u4e5f\u4e0e\u539f\u751f\u7684 promise \u517c\u5bb9\uff0c\u56e0\u4e3a\u5b83\u4eec\u5b9e\u73b0\u4e86\u00a0<code>.then<\/code>\u00a0\u65b9\u6cd5\u3002<br \/>\n\u8fd9\u662f\u4e00\u4e2a thenable \u5bf9\u8c61\u7684\u793a\u4f8b\uff1a<\/p>\n<\/blockquote>\n<pre><code class=\"language-js\">class Thenable {\n  constructor(num) {\n    this.num = num;\n  }\n  then(resolve, reject) {\n    alert(resolve); \/\/ function() { native code }\n    \/\/ 1 \u79d2\u540e\u4f7f\u7528 this.num*2 \u8fdb\u884c resolve\n    setTimeout(() =&gt; resolve(this.num * 2), 1000); \/\/ (**)\n  }\n}\n\nnew Promise(resolve =&gt; resolve(1))\n  .then(result =&gt; {\n    return new Thenable(result); \/\/ (*)\n  })\n  .then(alert); \/\/ 1000ms \u540e\u663e\u793a 2\n<\/code><\/pre>\n<blockquote>\n<p>JavaScript \u68c0\u67e5\u5728\u00a0<code>(*)<\/code>\u00a0\u884c\u4e2d\u7531\u00a0<code>.then<\/code>\u00a0\u5904\u7406\u7a0b\u5e8f\u8fd4\u56de\u7684\u5bf9\u8c61\uff1a\u5982\u679c\u5b83\u5177\u6709\u540d\u4e3a\u00a0<code>then<\/code>\u00a0\u7684\u53ef\u8c03\u7528\u65b9\u6cd5\uff0c\u90a3\u4e48\u5b83\u5c06\u8c03\u7528\u8be5\u65b9\u6cd5\u5e76\u63d0\u4f9b\u539f\u751f\u7684\u51fd\u6570\u00a0<code>resolve<\/code>\u00a0\u548c\u00a0<code>reject<\/code>\u00a0\u4f5c\u4e3a\u53c2\u6570\uff08\u7c7b\u4f3c\u4e8e executor\uff09\uff0c\u5e76\u7b49\u5f85\u76f4\u5230\u5176\u4e2d\u4e00\u4e2a\u51fd\u6570\u88ab\u8c03\u7528\u3002\u5728\u4e0a\u9762\u7684\u793a\u4f8b\u4e2d\uff0c<code>resolve(2)<\/code>\u00a0\u5728 1 \u79d2\u540e\u88ab\u8c03\u7528\u00a0<code>(**)<\/code>\u3002\u7136\u540e\uff0cresult \u4f1a\u88ab\u8fdb\u4e00\u6b65\u6cbf\u7740\u94fe\u5411\u4e0b\u4f20\u9012\u3002<br \/>\n\u8fd9\u4e2a\u7279\u6027\u5141\u8bb8\u6211\u4eec\u5c06\u81ea\u5b9a\u4e49\u7684\u5bf9\u8c61\u4e0e promise \u94fe\u96c6\u6210\u5728\u4e00\u8d77\uff0c\u800c\u4e0d\u5fc5\u7ee7\u627f\u81ea\u00a0<code>Promise<\/code>\u3002<\/p>\n<\/blockquote>\n<h2>\u66f4\u590d\u6742\u7684\u793a\u4f8b fetch<\/h2>\n<p>\u5728\u524d\u7aef\u7f16\u7a0b\u4e2d\uff0cpromise \u901a\u5e38\u88ab\u7528\u4e8e\u7f51\u7edc\u8bf7\u6c42\u3002\u90a3\u4e48\uff0c\u8ba9\u6211\u4eec\u4e00\u8d77\u6765\u770b\u4e00\u4e2a\u76f8\u5173\u7684\u6269\u5c55\u793a\u4f8b\u5427\u3002<br \/>\n\u6211\u4eec\u5c06\u4f7f\u7528\u00a0<a href=\"https:\/\/zh.javascript.info\/fetch\">fetch<\/a>\u00a0\u65b9\u6cd5\u4ece\u8fdc\u7a0b\u670d\u52a1\u5668\u52a0\u8f7d\u7528\u6237\u4fe1\u606f\u3002\u5b83\u6709\u5f88\u591a\u53ef\u9009\u7684\u53c2\u6570\uff0c\u6211\u4eec\u5728\u00a0<a href=\"https:\/\/zh.javascript.info\/fetch\">\u5355\u72ec\u7684\u4e00\u7ae0<\/a>\u00a0\u4e2d\u5bf9\u5176\u8fdb\u884c\u4e86\u8be6\u7ec6\u4ecb\u7ecd\uff0c\u4f46\u57fa\u672c\u8bed\u6cd5\u5f88\u7b80\u5355\uff1a<\/p>\n<pre><code class=\"language-js\">let promise = fetch(url);\n<\/code><\/pre>\n<p>\u6267\u884c\u8fd9\u6761\u8bed\u53e5\uff0c\u5411\u00a0<code>url<\/code>\u00a0\u53d1\u51fa\u7f51\u7edc\u8bf7\u6c42\u5e76\u8fd4\u56de\u4e00\u4e2a promise\u3002\u5f53\u8fdc\u7a0b\u670d\u52a1\u5668\u8fd4\u56de header\uff08\u662f\u5728\u00a0<strong>\u5168\u90e8\u54cd\u5e94\u52a0\u8f7d\u5b8c\u6210\u524d<\/strong>\uff09\u65f6\uff0c\u8be5 promise \u4f7f\u7528\u4e00\u4e2a\u00a0<code>response<\/code>\u00a0\u5bf9\u8c61\u6765\u8fdb\u884c resolve\u3002<br \/>\n\u4e3a\u4e86\u8bfb\u53d6\u5b8c\u6574\u7684\u54cd\u5e94\uff0c\u6211\u4eec\u5e94\u8be5\u8c03\u7528\u00a0<code>response.text()<\/code>\u00a0\u65b9\u6cd5\uff1a\u5f53\u5168\u90e8\u6587\u5b57\u5185\u5bb9\u4ece\u8fdc\u7a0b\u670d\u52a1\u5668\u4e0b\u8f7d\u5b8c\u6210\u540e\uff0c\u5b83\u4f1a\u8fd4\u56de\u4e00\u4e2a promise\uff0c\u8be5 promise \u4ee5\u521a\u521a\u4e0b\u8f7d\u5b8c\u6210\u7684\u8fd9\u4e2a\u6587\u672c\u4f5c\u4e3a result \u8fdb\u884c resolve\u3002<br \/>\n\u4e0b\u9762\u8fd9\u6bb5\u4ee3\u7801\u5411\u00a0<code>user.json<\/code>\u00a0\u53d1\u9001\u8bf7\u6c42\uff0c\u5e76\u4ece\u670d\u52a1\u5668\u52a0\u8f7d\u8be5\u6587\u672c\uff1a<\/p>\n<pre><code class=\"language-js\">fetch('\/article\/promise-chaining\/user.json')\n  \/\/ \u5f53\u8fdc\u7a0b\u670d\u52a1\u5668\u54cd\u5e94\u65f6\uff0c\u4e0b\u9762\u7684 .then \u5f00\u59cb\u6267\u884c\n  .then(function(response) {\n    \/\/ \u5f53 user.json \u52a0\u8f7d\u5b8c\u6210\u65f6\uff0cresponse.text() \u4f1a\u8fd4\u56de\u4e00\u4e2a\u65b0\u7684 promise\n    \/\/ \u8be5 promise \u4ee5\u52a0\u8f7d\u7684 user.json \u4e3a result \u8fdb\u884c resolve\n    return response.text();\n  })\n  .then(function(text) {\n    \/\/ \u2026\u2026\u8fd9\u662f\u8fdc\u7a0b\u6587\u4ef6\u7684\u5185\u5bb9\n    alert(text); \/\/ {&quot;name&quot;: &quot;iliakan&quot;, &quot;isAdmin&quot;: true}\n  });\n<\/code><\/pre>\n<p>\u4ece\u00a0<code>fetch<\/code>\u00a0\u8fd4\u56de\u7684\u00a0<code>response<\/code>\u00a0\u5bf9\u8c61\u8fd8\u5305\u542b\u00a0<code>response.json()<\/code>\u00a0\u65b9\u6cd5\uff0c\u8be5\u65b9\u6cd5\u53ef\u4ee5\u8bfb\u53d6\u8fdc\u7a0b\u6570\u636e\u5e76\u5c06\u5176\u89e3\u6790\u4e3a JSON\u3002\u5728\u6211\u4eec\u7684\u4f8b\u5b50\u4e2d\uff0c\u8fd9\u66f4\u52a0\u65b9\u4fbf\uff0c\u6240\u4ee5\u6211\u4eec\u7528\u8fd9\u4e2a\u65b9\u6cd5\u5427\u3002<br \/>\n\u4e3a\u4e86\u7b80\u6d01\uff0c\u6211\u4eec\u8fd8\u5c06\u4f7f\u7528\u7bad\u5934\u51fd\u6570\uff1a<\/p>\n<pre><code class=\"language-js\">\/\/ \u540c\u4e0a\uff0c\u4f46\u4f7f\u7528 response.json() \u5c06\u8fdc\u7a0b\u5185\u5bb9\u89e3\u6790\u4e3a JSON\nfetch('\/article\/promise-chaining\/user.json')\n  .then(response =&gt; response.json())\n  .then(user =&gt; alert(user.name)); \/\/ iliakan\uff0c\u83b7\u53d6\u5230\u4e86\u7528\u6237\u540d\n<\/code><\/pre>\n<p>\u73b0\u5728\uff0c\u8ba9\u6211\u4eec\u7528\u52a0\u8f7d\u597d\u7684\u7528\u6237\u4fe1\u606f\u641e\u70b9\u4e8b\u60c5\u3002<br \/>\n\u4f8b\u5982\uff0c\u6211\u4eec\u53ef\u4ee5\u518d\u5411 GitHub \u53d1\u9001\u4e00\u4e2a\u8bf7\u6c42\uff0c\u52a0\u8f7d\u7528\u6237\u4e2a\u4eba\u8d44\u6599\u5e76\u663e\u793a\u5934\u50cf\uff1a<\/p>\n<pre><code class=\"language-js\">\/\/ \u53d1\u9001\u4e00\u4e2a\u5bf9 user.json \u7684\u8bf7\u6c42\nfetch('\/article\/promise-chaining\/user.json')\n  \/\/ \u5c06\u5176\u52a0\u8f7d\u4e3a JSON\n  .then(response =&gt; response.json())\n  \/\/ \u53d1\u9001\u4e00\u4e2a\u5230 GitHub \u7684\u8bf7\u6c42\n  .then(user =&gt; fetch(`https:\/\/api.github.com\/users\/${user.name}`))\n  \/\/ \u5c06\u54cd\u5e94\u52a0\u8f7d\u4e3a JSON\n  .then(response =&gt; response.json())\n  \/\/ \u663e\u793a\u5934\u50cf\u56fe\u7247\uff08githubUser.avatar_url\uff093 \u79d2\uff08\u4e5f\u53ef\u4ee5\u52a0\u4e0a\u52a8\u753b\u6548\u679c\uff09\n  .then(githubUser =&gt; {\n    let img = document.createElement('img');\n    img.src = githubUser.avatar_url;\n    img.className = &quot;promise-avatar-example&quot;;\n    document.body.append(img);\n\n    setTimeout(() =&gt; img.remove(), 3000); \/\/ (*)\n  });\n<\/code><\/pre>\n<p>\u8fd9\u6bb5\u4ee3\u7801\u53ef\u4ee5\u5de5\u4f5c\uff0c\u5177\u4f53\u7ec6\u8282\u8bf7\u770b\u6ce8\u91ca\u3002\u4f46\u662f\uff0c\u8fd9\u6709\u4e00\u4e2a\u6f5c\u5728\u7684\u95ee\u9898\uff0c\u4e00\u4e2a\u65b0\u624b\u4f7f\u7528 promise \u65f6\u7684\u5178\u578b\u95ee\u9898\u3002<br \/>\n\u8bf7\u770b\u00a0<code>(*)<\/code>\u00a0\u884c\uff1a\u6211\u4eec\u5982\u4f55\u80fd\u5728\u5934\u50cf\u663e\u793a\u7ed3\u675f\u5e76\u88ab\u79fb\u9664\u00a0<strong>\u4e4b\u540e<\/strong>\u00a0\u505a\u70b9\u4ec0\u4e48\uff1f\u4f8b\u5982\uff0c\u6211\u4eec\u60f3\u663e\u793a\u4e00\u4e2a\u7528\u4e8e\u7f16\u8f91\u8be5\u7528\u6237\u6216\u8005\u5176\u4ed6\u5185\u5bb9\u7684\u8868\u5355\u3002\u5c31\u76ee\u524d\u800c\u8a00\uff0c\u662f\u505a\u4e0d\u5230\u7684\u3002<br \/>\n\u4e3a\u4e86\u4f7f\u94fe\u53ef\u6269\u5c55\uff0c\u6211\u4eec\u9700\u8981\u8fd4\u56de\u4e00\u4e2a\u5728\u5934\u50cf\u663e\u793a\u7ed3\u675f\u65f6\u8fdb\u884c resolve \u7684 promise\u3002<br \/>\n\u5c31\u50cf\u8fd9\u6837\uff1a<\/p>\n<pre><code class=\"language-js\">fetch('\/article\/promise-chaining\/user.json')\n  .then(response =&gt; response.json())\n  .then(user =&gt; fetch(`https:\/\/api.github.com\/users\/${user.name}`))\n  .then(response =&gt; response.json())\n  .then(githubUser =&gt; new Promise(function(resolve, reject) { \/\/ (*)\n    let img = document.createElement('img');\n    img.src = githubUser.avatar_url;\n    img.className = &quot;promise-avatar-example&quot;;\n    document.body.append(img);\n\n    setTimeout(() =&gt; {\n      img.remove();\n      resolve(githubUser); \/\/ (**)\n    }, 3000);\n  }))\n  \/\/ 3 \u79d2\u540e\u89e6\u53d1\n  .then(githubUser =&gt; alert(`Finished showing ${githubUser.name}`));\n<\/code><\/pre>\n<p>\u4e5f\u5c31\u662f\u8bf4\uff0c\u7b2c\u00a0<code>(*)<\/code>\u00a0\u884c\u7684\u00a0<code>.then<\/code>\u00a0\u5904\u7406\u7a0b\u5e8f\u73b0\u5728\u8fd4\u56de\u4e00\u4e2a\u00a0<code>new Promise<\/code>\uff0c\u53ea\u6709\u5728\u00a0<code>setTimeout<\/code>\u00a0\u4e2d\u7684\u00a0<code>resolve(githubUser)<\/code>\u00a0<code>(**)<\/code>\u00a0\u88ab\u8c03\u7528\u540e\u624d\u4f1a\u53d8\u4e3a settled\u3002\u94fe\u4e2d\u7684\u4e0b\u4e00\u4e2a\u00a0<code>.then<\/code>\u00a0\u5c06\u4e00\u76f4\u7b49\u5f85\u8fd9\u4e00\u65f6\u523b\u7684\u5230\u6765\u3002<br \/>\n\u4f5c\u4e3a\u4e00\u4e2a\u597d\u7684\u505a\u6cd5\uff0c\u5f02\u6b65\u884c\u4e3a\u5e94\u8be5\u59cb\u7ec8\u8fd4\u56de\u4e00\u4e2a promise\u3002\u8fd9\u6837\u5c31\u53ef\u4ee5\u4f7f\u5f97\u4e4b\u540e\u6211\u4eec\u8ba1\u5212\u540e\u7eed\u7684\u884c\u4e3a\u6210\u4e3a\u53ef\u80fd\u3002\u5373\u4f7f\u6211\u4eec\u73b0\u5728\u4e0d\u6253\u7b97\u5bf9\u94fe\u8fdb\u884c\u6269\u5c55\uff0c\u4f46\u6211\u4eec\u4e4b\u540e\u53ef\u80fd\u4f1a\u9700\u8981\u3002<br \/>\n\u6700\u540e\uff0c\u6211\u4eec\u53ef\u4ee5\u5c06\u4ee3\u7801\u62c6\u5206\u4e3a\u53ef\u91cd\u7528\u7684\u51fd\u6570\uff1a<\/p>\n<pre><code class=\"language-js\">function loadJson(url) {\n  return fetch(url)\n    .then(response =&gt; response.json());\n}\n\nfunction loadGithubUser(name) {\n  return loadJson(`https:\/\/api.github.com\/users\/${name}`);\n}\n\nfunction showAvatar(githubUser) {\n  return new Promise(function(resolve, reject) {\n    let img = document.createElement('img');\n    img.src = githubUser.avatar_url;\n    img.className = &quot;promise-avatar-example&quot;;\n    document.body.append(img);\n\n    setTimeout(() =&gt; {\n      img.remove();\n      resolve(githubUser);\n    }, 3000);\n  });\n}\n\n\/\/ \u4f7f\u7528\u5b83\u4eec\uff1a\nloadJson('\/article\/promise-chaining\/user.json')\n  .then(user =&gt; loadGithubUser(user.name))\n  .then(showAvatar)\n  .then(githubUser =&gt; alert(`Finished showing ${githubUser.name}`));\n  \/\/ ...\n<\/code><\/pre>\n<h1>\u4f7f\u7528 promise \u8fdb\u884c\u9519\u8bef\u5904\u7406<\/h1>\n<p>promise \u94fe\u5728\u9519\u8bef\uff08error\uff09\u5904\u7406\u4e2d\u5341\u5206\u5f3a\u5927\u3002\u5f53\u4e00\u4e2a promise \u88ab reject \u65f6\uff0c\u63a7\u5236\u6743\u5c06\u79fb\u4ea4\u81f3\u6700\u8fd1\u7684 rejection \u5904\u7406\u7a0b\u5e8f\u3002\u8fd9\u5728\u5b9e\u9645\u5f00\u53d1\u4e2d\u975e\u5e38\u65b9\u4fbf\u3002<br \/>\n\u4f8b\u5982\uff0c\u4e0b\u9762\u4ee3\u7801\u4e2d\u6240\u00a0<code>fetch<\/code>\u00a0\u7684 URL \u662f\u9519\u7684\uff08\u6ca1\u6709\u8fd9\u4e2a\u7f51\u7ad9\uff09\uff0c<code>.catch<\/code>\u00a0\u5bf9\u8fd9\u4e2a error \u8fdb\u884c\u4e86\u5904\u7406\uff1a<\/p>\n<pre><code class=\"language-js\">fetch('https:\/\/no-such-server.blabla') \/\/ reject\n  .then(response =&gt; response.json())\n  .catch(err =&gt; alert(err)) \/\/ TypeError: Failed to fetch\uff08\u8fd9\u91cc\u7684\u6587\u5b57\u53ef\u80fd\u6709\u6240\u4e0d\u540c\uff09\n<\/code><\/pre>\n<p>\u6b63\u5982\u4f60\u6240\u770b\u5230\u7684\uff0c<code>.catch<\/code>\u00a0\u4e0d\u5fc5\u662f\u7acb\u5373\u7684\u3002\u5b83\u53ef\u80fd\u5728\u4e00\u4e2a\u6216\u591a\u4e2a\u00a0<code>.then<\/code>\u00a0\u4e4b\u540e\u51fa\u73b0\u3002<br \/>\n\u6216\u8005\uff0c\u53ef\u80fd\u8be5\u7f51\u7ad9\u4e00\u5207\u6b63\u5e38\uff0c\u4f46\u54cd\u5e94\u4e0d\u662f\u6709\u6548\u7684 JSON\u3002\u6355\u83b7\u6240\u6709 error \u7684\u6700\u7b80\u5355\u7684\u65b9\u6cd5\u662f\uff0c\u5c06\u00a0<code>.catch<\/code>\u00a0\u9644\u52a0\u5230\u94fe\u7684\u672b\u5c3e\uff1a<\/p>\n<pre><code class=\"language-js\">fetch('\/article\/promise-chaining\/user.json')\n  .then(response =&gt; response.json())\n  .then(user =&gt; fetch(`https:\/\/api.github.com\/users\/${user.name}`))\n  .then(response =&gt; response.json())\n  .then(githubUser =&gt; new Promise((resolve, reject) =&gt; {\n    let img = document.createElement('img');\n    img.src = githubUser.avatar_url;\n    img.className = &quot;promise-avatar-example&quot;;\n    document.body.append(img);\n\n    setTimeout(() =&gt; {\n      img.remove();\n      resolve(githubUser);\n    }, 3000);\n  }))\n  .catch(error =&gt; alert(error.message));\n<\/code><\/pre>\n<p>\u901a\u5e38\u60c5\u51b5\u4e0b\uff0c\u8fd9\u6837\u7684\u00a0<code>.catch<\/code>\u00a0\u6839\u672c\u4e0d\u4f1a\u88ab\u89e6\u53d1\u3002\u4f46\u662f\u5982\u679c\u4e0a\u8ff0\u4efb\u610f\u4e00\u4e2a promise rejected\uff08\u7f51\u7edc\u95ee\u9898\u6216\u8005\u65e0\u6548\u7684 json \u6216\u5176\u4ed6\uff09\uff0c<code>.catch<\/code>\u00a0\u5c31\u4f1a\u6355\u83b7\u5b83\u3002<\/p>\n<h2>\u9690\u5f0f try...catch<\/h2>\n<p>promise \u7684\u6267\u884c\u8005\uff08executor\uff09\u548c promise \u7684\u5904\u7406\u7a0b\u5e8f\u5468\u56f4\u6709\u4e00\u4e2a\u201c\u9690\u5f0f\u7684\u00a0<code>try..catch<\/code>\u201d\u3002\u5982\u679c\u53d1\u751f\u5f02\u5e38\uff0c\u5b83\u5c31\u4f1a\u88ab\u6355\u83b7\uff0c\u5e76\u88ab\u89c6\u4e3a rejection \u8fdb\u884c\u5904\u7406\u3002<br \/>\n\u4f8b\u5982\uff0c\u4e0b\u9762\u8fd9\u6bb5\u4ee3\u7801\uff1a<\/p>\n<pre><code class=\"language-js\">new Promise((resolve, reject) =&gt; {\n  throw new Error(&quot;Whoops!&quot;);\n}).catch(alert); \/\/ Error: Whoops!\n<\/code><\/pre>\n<p>\u2026\u2026\u4e0e\u4e0b\u9762\u8fd9\u6bb5\u4ee3\u7801\u5de5\u4f5c\u4e0a\u5b8c\u5168\u76f8\u540c\uff1a<\/p>\n<pre><code class=\"language-js\">new Promise((resolve, reject) =&gt; {\n  reject(new Error(&quot;Whoops!&quot;));\n}).catch(alert); \/\/ Error: Whoops!\n<\/code><\/pre>\n<p>\u5728 executor \u5468\u56f4\u7684\u201c\u9690\u5f0f\u00a0<code>try..catch<\/code>\u201d\u81ea\u52a8\u6355\u83b7\u4e86 error\uff0c\u5e76\u5c06\u5176\u53d8\u4e3a rejected promise\u3002<br \/>\n\u8fd9\u4e0d\u4ec5\u4ec5\u53d1\u751f\u5728 executor \u51fd\u6570\u4e2d\uff0c\u540c\u6837\u4e5f\u53d1\u751f\u5728\u5176\u5904\u7406\u7a0b\u5e8f\u4e2d\u3002\u5982\u679c\u6211\u4eec\u5728\u00a0<code>.then<\/code>\u00a0\u5904\u7406\u7a0b\u5e8f\u4e2d\u00a0<code>throw<\/code>\uff0c\u8fd9\u610f\u5473\u7740 promise rejected\uff0c\u56e0\u6b64\u63a7\u5236\u6743\u79fb\u4ea4\u81f3\u6700\u8fd1\u7684 error \u5904\u7406\u7a0b\u5e8f\u3002<br \/>\n\u8fd9\u662f\u4e00\u4e2a\u4f8b\u5b50\uff1a<\/p>\n<pre><code class=\"language-js\">new Promise((resolve, reject) =&gt; {\n  resolve(&quot;ok&quot;);\n}).then((result) =&gt; {\n  throw new Error(&quot;Whoops!&quot;); \/\/ reject \u8fd9\u4e2a promise\n}).catch(alert); \/\/ Error: Whoops!\n<\/code><\/pre>\n<p>\u5bf9\u4e8e\u6240\u6709\u7684 error \u90fd\u4f1a\u53d1\u751f\u8fd9\u79cd\u60c5\u51b5\uff0c\u800c\u4e0d\u4ec5\u4ec5\u662f\u7531\u00a0<code>throw<\/code>\u00a0\u8bed\u53e5\u5bfc\u81f4\u7684\u8fd9\u4e9b error\u3002\u4f8b\u5982\uff0c\u4e00\u4e2a\u7f16\u7a0b\u9519\u8bef\uff1a<\/p>\n<pre><code class=\"language-js\">new Promise((resolve, reject) =&gt; {\n  resolve(&quot;ok&quot;);\n}).then((result) =&gt; {\n  blabla(); \/\/ \u6ca1\u6709\u8fd9\u4e2a\u51fd\u6570\n}).catch(alert); \/\/ ReferenceError: blabla is not defined\n<\/code><\/pre>\n<p>\u6700\u540e\u7684\u00a0<code>.catch<\/code>\u00a0\u4e0d\u4ec5\u4f1a\u6355\u83b7\u663e\u5f0f\u7684 rejection\uff0c\u8fd8\u4f1a\u6355\u83b7\u5b83\u4e0a\u9762\u7684\u5904\u7406\u7a0b\u5e8f\u4e2d\u610f\u5916\u51fa\u73b0\u7684 error\u3002<\/p>\n<h2>\u518d\u6b21\u629b\u51fa<\/h2>\n<p>\u6b63\u5982\u6211\u4eec\u5df2\u7ecf\u6ce8\u610f\u5230\u7684\uff0c\u94fe\u5c3e\u7aef\u7684\u00a0<code>.catch<\/code>\u00a0\u7684\u8868\u73b0\u6709\u70b9\u50cf\u00a0<code>try..catch<\/code>\u3002\u6211\u4eec\u53ef\u80fd\u6709\u8bb8\u591a\u4e2a\u00a0<code>.then<\/code>\u00a0\u5904\u7406\u7a0b\u5e8f\uff0c\u7136\u540e\u5728\u5c3e\u7aef\u4f7f\u7528\u4e00\u4e2a\u00a0<code>.catch<\/code>\u00a0\u5904\u7406\u4e0a\u9762\u7684\u6240\u6709 error\u3002<br \/>\n\u5728\u5e38\u89c4\u7684\u00a0<code>try..catch<\/code>\u00a0\u4e2d\uff0c\u6211\u4eec\u53ef\u4ee5\u5206\u6790 error\uff0c\u5982\u679c\u6211\u4eec\u65e0\u6cd5\u5904\u7406\u5b83\uff0c\u53ef\u4ee5\u5c06\u5176\u518d\u6b21\u629b\u51fa\u3002\u5bf9\u4e8e promise \u6765\u8bf4\uff0c\u8fd9\u4e5f\u662f\u53ef\u4ee5\u7684\u3002<br \/>\n\u5982\u679c\u6211\u4eec\u5728\u00a0<code>.catch<\/code>\u00a0\u4e2d\u00a0<code>throw<\/code>\uff0c\u90a3\u4e48\u63a7\u5236\u6743\u5c31\u4f1a\u88ab\u79fb\u4ea4\u5230\u4e0b\u4e00\u4e2a\u6700\u8fd1\u7684 error \u5904\u7406\u7a0b\u5e8f\u3002\u5982\u679c\u6211\u4eec\u5904\u7406\u8be5 error \u5e76\u6b63\u5e38\u5b8c\u6210\uff0c\u90a3\u4e48\u5b83\u5c06\u7ee7\u7eed\u5230\u6700\u8fd1\u7684\u6210\u529f\u7684\u00a0<code>.then<\/code>\u00a0\u5904\u7406\u7a0b\u5e8f\u3002<br \/>\n\u5728\u4e0b\u9762\u8fd9\u4e2a\u4f8b\u5b50\u4e2d\uff0c<code>.catch<\/code>\u00a0\u6210\u529f\u5904\u7406\u4e86 error\uff1a<\/p>\n<pre><code class=\"language-js\">\/\/ \u6267\u884c\u6d41\uff1acatch -&gt; then\nnew Promise((resolve, reject) =&gt; {\n\n  throw new Error(&quot;Whoops!&quot;);\n\n}).catch(function(error) {\n\n  alert(&quot;The error is handled, continue normally&quot;);\n\n}).then(() =&gt; alert(&quot;Next successful handler runs&quot;));\n<\/code><\/pre>\n<p>\u8fd9\u91cc\u00a0<code>.catch<\/code>\u00a0\u5757\u6b63\u5e38\u5b8c\u6210\u3002\u6240\u4ee5\u4e0b\u4e00\u4e2a\u6210\u529f\u7684\u00a0<code>.then<\/code>\u00a0\u5904\u7406\u7a0b\u5e8f\u5c31\u4f1a\u88ab\u8c03\u7528\u3002<br \/>\n\u5728\u4e0b\u9762\u7684\u4f8b\u5b50\u4e2d\uff0c\u6211\u4eec\u53ef\u4ee5\u770b\u5230\u00a0<code>.catch<\/code>\u00a0\u7684\u53e6\u4e00\u79cd\u60c5\u51b5\u3002<code>(*)<\/code>\u00a0\u884c\u7684\u5904\u7406\u7a0b\u5e8f\u6355\u83b7\u4e86 error\uff0c\u4f46\u65e0\u6cd5\u5904\u7406\u5b83\uff08\u4f8b\u5982\uff0c\u5b83\u53ea\u77e5\u9053\u5982\u4f55\u5904\u7406\u00a0<code>URIError<\/code>\uff09\uff0c\u6240\u4ee5\u5b83\u5c06\u5176\u518d\u6b21\u629b\u51fa\uff1a<\/p>\n<pre><code class=\"language-js\">\/\/ \u6267\u884c\u6d41\uff1acatch -&gt; catch\nnew Promise((resolve, reject) =&gt; {\n\n  throw new Error(&quot;Whoops!&quot;);\n\n}).catch(function(error) { \/\/ (*)\n\n  if (error instanceof URIError) {\n    \/\/ \u5904\u7406\u5b83\n  } else {\n    alert(&quot;Can't handle such error&quot;);\n\n    throw error; \/\/ \u518d\u6b21\u629b\u51fa\u6b64 error \u6216\u53e6\u5916\u4e00\u4e2a error\uff0c\u6267\u884c\u5c06\u8df3\u8f6c\u81f3\u4e0b\u4e00\u4e2a catch\n  }\n\n}).then(function() {\n  \/* \u4e0d\u5728\u8fd9\u91cc\u8fd0\u884c *\/\n}).catch(error =&gt; { \/\/ (**)\n\n  alert(`The unknown error has occurred: ${error}`);\n  \/\/ \u4e0d\u4f1a\u8fd4\u56de\u4efb\u4f55\u5185\u5bb9 =&gt; \u6267\u884c\u6b63\u5e38\u8fdb\u884c\n\n});\n<\/code><\/pre>\n<p>\u6267\u884c\u4ece\u7b2c\u4e00\u4e2a\u00a0<code>.catch<\/code>\u00a0<code>(*)<\/code>\u00a0\u6cbf\u7740\u94fe\u8df3\u8f6c\u81f3\u4e0b\u4e00\u4e2a\u00a0<code>(**)<\/code>\u3002<\/p>\n<h2>\u672a\u5904\u7406\u7684 rejection<\/h2>\n<p>\u5f53\u4e00\u4e2a error \u6ca1\u6709\u88ab\u5904\u7406\u4f1a\u53d1\u751f\u4ec0\u4e48\uff1f\u4f8b\u5982\uff0c\u6211\u4eec\u5fd8\u4e86\u5728\u94fe\u7684\u5c3e\u7aef\u9644\u52a0\u00a0<code>.catch<\/code>\uff0c\u50cf\u8fd9\u6837\uff1a<\/p>\n<pre><code class=\"language-js\">new Promise(function() {\n  noSuchFunction(); \/\/ \u8fd9\u91cc\u51fa\u73b0 error\uff08\u6ca1\u6709\u8fd9\u4e2a\u51fd\u6570\uff09\n})\n  .then(() =&gt; {\n    \/\/ \u4e00\u4e2a\u6216\u591a\u4e2a\u6210\u529f\u7684 promise \u5904\u7406\u7a0b\u5e8f\n  }); \/\/ \u5c3e\u7aef\u6ca1\u6709 .catch\uff01\n<\/code><\/pre>\n<p>\u5982\u679c\u51fa\u73b0 error\uff0cpromise \u7684\u72b6\u6001\u5c06\u53d8\u4e3a \u201crejected\u201d\uff0c\u7136\u540e\u6267\u884c\u5e94\u8be5\u8df3\u8f6c\u81f3\u6700\u8fd1\u7684 rejection \u5904\u7406\u7a0b\u5e8f\u3002\u4f46\u4e0a\u9762\u8fd9\u4e2a\u4f8b\u5b50\u4e2d\u5e76\u6ca1\u6709\u8fd9\u6837\u7684\u5904\u7406\u7a0b\u5e8f\u3002\u56e0\u6b64 error \u4f1a\u201c\u5361\u4f4f\u201d\u3002\u6ca1\u6709\u4ee3\u7801\u6765\u5904\u7406\u5b83\u3002<br \/>\n\u5728\u5b9e\u9645\u5f00\u53d1\u4e2d\uff0c\u5c31\u50cf\u4ee3\u7801\u4e2d\u5e38\u89c4\u7684\u672a\u5904\u7406\u7684 error \u4e00\u6837\uff0c\u8fd9\u610f\u5473\u7740\u67d0\u4e9b\u4e1c\u897f\u51fa\u4e86\u95ee\u9898\u3002<br \/>\n\u5f53\u53d1\u751f\u4e00\u4e2a\u5e38\u89c4\u7684 error \u5e76\u4e14\u672a\u88ab\u00a0<code>try..catch<\/code>\u00a0\u6355\u83b7\u65f6\u4f1a\u53d1\u751f\u4ec0\u4e48\uff1f\u811a\u672c\u6b7b\u4e86\uff0c\u5e76\u5728\u63a7\u5236\u53f0\u4e2d\u7559\u4e0b\u4e86\u4e00\u4e2a\u4fe1\u606f\u3002\u5bf9\u4e8e\u5728 promise \u4e2d\u672a\u88ab\u5904\u7406\u7684 rejection\uff0c\u4e5f\u4f1a\u53d1\u751f\u7c7b\u4f3c\u7684\u4e8b\u3002<br \/>\nJavaScript \u5f15\u64ce\u4f1a\u8ddf\u8e2a\u6b64\u7c7b rejection\uff0c\u5728\u8fd9\u79cd\u60c5\u51b5\u4e0b\u4f1a\u751f\u6210\u4e00\u4e2a\u5168\u5c40\u7684 error\u3002\u5982\u679c\u4f60\u8fd0\u884c\u4e0a\u9762\u8fd9\u4e2a\u4ee3\u7801\uff0c\u4f60\u53ef\u4ee5\u5728\u63a7\u5236\u53f0\u4e2d\u770b\u5230\u3002<br \/>\n\u5728\u6d4f\u89c8\u5668\u4e2d\uff0c\u6211\u4eec\u53ef\u4ee5\u4f7f\u7528\u00a0<code>unhandledrejection<\/code>\u00a0\u4e8b\u4ef6\u6765\u6355\u83b7\u8fd9\u7c7b error\uff1a<\/p>\n<pre><code class=\"language-js\">window.addEventListener('unhandledrejection', function(event) {\n  \/\/ \u8fd9\u4e2a\u4e8b\u4ef6\u5bf9\u8c61\u6709\u4e24\u4e2a\u7279\u6b8a\u7684\u5c5e\u6027\uff1a\n  alert(event.promise); \/\/ [object Promise] \u2014\u2014 \u751f\u6210\u8be5\u5168\u5c40 error \u7684 promise\n  alert(event.reason); \/\/ Error: Whoops! \u2014\u2014 \u672a\u5904\u7406\u7684 error \u5bf9\u8c61\n});\n\nnew Promise(function() {\n  throw new Error(&quot;Whoops!&quot;);\n}); \/\/ \u6ca1\u6709\u7528\u6765\u5904\u7406 error \u7684 catch\n<\/code><\/pre>\n<p>\u8fd9\u4e2a\u4e8b\u4ef6\u662f\u00a0<a href=\"https:\/\/html.spec.whatwg.org\/multipage\/webappapis.html#unhandled-promise-rejections\">HTML \u6807\u51c6<\/a>\u00a0\u7684\u4e00\u90e8\u5206\u3002<br \/>\n\u5982\u679c\u51fa\u73b0\u4e86\u4e00\u4e2a error\uff0c\u5e76\u4e14\u5728\u8fd9\u6ca1\u6709\u00a0<code>.catch<\/code>\uff0c\u90a3\u4e48\u00a0<code>unhandledrejection<\/code>\u00a0\u5904\u7406\u7a0b\u5e8f\u5c31\u4f1a\u88ab\u89e6\u53d1\uff0c\u5e76\u83b7\u53d6\u5177\u6709 error \u76f8\u5173\u4fe1\u606f\u7684\u00a0<code>event<\/code>\u00a0\u5bf9\u8c61\uff0c\u6240\u4ee5\u6211\u4eec\u5c31\u80fd\u505a\u4e00\u4e9b\u540e\u7eed\u5904\u7406\u4e86\u3002<br \/>\n\u901a\u5e38\u6b64\u7c7b error \u662f\u65e0\u6cd5\u6062\u590d\u7684\uff0c\u6240\u4ee5\u6211\u4eec\u6700\u597d\u7684\u89e3\u51b3\u65b9\u6848\u662f\u5c06\u95ee\u9898\u544a\u77e5\u7528\u6237\uff0c\u5e76\u4e14\u53ef\u4ee5\u5c06\u4e8b\u4ef6\u62a5\u544a\u7ed9\u670d\u52a1\u5668\u3002<br \/>\n\u5728 Node.js \u7b49\u975e\u6d4f\u89c8\u5668\u73af\u5883\u4e2d\uff0c\u6709\u5176\u4ed6\u7528\u4e8e\u8ddf\u8e2a\u672a\u5904\u7406\u7684 error \u7684\u65b9\u6cd5\u3002<\/p>\n<h1>Promise API<\/h1>\n<p>\u5728\u00a0<code>Promise<\/code>\u00a0\u7c7b\u4e2d\uff0c\u6709 6 \u79cd\u9759\u6001\u65b9\u6cd5\u3002\u6211\u4eec\u5728\u8fd9\u91cc\u7b80\u5355\u4ecb\u7ecd\u4e0b\u5b83\u4eec\u7684\u4f7f\u7528\u573a\u666f\u3002<\/p>\n<h2>Promise.all<\/h2>\n<p>\u5047\u8bbe\u6211\u4eec\u5e0c\u671b\u5e76\u884c\u6267\u884c\u591a\u4e2a promise\uff0c\u5e76\u7b49\u5f85\u6240\u6709 promise \u90fd\u51c6\u5907\u5c31\u7eea\u3002<br \/>\n\u4f8b\u5982\uff0c\u5e76\u884c\u4e0b\u8f7d\u51e0\u4e2a URL\uff0c\u5e76\u7b49\u5230\u6240\u6709\u5185\u5bb9\u90fd\u4e0b\u8f7d\u5b8c\u6bd5\u540e\u518d\u5bf9\u5b83\u4eec\u8fdb\u884c\u5904\u7406\u3002<br \/>\n\u8fd9\u5c31\u662f\u00a0<code>Promise.all<\/code>\u00a0\u7684\u7528\u9014\u3002<br \/>\n\u8bed\u6cd5\uff1a<\/p>\n<pre><code class=\"language-js\">let promise = Promise.all(iterable);\n<\/code><\/pre>\n<p><code>Promise.all<\/code>\u00a0\u63a5\u53d7\u4e00\u4e2a\u53ef\u8fed\u4ee3\u5bf9\u8c61\uff08\u901a\u5e38\u662f\u4e00\u4e2a\u6570\u7ec4\u9879\u4e3a promise \u7684\u6570\u7ec4\uff09\uff0c\u5e76\u8fd4\u56de\u4e00\u4e2a\u65b0\u7684 promise\u3002<br \/>\n\u5f53\u6240\u6709\u7ed9\u5b9a\u7684 promise \u90fd resolve \u65f6\uff0c\u65b0\u7684 promise \u624d\u4f1a resolve\uff0c\u5e76\u4e14\u5176\u7ed3\u679c\u6570\u7ec4\u5c06\u6210\u4e3a\u65b0 promise \u7684\u7ed3\u679c\u3002<br \/>\n\u4f8b\u5982\uff0c\u4e0b\u9762\u7684\u00a0<code>Promise.all<\/code>\u00a0\u5728 3 \u79d2\u4e4b\u540e settled\uff0c\u7136\u540e\u5b83\u7684\u7ed3\u679c\u5c31\u662f\u4e00\u4e2a\u00a0<code>[1, 2, 3]<\/code>\u00a0\u6570\u7ec4\uff1a<\/p>\n<pre><code class=\"language-js\">Promise.all([\n  new Promise(resolve =&gt; setTimeout(() =&gt; resolve(1), 3000)), \/\/ 1\n  new Promise(resolve =&gt; setTimeout(() =&gt; resolve(2), 2000)), \/\/ 2\n  new Promise(resolve =&gt; setTimeout(() =&gt; resolve(3), 1000))  \/\/ 3\n]).then(alert); \/\/ 1,2,3 \u5f53\u4e0a\u9762\u8fd9\u4e9b promise \u51c6\u5907\u597d\u65f6\uff1a\u6bcf\u4e2a promise \u90fd\u8d21\u732e\u4e86\u6570\u7ec4\u4e2d\u7684\u4e00\u4e2a\u5143\u7d20\n<\/code><\/pre>\n<p>\u8bf7\u6ce8\u610f\uff0c\u7ed3\u679c\u6570\u7ec4\u4e2d\u5143\u7d20\u7684\u987a\u5e8f\u4e0e\u5176\u5728\u6e90 promise \u4e2d\u7684\u987a\u5e8f\u76f8\u540c\u3002\u5373\u4f7f\u7b2c\u4e00\u4e2a promise \u82b1\u8d39\u4e86\u6700\u957f\u7684\u65f6\u95f4\u624d resolve\uff0c\u4f46\u5b83\u4ecd\u662f\u7ed3\u679c\u6570\u7ec4\u4e2d\u7684\u7b2c\u4e00\u4e2a\u3002<br \/>\n\u4e00\u4e2a\u5e38\u89c1\u7684\u6280\u5de7\u662f\uff0c\u5c06\u4e00\u4e2a\u4efb\u52a1\u6570\u636e\u6570\u7ec4\u6620\u5c04\uff08map\uff09\u5230\u4e00\u4e2a promise \u6570\u7ec4\uff0c\u7136\u540e\u5c06\u5176\u5305\u88c5\u5230\u00a0<code>Promise.all<\/code>\u3002<br \/>\n\u4f8b\u5982\uff0c\u5982\u679c\u6211\u4eec\u6709\u4e00\u4e2a\u5b58\u50a8 URL \u7684\u6570\u7ec4\uff0c\u6211\u4eec\u53ef\u4ee5\u50cf\u8fd9\u6837 fetch \u5b83\u4eec\uff1a<\/p>\n<pre><code class=\"language-js\">let urls = [\n  'https:\/\/api.github.com\/users\/iliakan',\n  'https:\/\/api.github.com\/users\/remy',\n  'https:\/\/api.github.com\/users\/jeresig'\n];\n\n\/\/ \u5c06\u6bcf\u4e2a url \u6620\u5c04\uff08map\uff09\u5230 fetch \u7684 promise \u4e2d\nlet requests = urls.map(url =&gt; fetch(url));\n\n\/\/ Promise.all \u7b49\u5f85\u6240\u6709\u4efb\u52a1\u90fd resolved\nPromise.all(requests)\n  .then(responses =&gt; responses.forEach(\n    response =&gt; alert(`${response.url}: ${response.status}`)\n  ));\n<\/code><\/pre>\n<p>\u4e00\u4e2a\u66f4\u771f\u5b9e\u7684\u793a\u4f8b\uff0c\u901a\u8fc7 GitHub \u7528\u6237\u540d\u6765\u83b7\u53d6\u4e00\u4e2a GitHub \u7528\u6237\u6570\u7ec4\u4e2d\u7528\u6237\u7684\u4fe1\u606f\uff08\u6211\u4eec\u4e5f\u53ef\u4ee5\u901a\u8fc7\u5546\u54c1 id \u6765\u83b7\u53d6\u5546\u54c1\u6570\u7ec4\u4e2d\u7684\u5546\u54c1\u4fe1\u606f\uff0c\u903b\u8f91\u90fd\u662f\u4e00\u6837\u7684\uff09\uff1a<\/p>\n<pre><code class=\"language-js\">let names = ['iliakan', 'remy', 'jeresig'];\n\nlet requests = names.map(name =&gt; fetch(`https:\/\/api.github.com\/users\/${name}`));\n\nPromise.all(requests)\n  .then(responses =&gt; {\n    \/\/ \u6240\u6709\u54cd\u5e94\u90fd\u88ab\u6210\u529f resolved\n    for(let response of responses) {\n      alert(`${response.url}: ${response.status}`); \/\/ \u5bf9\u5e94\u6bcf\u4e2a url \u90fd\u663e\u793a 200\n    }\n\n    return responses;\n  })\n  \/\/ \u5c06\u54cd\u5e94\u6570\u7ec4\u6620\u5c04\uff08map\uff09\u5230 response.json() \u6570\u7ec4\u4e2d\u4ee5\u8bfb\u53d6\u5b83\u4eec\u7684\u5185\u5bb9\n  .then(responses =&gt; Promise.all(responses.map(r =&gt; r.json())))\n  \/\/ \u6240\u6709 JSON \u7ed3\u679c\u90fd\u88ab\u89e3\u6790\uff1a&quot;users&quot; \u662f\u5b83\u4eec\u7684\u6570\u7ec4\n  .then(users =&gt; users.forEach(user =&gt; alert(user.name)));\n<\/code><\/pre>\n<p><strong>\u5982\u679c\u4efb\u610f\u4e00\u4e2a promise \u88ab reject\uff0c\u7531\u00a0<code>Promise.all<\/code>\u00a0\u8fd4\u56de\u7684 promise \u5c31\u4f1a\u7acb\u5373 reject\uff0c\u5e76\u4e14\u5e26\u6709\u7684\u5c31\u662f\u8fd9\u4e2a error\u3002<\/strong><\/p>\n<pre><code class=\"language-js\">Promise.all([\n  new Promise((resolve, reject) =&gt; setTimeout(() =&gt; resolve(1), 1000)),\n  new Promise((resolve, reject) =&gt; setTimeout(() =&gt; reject(new Error(&quot;Whoops!&quot;)), 2000)),\n  new Promise((resolve, reject) =&gt; setTimeout(() =&gt; resolve(3), 3000))\n]).catch(alert); \/\/ Error: Whoops!\n<\/code><\/pre>\n<p>\u8fd9\u91cc\u7684\u7b2c\u4e8c\u4e2a promise \u5728\u4e24\u79d2\u540e reject\u3002\u8fd9\u7acb\u5373\u5bfc\u81f4\u4e86\u00a0<code>Promise.all<\/code>\u00a0\u7684 reject\uff0c\u56e0\u6b64\u00a0<code>.catch<\/code>\u00a0\u6267\u884c\u4e86\uff1a\u88ab reject \u7684 error \u6210\u4e3a\u4e86\u6574\u4e2a\u00a0<code>Promise.all<\/code>\u00a0\u7684\u7ed3\u679c\u3002<\/p>\n<blockquote>\n<p>\u5982\u679c\u51fa\u73b0 error\uff0c\u5176\u4ed6 promise \u5c06\u88ab\u5ffd\u7565<br \/>\n\u5982\u679c\u5176\u4e2d\u4e00\u4e2a promise \u88ab reject\uff0c<code>Promise.all<\/code>\u00a0\u5c31\u4f1a\u7acb\u5373\u88ab reject\uff0c\u5b8c\u5168\u5ffd\u7565\u5217\u8868\u4e2d\u5176\u4ed6\u7684 promise\u3002\u5b83\u4eec\u7684\u7ed3\u679c\u4e5f\u88ab\u5ffd\u7565\u3002<br \/>\n\u4f8b\u5982\uff0c\u50cf\u4e0a\u9762\u90a3\u4e2a\u4f8b\u5b50\uff0c\u5982\u679c\u6709\u591a\u4e2a\u540c\u65f6\u8fdb\u884c\u7684\u00a0<code>fetch<\/code>\u00a0\u8c03\u7528\uff0c\u5176\u4e2d\u4e00\u4e2a\u5931\u8d25\uff0c\u5176\u4ed6\u7684\u00a0<code>fetch<\/code>\u00a0\u64cd\u4f5c\u4ecd\u7136\u4f1a\u7ee7\u7eed\u6267\u884c\uff0c\u4f46\u662f\u00a0<code>Promise.all<\/code>\u00a0\u5c06\u4e0d\u4f1a\u518d\u5173\u5fc3\uff08watch\uff09\u5b83\u4eec\u3002\u5b83\u4eec\u53ef\u80fd\u4f1a settle\uff0c\u4f46\u662f\u5b83\u4eec\u7684\u7ed3\u679c\u5c06\u88ab\u5ffd\u7565\u3002<br \/>\n<code>Promise.all<\/code>\u00a0\u6ca1\u6709\u91c7\u53d6\u4efb\u4f55\u63aa\u65bd\u6765\u53d6\u6d88\u5b83\u4eec\uff0c\u56e0\u4e3a promise \u4e2d\u6ca1\u6709\u201c\u53d6\u6d88\u201d\u7684\u6982\u5ff5\u3002\u5728\u00a0<a href=\"https:\/\/zh.javascript.info\/fetch-abort\">\u53e6\u4e00\u4e2a\u7ae0\u8282<\/a>\u00a0\u4e2d\uff0c\u6211\u4eec\u5c06\u4ecb\u7ecd\u53ef\u4ee5\u5e2e\u52a9\u6211\u4eec\u89e3\u51b3\u8fd9\u4e2a\u95ee\u9898\uff08\u8bd1\u6ce8\uff1a\u6307\u7684\u662f\u201c\u53d6\u6d88\u201d promise\uff09\u7684\u00a0<code>AbortController<\/code>\uff0c\u4f46\u5b83\u4e0d\u662f Promise API \u7684\u4e00\u90e8\u5206\u3002<\/p>\n<\/blockquote>\n<blockquote>\n<p><code>Promise.all(iterable)<\/code>\u00a0\u5141\u8bb8\u5728\u00a0<code>iterable<\/code>\u00a0\u4e2d\u4f7f\u7528\u975e promise \u7684\u201c\u5e38\u89c4\u201d\u503c<br \/>\n\u901a\u5e38\uff0c<code>Promise.all(...)<\/code>\u00a0\u63a5\u53d7\u542b\u6709 promise \u9879\u7684\u53ef\u8fed\u4ee3\u5bf9\u8c61\uff08\u5927\u591a\u6570\u60c5\u51b5\u4e0b\u662f\u6570\u7ec4\uff09\u4f5c\u4e3a\u53c2\u6570\u3002\u4f46\u662f\uff0c\u5982\u679c\u8fd9\u4e9b\u5bf9\u8c61\u4e2d\u7684\u4efb\u4f55\u4e00\u4e2a\u4e0d\u662f promise\uff0c\u90a3\u4e48\u5b83\u5c06\u88ab\u201c\u6309\u539f\u6837\u201d\u4f20\u9012\u7ed9\u7ed3\u679c\u6570\u7ec4\u3002<br \/>\n\u4f8b\u5982\uff0c\u8fd9\u91cc\u7684\u7ed3\u679c\u662f\u00a0<code>[1, 2, 3]<\/code>\uff1a<\/p>\n<\/blockquote>\n<pre><code class=\"language-js\">Promise.all([\n  new Promise((resolve, reject) =&gt; {\n    setTimeout(() =&gt; resolve(1), 1000)\n  }),\n  2,\n  3\n]).then(alert); \/\/ 1, 2, 3\n<\/code><\/pre>\n<blockquote>\n<p>\u6240\u4ee5\u6211\u4eec\u53ef\u4ee5\u5728\u65b9\u4fbf\u7684\u5730\u65b9\u5c06\u51c6\u5907\u597d\u7684\u503c\u4f20\u9012\u7ed9\u00a0<code>Promise.all<\/code>\u3002<\/p>\n<\/blockquote>\n<h2>Promise.allSettled<\/h2>\n<blockquote>\n<p>\u6700\u8fd1\u65b0\u589e\u7684\u7279\u6027<br \/>\n\u8fd9\u662f\u4e00\u4e2a\u6700\u8fd1\u6dfb\u52a0\u5230 JavaScript \u7684\u7279\u6027\u3002 \u65e7\u5f0f\u6d4f\u89c8\u5668\u53ef\u80fd\u9700\u8981 polyfills.<\/p>\n<\/blockquote>\n<p>\u5982\u679c\u4efb\u610f\u7684 promise reject\uff0c\u5219\u00a0<code>Promise.all<\/code>\u00a0\u6574\u4e2a\u5c06\u4f1a reject\u3002\u5f53\u6211\u4eec\u9700\u8981\u00a0<strong>\u6240\u6709<\/strong>\u00a0\u7ed3\u679c\u90fd\u6210\u529f\u65f6\uff0c\u5b83\u5bf9\u8fd9\u79cd\u201c\u5168\u6709\u6216\u5168\u65e0\u201d\u7684\u60c5\u51b5\u5f88\u6709\u7528\uff1a<\/p>\n<pre><code class=\"language-js\">Promise.all([\n  fetch('\/template.html'),\n  fetch('\/style.css'),\n  fetch('\/data.json')\n]).then(render); \/\/ render \u65b9\u6cd5\u9700\u8981\u6240\u6709 fetch \u7684\u6570\u636e\n<\/code><\/pre>\n<p><code>Promise.allSettled<\/code>\u00a0\u7b49\u5f85\u6240\u6709\u7684 promise \u90fd\u88ab settle\uff0c\u65e0\u8bba\u7ed3\u679c\u5982\u4f55\u3002\u7ed3\u679c\u6570\u7ec4\u5177\u6709\uff1a<\/p>\n<ul>\n<li><code>{status:&quot;fulfilled&quot;, value:result}<\/code>\u00a0\u5bf9\u4e8e\u6210\u529f\u7684\u54cd\u5e94\uff0c<\/li>\n<li><code>{status:&quot;rejected&quot;, reason:error}<\/code>\u00a0\u5bf9\u4e8e error\u3002<br \/>\n\u4f8b\u5982\uff0c\u6211\u4eec\u60f3\u8981\u83b7\u53d6\uff08fetch\uff09\u591a\u4e2a\u7528\u6237\u7684\u4fe1\u606f\u3002\u5373\u4f7f\u5176\u4e2d\u4e00\u4e2a\u8bf7\u6c42\u5931\u8d25\uff0c\u6211\u4eec\u4ecd\u7136\u5bf9\u5176\u4ed6\u7684\u611f\u5174\u8da3\u3002<br \/>\n\u8ba9\u6211\u4eec\u4f7f\u7528\u00a0<code>Promise.allSettled<\/code>\uff1a<\/li>\n<\/ul>\n<pre><code class=\"language-js\">let urls = [\n  'https:\/\/api.github.com\/users\/iliakan',\n  'https:\/\/api.github.com\/users\/remy',\n  'https:\/\/no-such-url'\n];\n\nPromise.allSettled(urls.map(url =&gt; fetch(url)))\n  .then(results =&gt; { \/\/ (*)\n    results.forEach((result, num) =&gt; {\n      if (result.status == &quot;fulfilled&quot;) {\n        alert(`${urls[num]}: ${result.value.status}`);\n      }\n      if (result.status == &quot;rejected&quot;) {\n        alert(`${urls[num]}: ${result.reason}`);\n      }\n    });\n  });\n<\/code><\/pre>\n<p>\u4e0a\u9762\u7684\u00a0<code>(*)<\/code>\u00a0\u884c\u4e2d\u7684\u00a0<code>results<\/code>\u00a0\u5c06\u4f1a\u662f\uff1a<\/p>\n<pre><code class=\"language-js\">[\n  {status: 'fulfilled', value: ...response...},\n  {status: 'fulfilled', value: ...response...},\n  {status: 'rejected', reason: ...error object...}\n]\n<\/code><\/pre>\n<p>\u6240\u4ee5\uff0c\u5bf9\u4e8e\u6bcf\u4e2a promise\uff0c\u6211\u4eec\u90fd\u5f97\u5230\u4e86\u5176\u72b6\u6001\uff08status\uff09\u548c\u00a0<code>value\/reason<\/code>\u3002<\/p>\n<h3>Polyfill<\/h3>\n<p>\u5982\u679c\u6d4f\u89c8\u5668\u4e0d\u652f\u6301\u00a0<code>Promise.allSettled<\/code>\uff0c\u5f88\u5bb9\u6613\u8fdb\u884c polyfill\uff1a<\/p>\n<pre><code class=\"language-js\">if (!Promise.allSettled) {\n  const rejectHandler = reason =&gt; ({ status: 'rejected', reason });\n\n  const resolveHandler = value =&gt; ({ status: 'fulfilled', value });\n\n  Promise.allSettled = function (promises) {\n    const convertedPromises = promises.map(p =&gt; Promise.resolve(p).then(resolveHandler, rejectHandler));\n    return Promise.all(convertedPromises);\n  };\n}\n<\/code><\/pre>\n<p>\u5728\u8fd9\u6bb5\u4ee3\u7801\u4e2d\uff0c<code>promises.map<\/code>\u00a0\u83b7\u53d6\u8f93\u5165\u503c\uff0c\u5e76\u901a\u8fc7\u00a0<code>p =&gt; Promise.resolve(p)<\/code>\u00a0\u5c06\u8f93\u5165\u503c\u8f6c\u6362\u4e3a promise\uff08\u4ee5\u9632\u4f20\u9012\u4e86\u975e promise \u503c\uff09\uff0c\u7136\u540e\u5411\u6bcf\u4e00\u4e2a promise \u90fd\u6dfb\u52a0\u00a0<code>.then<\/code>\u00a0\u5904\u7406\u7a0b\u5e8f\u3002<br \/>\n\u8fd9\u4e2a\u5904\u7406\u7a0b\u5e8f\u5c06\u6210\u529f\u7684\u7ed3\u679c\u00a0<code>value<\/code>\u00a0\u8f6c\u6362\u4e3a\u00a0<code>{status:'fulfilled', value}<\/code>\uff0c\u5c06 error\u00a0<code>reason<\/code>\u00a0\u8f6c\u6362\u4e3a\u00a0<code>{status:'rejected', reason}<\/code>\u3002\u8fd9\u6b63\u662f\u00a0<code>Promise.allSettled<\/code>\u00a0\u7684\u683c\u5f0f\u3002<br \/>\n\u7136\u540e\u6211\u4eec\u5c31\u53ef\u4ee5\u4f7f\u7528\u00a0<code>Promise.allSettled<\/code>\u00a0\u6765\u83b7\u53d6\u00a0<strong>\u6240\u6709<\/strong>\u00a0\u7ed9\u5b9a\u7684 promise \u7684\u7ed3\u679c\uff0c\u5373\u4f7f\u5176\u4e2d\u4e00\u4e9b\u88ab reject\u3002<\/p>\n<h2>Promise.race<\/h2>\n<p>\u4e0e\u00a0<code>Promise.all<\/code>\u00a0\u7c7b\u4f3c\uff0c\u4f46\u53ea\u7b49\u5f85\u7b2c\u4e00\u4e2a settled \u7684 promise \u5e76\u83b7\u53d6\u5176\u7ed3\u679c\uff08\u6216 error\uff09\u3002<br \/>\n\u8bed\u6cd5\uff1a<\/p>\n<pre><code class=\"language-js\">let promise = Promise.race(iterable);\n<\/code><\/pre>\n<p>\u4f8b\u5982\uff0c\u8fd9\u91cc\u7684\u7ed3\u679c\u5c06\u662f\u00a0<code>1<\/code>\uff1a<\/p>\n<pre><code class=\"language-js\">Promise.race([\n  new Promise((resolve, reject) =&gt; setTimeout(() =&gt; resolve(1), 1000)),\n  new Promise((resolve, reject) =&gt; setTimeout(() =&gt; reject(new Error(&quot;Whoops!&quot;)), 2000)),\n  new Promise((resolve, reject) =&gt; setTimeout(() =&gt; resolve(3), 3000))\n]).then(alert); \/\/ 1\n<\/code><\/pre>\n<p>\u8fd9\u91cc\u7b2c\u4e00\u4e2a promise \u6700\u5feb\uff0c\u6240\u4ee5\u5b83\u53d8\u6210\u4e86\u7ed3\u679c\u3002\u7b2c\u4e00\u4e2a settled \u7684 promise \u201c\u8d62\u5f97\u4e86\u6bd4\u8d5b\u201d\u4e4b\u540e\uff0c\u6240\u6709\u8fdb\u4e00\u6b65\u7684 result\/error \u90fd\u4f1a\u88ab\u5ffd\u7565\u3002<\/p>\n<h2>Promise.any<\/h2>\n<p>\u4e0e\u00a0<code>Promise.race<\/code>\u00a0\u7c7b\u4f3c\uff0c\u533a\u522b\u5728\u4e8e\u00a0<code>Promise.any<\/code>\u00a0\u53ea\u7b49\u5f85\u7b2c\u4e00\u4e2a fulfilled \u7684 promise\uff0c\u5e76\u5c06\u8fd9\u4e2a fulfilled \u7684 promise \u8fd4\u56de\u3002\u5982\u679c\u7ed9\u51fa\u7684 promise \u90fd rejected\uff0c\u90a3\u4e48\u8fd4\u56de\u7684 promise \u4f1a\u5e26\u6709\u00a0<a href=\"https:\/\/developer.mozilla.org\/zh\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/AggregateError\"><code>AggregateError<\/code><\/a>\u00a0\u2014\u2014 \u4e00\u4e2a\u7279\u6b8a\u7684 error \u5bf9\u8c61\uff0c\u5728\u5176\u00a0<code>errors<\/code>\u00a0\u5c5e\u6027\u4e2d\u5b58\u50a8\u7740\u6240\u6709 promise error\u3002<br \/>\n\u8bed\u6cd5\u5982\u4e0b\uff1a<\/p>\n<pre><code class=\"language-js\">let promise = Promise.any(iterable);\n<\/code><\/pre>\n<p>\u4f8b\u5982\uff0c\u8fd9\u91cc\u7684\u7ed3\u679c\u5c06\u662f\u00a0<code>1<\/code>\uff1a<\/p>\n<pre><code class=\"language-js\">Promise.any([\n  new Promise((resolve, reject) =&gt; setTimeout(() =&gt; reject(new Error(&quot;Whoops!&quot;)), 1000)),\n  new Promise((resolve, reject) =&gt; setTimeout(() =&gt; resolve(1), 2000)),\n  new Promise((resolve, reject) =&gt; setTimeout(() =&gt; resolve(3), 3000))\n]).then(alert); \/\/ 1\n<\/code><\/pre>\n<p>\u8fd9\u91cc\u7684\u7b2c\u4e00\u4e2a promise \u662f\u6700\u5feb\u7684\uff0c\u4f46 rejected \u4e86\uff0c\u6240\u4ee5\u7b2c\u4e8c\u4e2a promise \u5219\u6210\u4e3a\u4e86\u7ed3\u679c\u3002\u5728\u7b2c\u4e00\u4e2a fulfilled \u7684 promise \u201c\u8d62\u5f97\u6bd4\u8d5b\u201d\u540e\uff0c\u6240\u6709\u8fdb\u4e00\u6b65\u7684\u7ed3\u679c\u90fd\u5c06\u88ab\u5ffd\u7565\u3002<br \/>\n\u8fd9\u662f\u4e00\u4e2a\u6240\u6709 promise \u90fd\u5931\u8d25\u7684\u4f8b\u5b50\uff1a<\/p>\n<pre><code class=\"language-js\">Promise.any([\n  new Promise((resolve, reject) =&gt; setTimeout(() =&gt; reject(new Error(&quot;Ouch!&quot;)), 1000)),\n  new Promise((resolve, reject) =&gt; setTimeout(() =&gt; reject(new Error(&quot;Error!&quot;)), 2000))\n]).catch(error =&gt; {\n  console.log(error.constructor.name); \/\/ AggregateError\n  console.log(error.errors[0]); \/\/ Error: Ouch!\n  console.log(error.errors[1]); \/\/ Error: Error!\n});\n<\/code><\/pre>\n<p>\u6b63\u5982\u4f60\u6240\u770b\u5230\u7684\uff0c\u6211\u4eec\u5728\u00a0<code>AggregateError<\/code>\u00a0\u9519\u8bef\u7c7b\u578b\u7684 error \u5b9e\u4f8b\u7684\u00a0<code>errors<\/code>\u00a0\u5c5e\u6027\u4e2d\u53ef\u4ee5\u8bbf\u95ee\u5230\u5931\u8d25\u7684 promise \u7684 error \u5bf9\u8c61\u3002<\/p>\n<h2>Promise.resolve\/reject<\/h2>\n<p>\u5728\u73b0\u4ee3\u7684\u4ee3\u7801\u4e2d\uff0c\u5f88\u5c11\u9700\u8981\u4f7f\u7528\u00a0<code>Promise.resolve<\/code>\u00a0\u548c\u00a0<code>Promise.reject<\/code>\u00a0\u65b9\u6cd5\uff0c\u56e0\u4e3a\u00a0<code>async\/await<\/code>\u00a0\u8bed\u6cd5\uff08\u6211\u4eec\u4f1a\u5728\u00a0<a href=\"https:\/\/zh.javascript.info\/async-await\">\u7a0d\u540e<\/a>\u00a0\u8bb2\u5230\uff09\u4f7f\u5b83\u4eec\u53d8\u5f97\u6709\u4e9b\u8fc7\u65f6\u4e86\u3002<br \/>\n\u5b8c\u6574\u8d77\u89c1\uff0c\u4ee5\u53ca\u8003\u8651\u5230\u90a3\u4e9b\u51fa\u4e8e\u67d0\u4e9b\u539f\u56e0\u800c\u65e0\u6cd5\u4f7f\u7528\u00a0<code>async\/await<\/code>\u00a0\u7684\u4eba\uff0c\u6211\u4eec\u5728\u8fd9\u91cc\u5bf9\u5b83\u4eec\u8fdb\u884c\u4ecb\u7ecd\u3002<\/p>\n<h3>Promise.resolve<\/h3>\n<p><code>Promise.resolve(value)<\/code>\u00a0\u7528\u7ed3\u679c\u00a0<code>value<\/code>\u00a0\u521b\u5efa\u4e00\u4e2a resolved \u7684 promise\u3002<\/p>\n<pre><code class=\"language-js\">let promise = new Promise(resolve =&gt; resolve(value));\n<\/code><\/pre>\n<p>\u5f53\u4e00\u4e2a\u51fd\u6570\u88ab\u671f\u671b\u8fd4\u56de\u4e00\u4e2a promise \u65f6\uff0c\u8fd9\u4e2a\u65b9\u6cd5\u7528\u4e8e\u517c\u5bb9\u6027\u3002\uff08\u8bd1\u6ce8\uff1a\u8fd9\u91cc\u7684\u517c\u5bb9\u6027\u662f\u6307\uff0c\u6211\u4eec\u76f4\u63a5\u4ece\u7f13\u5b58\u4e2d\u83b7\u53d6\u4e86\u5f53\u524d\u64cd\u4f5c\u7684\u7ed3\u679c\u00a0<code>value<\/code>\uff0c\u4f46\u662f\u671f\u671b\u8fd4\u56de\u7684\u662f\u4e00\u4e2a promise\uff0c\u6240\u4ee5\u53ef\u4ee5\u4f7f\u7528\u00a0<code>Promise.resolve(value)<\/code>\u00a0\u5c06\u00a0<code>value<\/code>\u00a0\u201c\u5c01\u88c5\u201d\u8fdb promise\uff0c\u4ee5\u6ee1\u8db3\u671f\u671b\u8fd4\u56de\u4e00\u4e2a promise \u7684\u8fd9\u4e2a\u9700\u6c42\u3002\uff09<br \/>\n\u4f8b\u5982\uff0c\u4e0b\u9762\u7684\u00a0<code>loadCached<\/code>\u00a0\u51fd\u6570\u83b7\u53d6\uff08fetch\uff09\u4e00\u4e2a URL \u5e76\u8bb0\u4f4f\u5176\u5185\u5bb9\u3002\u4ee5\u4fbf\u5c06\u6765\u5bf9\u4f7f\u7528\u76f8\u540c URL \u7684\u8c03\u7528\uff0c\u5b83\u80fd\u7acb\u5373\u4ece\u7f13\u5b58\u4e2d\u83b7\u53d6\u5148\u524d\u7684\u5185\u5bb9\uff0c\u4f46\u4f7f\u7528\u00a0<code>Promise.resolve<\/code>\u00a0\u521b\u5efa\u4e86\u4e00\u4e2a\u8be5\u5185\u5bb9\u7684 promise\uff0c\u6240\u4ee5\u8fd4\u56de\u7684\u503c\u59cb\u7ec8\u662f\u4e00\u4e2a promise\u3002<\/p>\n<pre><code class=\"language-js\">let cache = new Map();\n\nfunction loadCached(url) {\n  if (cache.has(url)) {\n    return Promise.resolve(cache.get(url)); \/\/ (*)\n  }\n\n  return fetch(url)\n    .then(response =&gt; response.text())\n    .then(text =&gt; {\n      cache.set(url,text);\n      return text;\n    });\n}\n<\/code><\/pre>\n<p>\u6211\u4eec\u53ef\u4ee5\u4f7f\u7528\u00a0<code>loadCached(url).then(\u2026)<\/code>\uff0c\u56e0\u4e3a\u8be5\u51fd\u6570\u4fdd\u8bc1\u4e86\u4f1a\u8fd4\u56de\u4e00\u4e2a promise\u3002\u6211\u4eec\u5c31\u53ef\u4ee5\u653e\u5fc3\u5730\u5728\u00a0<code>loadCached<\/code>\u00a0\u540e\u9762\u4f7f\u7528\u00a0<code>.then<\/code>\u3002\u8fd9\u5c31\u662f\u00a0<code>(*)<\/code>\u00a0\u884c\u4e2d\u00a0<code>Promise.resolve<\/code>\u00a0\u7684\u76ee\u7684\u3002<\/p>\n<h3>Promise.reject<\/h3>\n<p><code>Promise.reject(error)<\/code>\u00a0\u7528\u00a0<code>error<\/code>\u00a0\u521b\u5efa\u4e00\u4e2a rejected \u7684 promise\u3002<\/p>\n<pre><code class=\"language-js\">let promise = new Promise((resolve, reject) =&gt; reject(error));\n<\/code><\/pre>\n<p>\u5b9e\u9645\u4e0a\uff0c\u8fd9\u4e2a\u65b9\u6cd5\u51e0\u4e4e\u4ece\u672a\u88ab\u4f7f\u7528\u8fc7\u3002:--:(6)<\/p>\n<h1>Promisification<\/h1>\n<p>\u5bf9\u4e8e\u4e00\u4e2a\u7b80\u5355\u7684\u8f6c\u6362\u6765\u8bf4 \u201cPromisification\u201d \u662f\u4e00\u4e2a\u957f\u5355\u8bcd\u3002\u5b83\u6307\u5c06\u4e00\u4e2a\u63a5\u53d7\u56de\u8c03\u7684\u51fd\u6570\u8f6c\u6362\u4e3a\u4e00\u4e2a\u8fd4\u56de promise \u7684\u51fd\u6570\u3002<br \/>\n\u7531\u4e8e\u8bb8\u591a\u51fd\u6570\u548c\u5e93\u90fd\u662f\u57fa\u4e8e\u56de\u8c03\u7684\uff0c\u56e0\u6b64\uff0c\u5728\u5b9e\u9645\u5f00\u53d1\u4e2d\u7ecf\u5e38\u4f1a\u9700\u8981\u8fdb\u884c\u8fd9\u79cd\u8f6c\u6362\u3002\u56e0\u4e3a\u4f7f\u7528 promise \u66f4\u52a0\u65b9\u4fbf\uff0c\u6240\u4ee5\u5c06\u57fa\u4e8e\u56de\u8c03\u7684\u51fd\u6570\u548c\u5e93 promise \u5316\u662f\u6709\u610f\u4e49\u7684\u3002<br \/>\n\u4e3a\u4e86\u66f4\u597d\u5730\u7406\u89e3\uff0c\u8ba9\u6211\u4eec\u6765\u770b\u4e00\u4e2a\u4f8b\u5b50\u3002<br \/>\n\u4f8b\u5982\uff0c\u5728\u00a0<a href=\"https:\/\/zh.javascript.info\/callbacks\">\u7b80\u4ecb\uff1a\u56de\u8c03<\/a>\u00a0\u4e00\u7ae0\u4e2d\u6211\u4eec\u6709\u00a0<code>loadScript(src, callback)<\/code>\u3002<\/p>\n<pre><code class=\"language-js\">function loadScript(src, callback) {\n  let script = document.createElement('script');\n  script.src = src;\n\n  script.onload = () =&gt; callback(null, script);\n  script.onerror = () =&gt; callback(new Error(`Script load error for ${src}`));\n\n  document.head.append(script);\n}\n\n\/\/ \u7528\u6cd5\uff1a\n\/\/ loadScript('path\/script.js', (err, script) =&gt; {...})\n<\/code><\/pre>\n<p>\u8be5\u51fd\u6570\u901a\u8fc7\u7ed9\u5b9a\u7684\u00a0<code>src<\/code>\u00a0\u52a0\u8f7d\u811a\u672c\uff0c\u7136\u540e\u5728\u51fa\u73b0\u9519\u8bef\u65f6\u8c03\u7528\u00a0<code>callback(err)<\/code>\uff0c\u6216\u8005\u5728\u52a0\u8f7d\u6210\u529f\u65f6\u8c03\u7528\u00a0<code>callback(null, script)<\/code>\u3002\u8fd9\u662f\u5927\u5bb6\u5bf9\u4e8e\u4f7f\u7528\u56de\u8c03\u51fd\u6570\u7684\u5171\u8bc6\uff0c\u6211\u4eec\u4e4b\u524d\u4e5f\u5b66\u4e60\u8fc7\u3002<br \/>\n\u73b0\u5728\uff0c\u8ba9\u6211\u4eec\u5c06\u5176 promise \u5316\u5427\u3002<br \/>\n\u6211\u4eec\u5c06\u521b\u5efa\u4e00\u4e2a\u65b0\u7684\u51fd\u6570\u00a0<code>loadScriptPromise(src)<\/code>\uff0c\u4e0e\u4e0a\u9762\u7684\u51fd\u6570\u4f5c\u7528\u76f8\u540c\uff08\u52a0\u8f7d\u811a\u672c\uff09\uff0c\u53ea\u662f\u6211\u4eec\u521b\u5efa\u7684\u8fd9\u4e2a\u51fd\u6570\u4f1a\u8fd4\u56de\u4e00\u4e2a promise \u800c\u4e0d\u662f\u4f7f\u7528\u56de\u8c03\u3002<br \/>\n\u6362\u53e5\u8bdd\u8bf4\uff0c\u6211\u4eec\u4ec5\u5411\u5b83\u4f20\u5165\u00a0<code>src<\/code>\uff08\u6ca1\u6709\u00a0<code>callback<\/code>\uff09\u5e76\u901a\u8fc7\u8be5\u51fd\u6570\u7684 return \u83b7\u5f97\u4e00\u4e2a promise\uff0c\u5f53\u811a\u672c\u52a0\u8f7d\u6210\u529f\u65f6\uff0c\u8be5 promise \u5c06\u4ee5\u00a0<code>script<\/code>\u00a0\u4e3a\u7ed3\u679c resolve\uff0c\u5426\u5219\u5c06\u4ee5\u51fa\u73b0\u7684 error \u4e3a\u7ed3\u679c reject\u3002<br \/>\n\u4ee3\u7801\u5b9e\u73b0\u5982\u4e0b\uff1a<\/p>\n<pre><code class=\"language-js\">let loadScriptPromise = function(src) {\n  return new Promise((resolve, reject) =&gt; {\n    loadScript(src, (err, script) =&gt; {\n      if (err) reject(err);\n      else resolve(script);\n    });\n  });\n};\n\n\/\/ \u7528\u6cd5\uff1a\n\/\/ loadScriptPromise('path\/script.js').then(...)\n<\/code><\/pre>\n<p>\u6b63\u5982\u6211\u4eec\u6240\u770b\u5230\u7684\uff0c\u65b0\u7684\u51fd\u6570\u662f\u5bf9\u539f\u59cb\u7684\u00a0<code>loadScript<\/code>\u00a0\u51fd\u6570\u7684\u5305\u88c5\u3002\u65b0\u51fd\u6570\u8c03\u7528\u5b83\uff0c\u5e76\u63d0\u4f9b\u4e86\u81ea\u5df1\u7684\u56de\u8c03\u6765\u5c06\u5176\u8f6c\u6362\u6210 promise\u00a0<code>resolve\/reject<\/code>\u3002<br \/>\n\u73b0\u5728\u00a0<code>loadScriptPromise<\/code>\u00a0\u975e\u5e38\u9002\u7528\u4e8e\u57fa\u4e8e promise \u7684\u4ee3\u7801\u4e86\u3002\u5982\u679c\u6211\u4eec\u76f8\u6bd4\u4e8e\u56de\u8c03\u51fd\u6570\uff0c\u66f4\u559c\u6b22 promise\uff08\u7a0d\u540e\u6211\u4eec\u5c06\u770b\u5230\u66f4\u591a\u559c\u6b22 promise \u7684\u539f\u56e0\uff09\uff0c\u90a3\u4e48\u6211\u4eec\u5c06\u6539\u7528\u5b83\u3002<br \/>\n\u5728\u5b9e\u9645\u5f00\u53d1\u4e2d\uff0c\u6211\u4eec\u53ef\u80fd\u9700\u8981 promise \u5316\u5f88\u591a\u51fd\u6570\uff0c\u6240\u4ee5\u4f7f\u7528\u4e00\u4e2a helper\uff08\u8f85\u52a9\u51fd\u6570\uff09\u5f88\u6709\u610f\u4e49\u3002<br \/>\n\u6211\u4eec\u5c06\u5176\u79f0\u4e3a\u00a0<code>promisify(f)<\/code>\uff1a\u5b83\u63a5\u53d7\u4e00\u4e2a\u9700\u8981\u88ab promise \u5316\u7684\u51fd\u6570\u00a0<code>f<\/code>\uff0c\u5e76\u8fd4\u56de\u4e00\u4e2a\u5305\u88c5\uff08wrapper\uff09\u51fd\u6570\u3002<\/p>\n<pre><code class=\"language-js\">function promisify(f) {\n  return function (...args) { \/\/ \u8fd4\u56de\u4e00\u4e2a\u5305\u88c5\u51fd\u6570\uff08wrapper-function\uff09 (*)\n    return new Promise((resolve, reject) =&gt; {\n      function callback(err, result) { \/\/ \u6211\u4eec\u5bf9 f \u7684\u81ea\u5b9a\u4e49\u7684\u56de\u8c03 (**)\n        if (err) {\n          reject(err);\n        } else {\n          resolve(result);\n        }\n      }\n\n      args.push(callback); \/\/ \u5c06\u6211\u4eec\u7684\u81ea\u5b9a\u4e49\u7684\u56de\u8c03\u9644\u52a0\u5230 f \u53c2\u6570\uff08arguments\uff09\u7684\u672b\u5c3e\n\n      f.call(this, ...args); \/\/ \u8c03\u7528\u539f\u59cb\u7684\u51fd\u6570\n    });\n  };\n}\n\n\/\/ \u7528\u6cd5\uff1a\nlet loadScriptPromise = promisify(loadScript);\nloadScriptPromise(...).then(...);\n<\/code><\/pre>\n<p>\u4ee3\u7801\u770b\u8d77\u6765\u53ef\u80fd\u6709\u4e9b\u590d\u6742\uff0c\u4f46\u5176\u672c\u8d28\u4e0e\u6211\u4eec\u5728\u4e0a\u9762\u5199\u7684\u90a3\u4e2a\u662f\u4e00\u6837\u7684\uff0c\u5c31\u662f\u5c06\u00a0<code>loadScript<\/code>\u00a0\u51fd\u6570 promise \u5316\u3002<br \/>\n\u8c03\u7528\u00a0<code>promisify(f)<\/code>\u00a0\u4f1a\u8fd4\u56de\u4e00\u4e2a\u00a0<code>f<\/code>\u00a0<code>(*)<\/code>\u00a0\u7684\u5305\u88c5\u5668\u3002\u8be5\u5305\u88c5\u5668\u8fd4\u56de\u4e00\u4e2a promise\uff0c\u5e76\u5c06\u8c03\u7528\u8f6c\u53d1\u7ed9\u539f\u59cb\u7684\u00a0<code>f<\/code>\uff0c\u5e76\u5728\u6211\u4eec\u81ea\u5b9a\u4e49\u7684\u56de\u8c03\u00a0<code>(**)<\/code>\u00a0\u4e2d\u8ddf\u8e2a\u7ed3\u679c\u3002<br \/>\n\u5728\u8fd9\u91cc\uff0c<code>promisify<\/code>\u00a0\u5047\u8bbe\u539f\u59cb\u51fd\u6570\u671f\u671b\u4e00\u4e2a\u5e26\u6709\u4e24\u4e2a\u53c2\u6570\u00a0<code>(err, result)<\/code>\u00a0\u7684\u56de\u8c03\u3002\u8fd9\u5c31\u662f\u6211\u4eec\u6700\u5e38\u9047\u5230\u7684\u5f62\u5f0f\u3002\u90a3\u4e48\u6211\u4eec\u81ea\u5b9a\u4e49\u7684\u56de\u8c03\u7684\u683c\u5f0f\u662f\u5b8c\u5168\u6b63\u786e\u7684\uff0c\u5728\u8fd9\u79cd\u60c5\u51b5\u4e0b\u00a0<code>promisify<\/code>\u00a0\u4e5f\u53ef\u4ee5\u5b8c\u7f8e\u5730\u8fd0\u884c\u3002<br \/>\n\u4f46\u662f\u5982\u679c\u539f\u59cb\u7684\u00a0<code>f<\/code>\u00a0\u671f\u671b\u4e00\u4e2a\u5e26\u6709\u66f4\u591a\u53c2\u6570\u7684\u56de\u8c03\u00a0<code>callback(err, res1, res2, ...)<\/code>\uff0c\u8be5\u600e\u4e48\u529e\u5462\uff1f<br \/>\n\u6211\u4eec\u53ef\u4ee5\u7ee7\u7eed\u6539\u8fdb\u6211\u4eec\u7684\u8f85\u52a9\u51fd\u6570\u3002\u8ba9\u6211\u4eec\u5199\u4e00\u4e2a\u66f4\u9ad8\u9636\u7248\u672c\u7684\u00a0<code>promisify<\/code>\u3002<\/p>\n<ul>\n<li>\u5f53\u5b83\u88ab\u4ee5\u00a0<code>promisify(f)<\/code>\u00a0\u7684\u5f62\u5f0f\u8c03\u7528\u65f6\uff0c\u5b83\u5e94\u8be5\u4ee5\u4e0e\u4e0a\u9762\u90a3\u4e2a\u7248\u672c\u7684\u5b9e\u73b0\u7684\u5de5\u4f5c\u65b9\u5f0f\u7c7b\u4f3c\u3002<\/li>\n<li>\u5f53\u5b83\u88ab\u4ee5\u00a0<code>promisify(f, true)<\/code>\u00a0\u7684\u5f62\u5f0f\u8c03\u7528\u65f6\uff0c\u5b83\u5e94\u8be5\u8fd4\u56de\u4ee5\u56de\u8c03\u51fd\u6570\u6570\u7ec4\u4e3a\u7ed3\u679c resolve \u7684 promise\u3002\u8fd9\u5c31\u662f\u5177\u6709\u5f88\u591a\u4e2a\u53c2\u6570\u7684\u56de\u8c03\u7684\u7ed3\u679c\u3002<\/li>\n<\/ul>\n<pre><code class=\"language-js\">\/\/ promisify(f, true) \u6765\u83b7\u53d6\u7ed3\u679c\u6570\u7ec4\nfunction promisify(f, manyArgs = false) {\n  return function (...args) {\n    return new Promise((resolve, reject) =&gt; {\n      function callback(err, ...results) { \/\/ \u6211\u4eec\u81ea\u5b9a\u4e49\u7684 f \u7684\u56de\u8c03\n        if (err) {\n          reject(err);\n        } else {\n          \/\/ \u5982\u679c manyArgs \u88ab\u6307\u5b9a\uff0c\u5219\u4f7f\u7528\u6240\u6709\u56de\u8c03\u7684\u7ed3\u679c resolve\n          resolve(manyArgs ? results : results[0]);\n        }\n      }\n\n      args.push(callback);\n\n      f.call(this, ...args);\n    });\n  };\n}\n\n\/\/ \u7528\u6cd5\uff1a\nf = promisify(f, true);\nf(...).then(arrayOfResults =&gt; ..., err =&gt; ...);\n<\/code><\/pre>\n<p>\u6b63\u5982\u4f60\u6240\u770b\u5230\u7684\uff0c\u5b83\u4e0e\u4e0a\u9762\u90a3\u4e2a\u5b9e\u73b0\u57fa\u672c\u76f8\u540c\uff0c\u53ea\u662f\u6839\u636e\u00a0<code>manyArgs<\/code>\u00a0\u662f\u5426\u4e3a\u771f\u6765\u51b3\u5b9a\u4ec5\u4f7f\u7528\u4e00\u4e2a\u8fd8\u662f\u6240\u6709\u53c2\u6570\u8c03\u7528\u00a0<code>resolve<\/code>\u3002<br \/>\n\u5bf9\u4e8e\u4e00\u4e9b\u66f4\u5947\u7279\u7684\u56de\u8c03\u683c\u5f0f\uff0c\u4f8b\u5982\u6839\u672c\u6ca1\u6709\u00a0<code>err<\/code>\u00a0\u7684\u683c\u5f0f\uff1a<code>callback(result)<\/code>\uff0c\u6211\u4eec\u53ef\u4ee5\u624b\u52a8 promise \u5316\u8fd9\u6837\u7684\u51fd\u6570\uff0c\u800c\u4e0d\u4f7f\u7528 helper\u3002<br \/>\n\u4e5f\u6709\u4e00\u4e9b\u5177\u6709\u66f4\u7075\u6d3b\u4e00\u70b9\u7684 promisification \u51fd\u6570\u7684\u6a21\u5757\uff08module\uff09\uff0c\u4f8b\u5982\u00a0<a href=\"https:\/\/github.com\/digitaldesignlabs\/es6-promisify\">es6-promisify<\/a>\u3002\u5728 Node.js \u4e2d\uff0c\u6709\u4e00\u4e2a\u5185\u5efa\u7684 promise \u5316\u51fd\u6570\u00a0<code>util.promisify<\/code>\u3002<\/p>\n<blockquote>\n<p>\u8bf7\u6ce8\u610f\uff1a<br \/>\nPromisification \u662f\u4e00\u79cd\u5f88\u597d\u7684\u65b9\u6cd5\uff0c\u7279\u522b\u662f\u5728\u4f60\u4f7f\u7528\u00a0<code>async\/await<\/code>\u00a0\u7684\u65f6\u5019\uff08\u8bf7\u770b\u4e0b\u4e00\u7ae0\uff09\uff0c\u4f46\u4e0d\u662f\u56de\u8c03\u7684\u5b8c\u5168\u66ff\u4ee3\u3002<br \/>\n\u8bf7\u8bb0\u4f4f\uff0c\u4e00\u4e2a promise \u53ef\u80fd\u53ea\u6709\u4e00\u4e2a\u7ed3\u679c\uff0c\u4f46\u4ece\u6280\u672f\u4e0a\u8bb2\uff0c\u4e00\u4e2a\u56de\u8c03\u53ef\u80fd\u88ab\u8c03\u7528\u5f88\u591a\u6b21\u3002<br \/>\n\u56e0\u6b64\uff0cpromisification \u4ec5\u9002\u7528\u4e8e\u8c03\u7528\u4e00\u6b21\u56de\u8c03\u7684\u51fd\u6570\u3002\u8fdb\u4e00\u6b65\u7684\u8c03\u7528\u5c06\u88ab\u5ffd\u7565\u3002<\/p>\n<\/blockquote>\n<h1>\u5fae\u4efb\u52a1 Microtask<\/h1>\n<p>promise \u7684\u5904\u7406\u7a0b\u5e8f\u00a0<code>.then<\/code>\u3001<code>.catch<\/code>\u00a0\u548c\u00a0<code>.finally<\/code>\u00a0\u90fd\u662f\u5f02\u6b65\u7684\u3002<br \/>\n\u5373\u4fbf\u4e00\u4e2a promise \u7acb\u5373\u88ab resolve\uff0c<code>.then<\/code>\u3001<code>.catch<\/code>\u00a0\u548c\u00a0<code>.finally<\/code>\u00a0<strong>\u4e0b\u9762<\/strong>\u00a0\u7684\u4ee3\u7801\u4e5f\u4f1a\u5728\u8fd9\u4e9b\u5904\u7406\u7a0b\u5e8f\u4e4b\u524d\u88ab\u6267\u884c\u3002<br \/>\n\u793a\u4f8b\u4ee3\u7801\u5982\u4e0b\uff1a<\/p>\n<pre><code class=\"language-js\">let promise = Promise.resolve();\n\npromise.then(() =&gt; alert(&quot;promise done!&quot;));\n\nalert(&quot;code finished&quot;); \/\/ \u8fd9\u4e2a alert \u5148\u663e\u793a\n<\/code><\/pre>\n<p>\u5982\u679c\u4f60\u8fd0\u884c\u5b83\uff0c\u4f60\u4f1a\u9996\u5148\u770b\u5230\u00a0<code>code finished<\/code>\uff0c\u7136\u540e\u624d\u662f\u00a0<code>promise done<\/code>\u3002<br \/>\n\u8fd9\u5f88\u5947\u602a\uff0c\u56e0\u4e3a\u8fd9\u4e2a promise \u80af\u5b9a\u662f\u4e00\u5f00\u59cb\u5c31\u5b8c\u6210\u7684\u3002<br \/>\n\u4e3a\u4ec0\u4e48\u00a0<code>.then<\/code>\u00a0\u4f1a\u5728\u4e4b\u540e\u624d\u88ab\u89e6\u53d1\uff1f\u8fd9\u662f\u600e\u4e48\u56de\u4e8b\uff1f<\/p>\n<h2>\u5fae\u4efb\u52a1\u961f\u5217 Microtask queue<\/h2>\n<p>\u5f02\u6b65\u4efb\u52a1\u9700\u8981\u9002\u5f53\u7684\u7ba1\u7406\u3002\u4e3a\u6b64\uff0cECMA \u6807\u51c6\u89c4\u5b9a\u4e86\u4e00\u4e2a\u5185\u90e8\u961f\u5217\u00a0<code>PromiseJobs<\/code>\uff0c\u901a\u5e38\u88ab\u79f0\u4e3a\u201c\u5fae\u4efb\u52a1\u961f\u5217\uff08microtask queue\uff09\u201d\uff08V8 \u672f\u8bed\uff09\u3002<br \/>\n\u5982\u00a0<a href=\"https:\/\/tc39.github.io\/ecma262\/#sec-jobs-and-job-queues\">\u89c4\u8303<\/a>\u00a0\u4e2d\u6240\u8ff0\uff1a<\/p>\n<ul>\n<li>\u961f\u5217\uff08queue\uff09\u662f\u5148\u8fdb\u5148\u51fa\u7684\uff1a\u9996\u5148\u8fdb\u5165\u961f\u5217\u7684\u4efb\u52a1\u4f1a\u9996\u5148\u8fd0\u884c\u3002<\/li>\n<li>\u53ea\u6709\u5728 JavaScript \u5f15\u64ce\u4e2d\u6ca1\u6709\u5176\u5b83\u4efb\u52a1\u5728\u8fd0\u884c\u65f6\uff0c\u624d\u5f00\u59cb\u6267\u884c\u4efb\u52a1\u961f\u5217\u4e2d\u7684\u4efb\u52a1\u3002<br \/>\n\u6216\u8005\uff0c\u7b80\u5355\u5730\u8bf4\uff0c\u5f53\u4e00\u4e2a promise \u51c6\u5907\u5c31\u7eea\u65f6\uff0c\u5b83\u7684\u00a0<code>.then\/catch\/finally<\/code>\u00a0\u5904\u7406\u7a0b\u5e8f\u5c31\u4f1a\u88ab\u653e\u5165\u961f\u5217\u4e2d\uff1a\u4f46\u662f\u5b83\u4eec\u4e0d\u4f1a\u7acb\u5373\u88ab\u6267\u884c\u3002\u5f53 JavaScript \u5f15\u64ce\u6267\u884c\u5b8c\u5f53\u524d\u7684\u4ee3\u7801\uff0c\u5b83\u4f1a\u4ece\u961f\u5217\u4e2d\u83b7\u53d6\u4efb\u52a1\u5e76\u6267\u884c\u5b83\u3002<br \/>\n\u8fd9\u5c31\u662f\u4e3a\u4ec0\u4e48\u5728\u4e0a\u9762\u90a3\u4e2a\u793a\u4f8b\u4e2d \u201ccode finished\u201d \u4f1a\u5148\u663e\u793a\u3002<br \/>\npromise \u7684\u5904\u7406\u7a0b\u5e8f\u603b\u662f\u4f1a\u7ecf\u8fc7\u8fd9\u4e2a\u5185\u90e8\u961f\u5217\u3002<br \/>\n\u5982\u679c\u6709\u4e00\u4e2a\u5305\u542b\u591a\u4e2a\u00a0<code>.then\/catch\/finally<\/code>\u00a0\u7684\u94fe\uff0c\u90a3\u4e48\u5b83\u4eec\u4e2d\u7684\u6bcf\u4e00\u4e2a\u90fd\u662f\u5f02\u6b65\u6267\u884c\u7684\u3002\u4e5f\u5c31\u662f\u8bf4\uff0c\u5b83\u4f1a\u9996\u5148\u8fdb\u5165\u961f\u5217\uff0c\u7136\u540e\u5728\u5f53\u524d\u4ee3\u7801\u6267\u884c\u5b8c\u6210\u5e76\u4e14\u5148\u524d\u6392\u961f\u7684\u5904\u7406\u7a0b\u5e8f\u90fd\u5b8c\u6210\u65f6\u624d\u4f1a\u88ab\u6267\u884c\u3002<br \/>\n<strong>\u5982\u679c\u6267\u884c\u987a\u5e8f\u5bf9\u6211\u4eec\u5f88\u91cd\u8981\u8be5\u600e\u4e48\u529e\uff1f\u6211\u4eec\u600e\u4e48\u624d\u80fd\u8ba9\u00a0<code>code finished<\/code>\u00a0\u5728\u00a0<code>promise done<\/code>\u00a0\u4e4b\u540e\u51fa\u73b0\u5462\uff1f<\/strong><br \/>\n\u5f88\u7b80\u5355\uff0c\u53ea\u9700\u8981\u50cf\u4e0b\u9762\u8fd9\u6837\u4f7f\u7528\u00a0<code>.then<\/code>\u00a0\u5c06\u5176\u653e\u5165\u961f\u5217\uff1a<\/li>\n<\/ul>\n<pre><code class=\"language-js\">Promise.resolve()\n  .then(() =&gt; alert(&quot;promise done!&quot;))\n  .then(() =&gt; alert(&quot;code finished&quot;));\n<\/code><\/pre>\n<h2>\u672a\u5904\u7406\u7684 rejection<\/h2>\n<p>\u8fd8\u8bb0\u5f97\u00a0<a href=\"https:\/\/zh.javascript.info\/promise-error-handling\">\u4f7f\u7528 promise \u8fdb\u884c\u9519\u8bef\u5904\u7406<\/a>\u00a0\u4e00\u7ae0\u4e2d\u7684\u00a0<code>unhandledrejection<\/code>\u00a0\u4e8b\u4ef6\u5417\uff1f<br \/>\n\u73b0\u5728\uff0c\u6211\u4eec\u53ef\u4ee5\u786e\u5207\u5730\u770b\u5230 JavaScript \u662f\u5982\u4f55\u53d1\u73b0\u672a\u5904\u7406\u7684 rejection \u7684\u3002<br \/>\n<strong>\u5982\u679c\u4e00\u4e2a promise \u7684 error \u672a\u88ab\u5728\u5fae\u4efb\u52a1\u961f\u5217\u7684\u672b\u5c3e\u8fdb\u884c\u5904\u7406\uff0c\u5219\u4f1a\u51fa\u73b0\u201c\u672a\u5904\u7406\u7684 rejection\u201d\u3002<\/strong><br \/>\n\u6b63\u5e38\u6765\u8bf4\uff0c\u5982\u679c\u6211\u4eec\u9884\u671f\u53ef\u80fd\u4f1a\u53d1\u751f\u9519\u8bef\uff0c\u6211\u4eec\u4f1a\u5728 promise \u94fe\u4e0a\u6dfb\u52a0\u00a0<code>.catch<\/code>\u00a0\u6765\u5904\u7406 error\uff1a<\/p>\n<pre><code class=\"language-js\">let promise = Promise.reject(new Error(&quot;Promise Failed!&quot;));\npromise.catch(err =&gt; alert('caught'));\n\n\/\/ \u4e0d\u4f1a\u8fd0\u884c\uff1aerror \u5df2\u7ecf\u88ab\u5904\u7406\nwindow.addEventListener('unhandledrejection', event =&gt; alert(event.reason));\n<\/code><\/pre>\n<p>\u4f46\u662f\u5982\u679c\u6211\u4eec\u5fd8\u8bb0\u6dfb\u52a0\u00a0<code>.catch<\/code>\uff0c\u90a3\u4e48\uff0c\u5fae\u4efb\u52a1\u961f\u5217\u6e05\u7a7a\u540e\uff0cJavaScript \u5f15\u64ce\u4f1a\u89e6\u53d1\u4e0b\u9762\u8fd9\u4e8b\u4ef6\uff1a<\/p>\n<pre><code class=\"language-js\">let promise = Promise.reject(new Error(&quot;Promise Failed!&quot;));\n\n\/\/ Promise Failed!\nwindow.addEventListener('unhandledrejection', event =&gt; alert(event.reason));\n<\/code><\/pre>\n<p>\u5982\u679c\u6211\u4eec\u8fdf\u4e00\u70b9\u518d\u5904\u7406\u8fd9\u4e2a error \u4f1a\u600e\u6837\uff1f\u4f8b\u5982\uff1a<\/p>\n<pre><code class=\"language-js\">let promise = Promise.reject(new Error(&quot;Promise Failed!&quot;));\nsetTimeout(() =&gt; promise.catch(err =&gt; alert('caught')), 1000);\n\n\/\/ Error: Promise Failed!\nwindow.addEventListener('unhandledrejection', event =&gt; alert(event.reason));\n<\/code><\/pre>\n<p>\u73b0\u5728\uff0c\u5982\u679c\u6211\u4eec\u8fd0\u884c\u4e0a\u9762\u8fd9\u6bb5\u4ee3\u7801\uff0c\u6211\u4eec\u4f1a\u5148\u770b\u5230\u00a0<code>Promise Failed!<\/code>\uff0c\u7136\u540e\u624d\u662f\u00a0<code>caught<\/code>\u3002<br \/>\n\u5982\u679c\u6211\u4eec\u5e76\u4e0d\u4e86\u89e3\u5fae\u4efb\u52a1\u961f\u5217\uff0c\u6211\u4eec\u53ef\u80fd\u4f1a\u60f3\uff1a\u201c\u4e3a\u4ec0\u4e48\u00a0<code>unhandledrejection<\/code>\u00a0\u5904\u7406\u7a0b\u5e8f\u4f1a\u8fd0\u884c\uff1f\u6211\u4eec\u5df2\u7ecf\u6355\u83b7\uff08catch\uff09\u5e76\u5904\u7406\u4e86 error\uff01\u201d<br \/>\n\u4f46\u662f\u73b0\u5728\u6211\u4eec\u77e5\u9053\u4e86\uff0c\u5f53\u5fae\u4efb\u52a1\u961f\u5217\u4e2d\u7684\u4efb\u52a1\u90fd\u5b8c\u6210\u65f6\uff0c\u624d\u4f1a\u751f\u6210\u00a0<code>unhandledrejection<\/code>\uff1a\u5f15\u64ce\u4f1a\u68c0\u67e5 promise\uff0c\u5982\u679c promise \u4e2d\u7684\u4efb\u610f\u4e00\u4e2a\u51fa\u73b0 \u201crejected\u201d \u72b6\u6001\uff0c<code>unhandledrejection<\/code>\u00a0\u4e8b\u4ef6\u5c31\u4f1a\u88ab\u89e6\u53d1\u3002<br \/>\n\u5728\u4e0a\u9762\u8fd9\u4e2a\u4f8b\u5b50\u4e2d\uff0c\u88ab\u6dfb\u52a0\u5230\u00a0<code>setTimeout<\/code>\u00a0\u4e2d\u7684\u00a0<code>.catch<\/code>\u00a0\u4e5f\u4f1a\u88ab\u89e6\u53d1\u3002\u53ea\u662f\u4f1a\u5728\u00a0<code>unhandledrejection<\/code>\u00a0\u4e8b\u4ef6\u51fa\u73b0\u4e4b\u540e\u624d\u4f1a\u88ab\u89e6\u53d1\uff0c\u6240\u4ee5\u5b83\u5e76\u6ca1\u6709\u6539\u53d8\u4ec0\u4e48\uff08\u6ca1\u6709\u53d1\u6325\u4f5c\u7528\uff09\u3002<\/p>\n<h1>async\/await<\/h1>\n<p>async\/await \u662f\u4ee5\u66f4\u8212\u9002\u7684\u65b9\u5f0f\u4f7f\u7528 promise \u7684\u4e00\u79cd\u7279\u6b8a\u8bed\u6cd5\uff0c\u540c\u65f6\u5b83\u4e5f\u975e\u5e38\u6613\u4e8e\u7406\u89e3\u548c\u4f7f\u7528\u3002<\/p>\n<h2>async function<\/h2>\n<p>\u8ba9\u6211\u4eec\u4ee5\u00a0<code>async<\/code>\u00a0\u8fd9\u4e2a\u5173\u952e\u5b57\u5f00\u59cb\u3002\u5b83\u53ef\u4ee5\u88ab\u653e\u7f6e\u5728\u4e00\u4e2a\u51fd\u6570\u524d\u9762\uff0c\u5982\u4e0b\u6240\u793a\uff1a<\/p>\n<pre><code class=\"language-js\">async function f() {\n  return 1;\n}\n<\/code><\/pre>\n<p>\u5728\u51fd\u6570\u524d\u9762\u7684 \u201casync\u201d \u8fd9\u4e2a\u5355\u8bcd\u8868\u8fbe\u4e86\u4e00\u4e2a\u7b80\u5355\u7684\u4e8b\u60c5\uff1a\u5373\u8fd9\u4e2a\u51fd\u6570\u603b\u662f\u8fd4\u56de\u4e00\u4e2a promise\u3002\u5176\u4ed6\u503c\u5c06\u81ea\u52a8\u88ab\u5305\u88c5\u5728\u4e00\u4e2a resolved \u7684 promise \u4e2d\u3002<br \/>\n\u4f8b\u5982\uff0c\u4e0b\u9762\u8fd9\u4e2a\u51fd\u6570\u8fd4\u56de\u4e00\u4e2a\u7ed3\u679c\u4e3a\u00a0<code>1<\/code>\u00a0\u7684 resolved promise\uff0c\u8ba9\u6211\u4eec\u6d4b\u8bd5\u4e00\u4e0b\uff1a<\/p>\n<pre><code class=\"language-js\">async function f() {\n  return 1;\n}\n\nf().then(alert); \/\/ 1\n<\/code><\/pre>\n<p>\u2026\u2026\u6211\u4eec\u4e5f\u53ef\u4ee5\u663e\u5f0f\u5730\u8fd4\u56de\u4e00\u4e2a promise\uff0c\u7ed3\u679c\u662f\u4e00\u6837\u7684\uff1a<\/p>\n<pre><code class=\"language-js\">async function f() {\n  return Promise.resolve(1);\n}\n\nf().then(alert); \/\/ 1\n<\/code><\/pre>\n<p>\u6240\u4ee5\u8bf4\uff0c<code>async<\/code>\u00a0\u786e\u4fdd\u4e86\u51fd\u6570\u8fd4\u56de\u4e00\u4e2a promise\uff0c\u4e5f\u4f1a\u5c06\u975e promise \u7684\u503c\u5305\u88c5\u8fdb\u53bb\u3002\u5f88\u7b80\u5355\uff0c\u5bf9\u5427\uff1f\u4f46\u4e0d\u4ec5\u4ec5\u8fd9\u4e9b\u3002\u8fd8\u6709\u53e6\u5916\u4e00\u4e2a\u53eb\u00a0<code>await<\/code>\u00a0\u7684\u5173\u952e\u8bcd\uff0c\u5b83\u53ea\u5728\u00a0<code>async<\/code>\u00a0\u51fd\u6570\u5185\u5de5\u4f5c\uff0c\u4e5f\u975e\u5e38\u9177\u3002<\/p>\n<h2>await<\/h2>\n<p>\u8bed\u6cd5<\/p>\n<pre><code class=\"language-js\">\/\/ \u53ea\u5728 async \u51fd\u6570\u5185\u5de5\u4f5c\nlet value = await promise;\n<\/code><\/pre>\n<p>\u5173\u952e\u5b57\u00a0<code>await<\/code>\u00a0\u8ba9 JavaScript \u5f15\u64ce\u7b49\u5f85\u76f4\u5230 promise \u5b8c\u6210\uff08settle\uff09\u5e76\u8fd4\u56de\u7ed3\u679c\u3002<br \/>\n\u8fd9\u91cc\u7684\u4f8b\u5b50\u5c31\u662f\u4e00\u4e2a 1 \u79d2\u540e resolve \u7684 promise\uff1a<\/p>\n<pre><code class=\"language-js\">async function f() {\n\n  let promise = new Promise((resolve, reject) =&gt; {\n    setTimeout(() =&gt; resolve(&quot;done!&quot;), 1000)\n  });\n\n  let result = await promise; \/\/ \u7b49\u5f85\uff0c\u76f4\u5230 promise resolve (*)\n\n  alert(result); \/\/ &quot;done!&quot;\n}\n\nf();\n<\/code><\/pre>\n<p>\u8fd9\u4e2a\u51fd\u6570\u5728\u6267\u884c\u7684\u65f6\u5019\uff0c\u201c\u6682\u505c\u201d\u5728\u4e86\u00a0<code>(*)<\/code>\u00a0\u90a3\u4e00\u884c\uff0c\u5e76\u5728 promise settle \u65f6\uff0c\u62ff\u5230\u00a0<code>result<\/code>\u00a0\u4f5c\u4e3a\u7ed3\u679c\u7ee7\u7eed\u5f80\u4e0b\u6267\u884c\u3002\u6240\u4ee5\u4e0a\u9762\u8fd9\u6bb5\u4ee3\u7801\u5728\u4e00\u79d2\u540e\u663e\u793a \u201cdone!\u201d\u3002<br \/>\n\u8ba9\u6211\u4eec\u5f3a\u8c03\u4e00\u4e0b\uff1a<code>await<\/code>\u00a0\u5b9e\u9645\u4e0a\u4f1a\u6682\u505c\u51fd\u6570\u7684\u6267\u884c\uff0c\u76f4\u5230 promise \u72b6\u6001\u53d8\u4e3a settled\uff0c\u7136\u540e\u4ee5 promise \u7684\u7ed3\u679c\u7ee7\u7eed\u6267\u884c\u3002\u8fd9\u4e2a\u884c\u4e3a\u4e0d\u4f1a\u8017\u8d39\u4efb\u4f55 CPU \u8d44\u6e90\uff0c\u56e0\u4e3a JavaScript \u5f15\u64ce\u53ef\u4ee5\u540c\u65f6\u5904\u7406\u5176\u4ed6\u4efb\u52a1\uff1a\u6267\u884c\u5176\u4ed6\u811a\u672c\uff0c\u5904\u7406\u4e8b\u4ef6\u7b49\u3002<br \/>\n\u76f8\u6bd4\u4e8e\u00a0<code>promise.then<\/code>\uff0c\u5b83\u53ea\u662f\u83b7\u53d6 promise \u7684\u7ed3\u679c\u7684\u4e00\u4e2a\u66f4\u4f18\u96c5\u7684\u8bed\u6cd5\u3002\u5e76\u4e14\u4e5f\u66f4\u6613\u4e8e\u8bfb\u5199\u3002<\/p>\n<blockquote>\n<p>\u4e0d\u80fd\u5728\u666e\u901a\u51fd\u6570\u4e2d\u4f7f\u7528\u00a0<code>await<\/code><br \/>\n\u5982\u679c\u6211\u4eec\u5c1d\u8bd5\u5728\u975e async \u51fd\u6570\u4e2d\u4f7f\u7528\u00a0<code>await<\/code>\uff0c\u5219\u4f1a\u62a5\u8bed\u6cd5\u9519\u8bef\uff1a<\/p>\n<\/blockquote>\n<pre><code class=\"language-js\">function f() {\n  let promise = Promise.resolve(1);\n  let result = await promise; \/\/ Syntax error\n}\n<\/code><\/pre>\n<blockquote>\n<p>\u5982\u679c\u6211\u4eec\u5fd8\u8bb0\u5728\u51fd\u6570\u524d\u9762\u5199\u00a0<code>async<\/code>\u00a0\u5173\u952e\u5b57\uff0c\u6211\u4eec\u53ef\u80fd\u4f1a\u5f97\u5230\u4e00\u4e2a\u8fd9\u4e2a\u9519\u8bef\u3002\u5c31\u50cf\u524d\u9762\u8bf4\u7684\uff0c<code>await<\/code>\u00a0\u53ea\u5728\u00a0<code>async<\/code>\u00a0\u51fd\u6570\u4e2d\u6709\u6548\u3002<\/p>\n<\/blockquote>\n<p>\u8ba9\u6211\u4eec\u62ff\u00a0<a href=\"https:\/\/zh.javascript.info\/promise-chaining\">Promise \u94fe<\/a>\u00a0\u90a3\u4e00\u7ae0\u7684\u00a0<code>showAvatar()<\/code>\u00a0\u4f8b\u5b50\uff0c\u5e76\u5c06\u5176\u6539\u5199\u6210\u00a0<code>async\/await<\/code>\u00a0\u7684\u5f62\u5f0f\uff1a<\/p>\n<ol>\n<li>\u6211\u4eec\u9700\u8981\u7528\u00a0<code>await<\/code>\u00a0\u66ff\u6362\u6389\u00a0<code>.then<\/code>\u00a0\u7684\u8c03\u7528\u3002<\/li>\n<li>\u53e6\u5916\uff0c\u6211\u4eec\u9700\u8981\u5728\u51fd\u6570\u524d\u9762\u52a0\u4e0a\u00a0<code>async<\/code>\u00a0\u5173\u952e\u5b57\uff0c\u4ee5\u4f7f\u5b83\u4eec\u80fd\u5de5\u4f5c\u3002<\/li>\n<\/ol>\n<pre><code class=\"language-js\">async function showAvatar() {\n\n  \/\/ \u8bfb\u53d6\u6211\u4eec\u7684 JSON\n  let response = await fetch('\/article\/promise-chaining\/user.json');\n  let user = await response.json();\n\n  \/\/ \u8bfb\u53d6 github \u7528\u6237\u4fe1\u606f\n  let githubResponse = await fetch(`https:\/\/api.github.com\/users\/${user.name}`);\n  let githubUser = await githubResponse.json();\n\n  \/\/ \u663e\u793a\u5934\u50cf\n  let img = document.createElement('img');\n  img.src = githubUser.avatar_url;\n  img.className = &quot;promise-avatar-example&quot;;\n  document.body.append(img);\n\n  \/\/ \u7b49\u5f85 3 \u79d2\n  await new Promise((resolve, reject) =&gt; setTimeout(resolve, 3000));\n\n  img.remove();\n\n  return githubUser;\n}\n\nshowAvatar();\n<\/code><\/pre>\n<p>\u7b80\u6d01\u660e\u4e86\uff0c\u662f\u5427\uff1f\u6bd4\u4e4b\u524d\u53ef\u5f3a\u591a\u4e86\u3002<\/p>\n<blockquote>\n<p>\u73b0\u4ee3\u6d4f\u89c8\u5668\u5728 modules \u91cc\u5141\u8bb8\u9876\u5c42\u7684\u00a0<code>await<\/code><br \/>\n\u5728\u73b0\u4ee3\u6d4f\u89c8\u5668\u4e2d\uff0c\u5f53\u6211\u4eec\u5904\u4e8e\u4e00\u4e2a module \u4e2d\u65f6\uff0c\u90a3\u4e48\u5728\u9876\u5c42\u4f7f\u7528\u00a0<code>await<\/code>\u00a0\u4e5f\u662f\u88ab\u5141\u8bb8\u7684\u3002\u6211\u4eec\u5c06\u5728\u00a0<a href=\"https:\/\/zh.javascript.info\/modules-intro\">\u6a21\u5757 (Module) \u7b80\u4ecb<\/a>\u00a0\u4e2d\u8be6\u7ec6\u5b66\u4e60 modules\u3002<br \/>\n\u4f8b\u5982\uff1a<\/p>\n<\/blockquote>\n<pre><code class=\"language-js\">\/\/ \u6211\u4eec\u5047\u8bbe\u6b64\u4ee3\u7801\u5728 module \u4e2d\u7684\u9876\u5c42\u8fd0\u884c\nlet response = await fetch('\/article\/promise-chaining\/user.json');\nlet user = await response.json();\n\nconsole.log(user);\n<\/code><\/pre>\n<blockquote>\n<p>\u5982\u679c\u6211\u4eec\u6ca1\u6709\u4f7f\u7528 modules\uff0c\u6216\u8005\u5fc5\u987b\u517c\u5bb9\u00a0<a href=\"https:\/\/caniuse.com\/mdn-javascript_operators_await_top_level\">\u65e7\u7248\u672c\u6d4f\u89c8\u5668<\/a>\u00a0\uff0c\u90a3\u4e48\u8fd9\u513f\u8fd8\u6709\u4e00\u4e2a\u901a\u7528\u7684\u65b9\u6cd5\uff1a\u5305\u88c5\u5230\u533f\u540d\u7684\u5f02\u6b65\u51fd\u6570\u4e2d\u3002<br \/>\n\u50cf\u8fd9\u6837\uff1a<\/p>\n<\/blockquote>\n<pre><code class=\"language-js\">(async () =&gt; {\n  let response = await fetch('\/article\/promise-chaining\/user.json');\n  let user = await response.json();\n  ...\n})();\n<\/code><\/pre>\n<blockquote>\n<p><code>await<\/code>\u00a0\u63a5\u53d7 \u201cthenables\u201d<br \/>\n\u50cf\u00a0<code>promise.then<\/code>\u00a0\u90a3\u6837\uff0c<code>await<\/code>\u00a0\u5141\u8bb8\u6211\u4eec\u4f7f\u7528 thenable \u5bf9\u8c61\uff08\u90a3\u4e9b\u5177\u6709\u53ef\u8c03\u7528\u7684\u00a0<code>then<\/code>\u00a0\u65b9\u6cd5\u7684\u5bf9\u8c61\uff09\u3002\u8fd9\u91cc\u7684\u60f3\u6cd5\u662f\uff0c\u7b2c\u4e09\u65b9\u5bf9\u8c61\u53ef\u80fd\u4e0d\u662f\u4e00\u4e2a promise\uff0c\u4f46\u5374\u662f promise \u517c\u5bb9\u7684\uff1a\u5982\u679c\u8fd9\u4e9b\u5bf9\u8c61\u652f\u6301\u00a0<code>.then<\/code>\uff0c\u90a3\u4e48\u5c31\u53ef\u4ee5\u5bf9\u5b83\u4eec\u4f7f\u7528\u00a0<code>await<\/code>\u3002<br \/>\n\u8fd9\u6709\u4e00\u4e2a\u7528\u4e8e\u6f14\u793a\u7684\u00a0<code>Thenable<\/code>\u00a0\u7c7b\uff0c\u4e0b\u9762\u7684\u00a0<code>await<\/code>\u00a0\u63a5\u53d7\u4e86\u8be5\u7c7b\u7684\u5b9e\u4f8b\uff1a<\/p>\n<\/blockquote>\n<pre><code class=\"language-js\">class Thenable {\n  constructor(num) {\n    this.num = num;\n  }\n  then(resolve, reject) {\n    alert(resolve);\n    \/\/ 1000ms \u540e\u4f7f\u7528 this.num*2 \u8fdb\u884c resolve\n    setTimeout(() =&gt; resolve(this.num * 2), 1000); \/\/ (*)\n  }\n}\n\nasync function f() {\n  \/\/ \u7b49\u5f85 1 \u79d2\uff0c\u4e4b\u540e result \u53d8\u4e3a 2\n  let result = await new Thenable(1);\n  alert(result);\n}\n\nf();\n<\/code><\/pre>\n<blockquote>\n<p>\u5982\u679c\u00a0<code>await<\/code>\u00a0\u63a5\u6536\u4e86\u4e00\u4e2a\u975e promise \u7684\u4f46\u662f\u63d0\u4f9b\u4e86\u00a0<code>.then<\/code>\u00a0\u65b9\u6cd5\u7684\u5bf9\u8c61\uff0c\u5b83\u5c31\u4f1a\u8c03\u7528\u8fd9\u4e2a\u00a0<code>.then<\/code>\u00a0\u65b9\u6cd5\uff0c\u5e76\u5c06\u5185\u5efa\u7684\u51fd\u6570\u00a0<code>resolve<\/code>\u00a0\u548c\u00a0<code>reject<\/code>\u00a0\u4f5c\u4e3a\u53c2\u6570\u4f20\u5165\uff08\u5c31\u50cf\u5b83\u5bf9\u5f85\u4e00\u4e2a\u5e38\u89c4\u7684\u00a0<code>Promise<\/code>\u00a0executor \u65f6\u4e00\u6837\uff09\u3002\u7136\u540e\u00a0<code>await<\/code>\u00a0\u7b49\u5f85\u76f4\u5230\u8fd9\u4e24\u4e2a\u51fd\u6570\u4e2d\u7684\u67d0\u4e2a\u88ab\u8c03\u7528\uff08\u5728\u4e0a\u9762\u8fd9\u4e2a\u4f8b\u5b50\u4e2d\u53d1\u751f\u5728\u00a0<code>(*)<\/code>\u00a0\u884c\uff09\uff0c\u7136\u540e\u4f7f\u7528\u5f97\u5230\u7684\u7ed3\u679c\u7ee7\u7eed\u6267\u884c\u540e\u7eed\u4efb\u52a1\u3002<\/p>\n<\/blockquote>\n<blockquote>\n<p>Class \u4e2d\u7684 async \u65b9\u6cd5<br \/>\n\u8981\u58f0\u660e\u4e00\u4e2a class \u4e2d\u7684 async \u65b9\u6cd5\uff0c\u53ea\u9700\u5728\u5bf9\u5e94\u65b9\u6cd5\u524d\u9762\u52a0\u4e0a\u00a0<code>async<\/code>\u00a0\u5373\u53ef\uff1a<\/p>\n<\/blockquote>\n<pre><code class=\"language-js\">class Waiter {\n  async wait() {\n    return await Promise.resolve(1);\n  }\n}\n\nnew Waiter()\n  .wait()\n  .then(alert); \/\/ 1\uff08alert \u7b49\u540c\u4e8e result =&gt; alert(result)\uff09\n<\/code><\/pre>\n<blockquote>\n<p>\u8fd9\u91cc\u7684\u542b\u4e49\u662f\u4e00\u6837\u7684\uff1a\u5b83\u786e\u4fdd\u4e86\u65b9\u6cd5\u7684\u8fd4\u56de\u503c\u662f\u4e00\u4e2a promise \u5e76\u4e14\u53ef\u4ee5\u5728\u65b9\u6cd5\u4e2d\u4f7f\u7528\u00a0<code>await<\/code>\u3002<\/p>\n<\/blockquote>\n<h2>Error \u5904\u7406<\/h2>\n<p>\u5982\u679c\u4e00\u4e2a promise \u6b63\u5e38 resolve\uff0c<code>await promise<\/code>\u00a0\u8fd4\u56de\u7684\u5c31\u662f\u5176\u7ed3\u679c\u3002\u4f46\u662f\u5982\u679c promise \u88ab reject\uff0c\u5b83\u5c06 throw \u8fd9\u4e2a error\uff0c\u5c31\u50cf\u5728\u8fd9\u4e00\u884c\u6709\u4e00\u4e2a\u00a0<code>throw<\/code>\u00a0\u8bed\u53e5\u90a3\u6837\u3002<br \/>\n\u8fd9\u4e2a\u4ee3\u7801\uff1a<\/p>\n<pre><code class=\"language-js\">async function f() {\n  await Promise.reject(new Error(&quot;Whoops!&quot;));\n}\n<\/code><\/pre>\n<p>\u2026\u2026\u548c\u4e0b\u9762\u662f\u4e00\u6837\u7684\uff1a<\/p>\n<pre><code class=\"language-js\">async function f() {\n  throw new Error(&quot;Whoops!&quot;);\n}\n<\/code><\/pre>\n<p>\u5728\u771f\u5b9e\u5f00\u53d1\u4e2d\uff0cpromise \u53ef\u80fd\u9700\u8981\u4e00\u70b9\u65f6\u95f4\u540e\u624d reject\u3002\u5728\u8fd9\u79cd\u60c5\u51b5\u4e0b\uff0c\u5728\u00a0<code>await<\/code>\u00a0\u629b\u51fa\uff08throw\uff09\u4e00\u4e2a error \u4e4b\u524d\u4f1a\u6709\u4e00\u4e2a\u5ef6\u65f6\u3002<br \/>\n\u6211\u4eec\u53ef\u4ee5\u7528\u00a0<code>try..catch<\/code>\u00a0\u6765\u6355\u83b7\u4e0a\u9762\u63d0\u5230\u7684\u90a3\u4e2a error\uff0c\u4e0e\u5e38\u89c4\u7684\u00a0<code>throw<\/code>\u00a0\u4f7f\u7528\u7684\u662f\u4e00\u6837\u7684\u65b9\u5f0f\uff1a<\/p>\n<pre><code class=\"language-js\">async function f() {\n\n  try {\n    let response = await fetch('http:\/\/no-such-url');\n  } catch(err) {\n    alert(err); \/\/ TypeError: failed to fetch\n  }\n}\n\nf();\n<\/code><\/pre>\n<p>\u5982\u679c\u6709 error \u53d1\u751f\uff0c\u6267\u884c\u63a7\u5236\u6743\u9a6c\u4e0a\u5c31\u4f1a\u88ab\u79fb\u4ea4\u81f3\u00a0<code>catch<\/code>\u00a0\u5757\u3002\u6211\u4eec\u4e5f\u53ef\u4ee5\u7528\u00a0<code>try<\/code>\u00a0\u5305\u88c5\u591a\u884c\u00a0<code>await<\/code>\u00a0\u4ee3\u7801\uff1a<\/p>\n<pre><code class=\"language-js\">async function f() {\n\n  try {\n    let response = await fetch('\/no-user-here');\n    let user = await response.json();\n  } catch(err) {\n    \/\/ \u6355\u83b7\u5230 fetch \u548c response.json \u4e2d\u7684\u9519\u8bef\n    alert(err);\n  }\n}\n\nf();\n<\/code><\/pre>\n<p>\u5982\u679c\u6211\u4eec\u6ca1\u6709\u00a0<code>try..catch<\/code>\uff0c\u90a3\u4e48\u7531\u5f02\u6b65\u51fd\u6570\u00a0<code>f()<\/code>\u00a0\u7684\u8c03\u7528\u751f\u6210\u7684 promise \u5c06\u53d8\u4e3a rejected\u3002\u6211\u4eec\u53ef\u4ee5\u5728\u51fd\u6570\u8c03\u7528\u540e\u9762\u6dfb\u52a0\u00a0<code>.catch<\/code>\u00a0\u6765\u5904\u7406\u8fd9\u4e2a error\uff1a<\/p>\n<pre><code class=\"language-js\">async function f() {\n  let response = await fetch('http:\/\/no-such-url');\n}\n\n\/\/ f() \u53d8\u6210\u4e86\u4e00\u4e2a rejected \u7684 promise\nf().catch(alert); \/\/ TypeError: failed to fetch \/\/ (*)\n<\/code><\/pre>\n<p>\u5982\u679c\u6211\u4eec\u5fd8\u4e86\u5728\u8fd9\u6dfb\u52a0\u00a0<code>.catch<\/code>\uff0c\u90a3\u4e48\u6211\u4eec\u5c31\u4f1a\u5f97\u5230\u4e00\u4e2a\u672a\u5904\u7406\u7684 promise error\uff08\u53ef\u4ee5\u5728\u63a7\u5236\u53f0\u4e2d\u67e5\u770b\uff09\u3002\u6211\u4eec\u53ef\u4ee5\u4f7f\u7528\u5728\u00a0<a href=\"https:\/\/zh.javascript.info\/promise-error-handling\">\u4f7f\u7528 promise \u8fdb\u884c\u9519\u8bef\u5904\u7406<\/a>\u00a0\u4e00\u7ae0\u4e2d\u6240\u8bb2\u7684\u5168\u5c40\u4e8b\u4ef6\u5904\u7406\u7a0b\u5e8f\u00a0<code>unhandledrejection<\/code>\u00a0\u6765\u6355\u83b7\u8fd9\u7c7b error\u3002<\/p>\n<blockquote>\n<p><code>async\/await<\/code>\u00a0\u548c\u00a0<code>promise.then\/catch<\/code><br \/>\n\u5f53\u6211\u4eec\u4f7f\u7528\u00a0<code>async\/await<\/code>\u00a0\u65f6\uff0c\u51e0\u4e4e\u5c31\u4e0d\u4f1a\u7528\u5230\u00a0<code>.then<\/code>\u00a0\u4e86\uff0c\u56e0\u4e3a\u00a0<code>await<\/code>\u00a0\u4e3a\u6211\u4eec\u5904\u7406\u4e86\u7b49\u5f85\u3002\u5e76\u4e14\u6211\u4eec\u4f7f\u7528\u5e38\u89c4\u7684\u00a0<code>try..catch<\/code>\u00a0\u800c\u4e0d\u662f\u00a0<code>.catch<\/code>\u3002\u8fd9\u901a\u5e38\uff08\u4f46\u4e0d\u603b\u662f\uff09\u66f4\u52a0\u65b9\u4fbf\u3002<br \/>\n\u4f46\u662f\u5f53\u6211\u4eec\u5728\u4ee3\u7801\u7684\u9876\u5c42\u65f6\uff0c\u4e5f\u5c31\u662f\u5728\u6240\u6709\u00a0<code>async<\/code>\u00a0\u51fd\u6570\u4e4b\u5916\uff0c\u6211\u4eec\u5728\u8bed\u6cd5\u4e0a\u5c31\u4e0d\u80fd\u4f7f\u7528\u00a0<code>await<\/code>\u00a0\u4e86\uff0c\u6240\u4ee5\u8fd9\u65f6\u5019\u901a\u5e38\u7684\u505a\u6cd5\u662f\u6dfb\u52a0\u00a0<code>.then\/catch<\/code>\u00a0\u6765\u5904\u7406\u6700\u7ec8\u7684\u7ed3\u679c\uff08result\uff09\u6216\u6389\u51fa\u6765\u7684\uff08falling-through\uff09error\uff0c\u4f8b\u5982\u50cf\u4e0a\u9762\u90a3\u4e2a\u4f8b\u5b50\u4e2d\u7684\u00a0<code>(*)<\/code>\u00a0\u884c\u90a3\u6837\u3002<\/p>\n<\/blockquote>\n<blockquote>\n<p><code>async\/await<\/code>\u00a0\u53ef\u4ee5\u548c\u00a0<code>Promise.all<\/code>\u00a0\u4e00\u8d77\u4f7f\u7528<br \/>\n\u5f53\u6211\u4eec\u9700\u8981\u540c\u65f6\u7b49\u5f85\u591a\u4e2a promise \u65f6\uff0c\u6211\u4eec\u53ef\u4ee5\u7528\u00a0<code>Promise.all<\/code>\u00a0\u628a\u5b83\u4eec\u5305\u88c5\u8d77\u6765\uff0c\u7136\u540e\u4f7f\u7528\u00a0<code>await<\/code>\uff1a<\/p>\n<\/blockquote>\n<pre><code class=\"language-js\">\/\/ \u7b49\u5f85\u7ed3\u679c\u6570\u7ec4\nlet results = await Promise.all([\n  fetch(url1),\n  fetch(url2),\n  ...\n]);\n<\/code><\/pre>\n<blockquote>\n<p>\u5982\u679c\u51fa\u73b0 error\uff0c\u4e5f\u4f1a\u6b63\u5e38\u4f20\u9012\uff0c\u4ece\u5931\u8d25\u4e86\u7684 promise \u4f20\u5230\u00a0<code>Promise.all<\/code>\uff0c\u7136\u540e\u53d8\u6210\u6211\u4eec\u80fd\u901a\u8fc7\u4f7f\u7528\u00a0<code>try..catch<\/code>\u00a0\u5728\u8c03\u7528\u5468\u56f4\u6355\u83b7\u5230\u7684\u5f02\u5e38\uff08exception\uff09\u3002<\/p>\n<\/blockquote>\n","protected":false},"excerpt":{"rendered":"<p>\u7b80\u4ecb\uff1a\u56de\u8c03 JavaScript \u4e3b\u673a\uff08host\uff09\u73af\u5883\u63d0\u4f9b\u4e86\u8bb8\u591a\u51fd\u6570\uff0c\u8fd9\u4e9b\u51fd\u6570\u5141\u8bb8\u6211\u4eec\u8ba1\u5212\u00a0\u5f02\u6b65\u00a0\u884c\u4e3a\uff08act [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[19],"tags":[],"class_list":["post-669","post","type-post","status-publish","format-standard","hentry","category-front-end"],"_links":{"self":[{"href":"https:\/\/levin.ink\/index.php?rest_route=\/wp\/v2\/posts\/669","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/levin.ink\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/levin.ink\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/levin.ink\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/levin.ink\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=669"}],"version-history":[{"count":1,"href":"https:\/\/levin.ink\/index.php?rest_route=\/wp\/v2\/posts\/669\/revisions"}],"predecessor-version":[{"id":670,"href":"https:\/\/levin.ink\/index.php?rest_route=\/wp\/v2\/posts\/669\/revisions\/670"}],"wp:attachment":[{"href":"https:\/\/levin.ink\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=669"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/levin.ink\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=669"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/levin.ink\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=669"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}