{"id":221,"date":"2023-02-20T18:00:46","date_gmt":"2023-02-20T10:00:46","guid":{"rendered":"https:\/\/yichenghui.net\/?p=221"},"modified":"2023-02-22T08:57:40","modified_gmt":"2023-02-22T00:57:40","slug":"async-await%e3%80%81promise%e5%92%8csettimeout%e7%9a%84%e6%89%a7%e8%a1%8c%e9%a1%ba%e5%ba%8f","status":"publish","type":"post","link":"https:\/\/yichenghui.net\/index.php\/2023\/02\/20\/async-await%e3%80%81promise%e5%92%8csettimeout%e7%9a%84%e6%89%a7%e8%a1%8c%e9%a1%ba%e5%ba%8f\/","title":{"rendered":"async\/await\u3001promise\u548csetTimeout\u7684\u6267\u884c\u987a\u5e8f"},"content":{"rendered":"\n<pre class=\"wp-block-preformatted\">async function async1() {\n\tconsole.log('async1 start');\n\tawait async2();\n\tconsole.log('asnyc1 end');\n}\nasync function async2() {\n\tconsole.log('async2');\n}\nconsole.log('script start');\nsetTimeout(() =&gt; {\n\tconsole.log('setTimeOut');\n}, 0);\nasync1();\nnew Promise(function (reslove) {\n\tconsole.log('promise1');\n\treslove();\n}).then(function () {\n\tconsole.log('promise2');\n})\nconsole.log('script end');\n\n\n\/** \u6267\u884c\u7ed3\u679c\n*script start\n*async1 start\n*async2\n*promise1\n*script end\n*asnyc1 end\n*promise2\n*setTimeOut\n*\/<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u4e3a\u4ec0\u4e48<code>promise1<\/code>\u6bd4<code>asnyc1 end<\/code>\u5148\u51fa\u6765\u5462\uff1f\u5e26\u7740\u8fd9\u4e2a\u7591\u95ee\uff0c\u6211\u53bb\u4e86\u89e3\u4e86\u4e00\u4e0b<strong>\u4e8b\u4ef6\u5faa\u73af\u673a\u5236<\/strong>\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">JavaScript\u7684\u4e8b\u4ef6\u5206\u4e24\u79cd:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"466\" height=\"460\" src=\"https:\/\/yichenghui.net\/wp-content\/uploads\/2023\/02\/image.png\" alt=\"\" class=\"wp-image-222\" srcset=\"https:\/\/yichenghui.net\/wp-content\/uploads\/2023\/02\/image.png 466w, https:\/\/yichenghui.net\/wp-content\/uploads\/2023\/02\/image-300x296.png 300w, https:\/\/yichenghui.net\/wp-content\/uploads\/2023\/02\/image-100x100.png 100w\" sizes=\"auto, (max-width: 466px) 100vw, 466px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">\u4e8b\u4ef6\u7684\u6267\u884c\u987a\u5e8f\uff0c\u662f\u5148\u6267\u884c\u5b8f\u4efb\u52a1\uff0c\u7136\u540e\u6267\u884c\u5fae\u4efb\u52a1\uff0c\u8fd9\u4e2a\u662f\u57fa\u7840\uff0c\u4efb\u52a1\u53ef\u4ee5\u6709\u540c\u6b65\u4efb\u52a1\u548c\u5f02\u6b65\u4efb\u52a1\uff0c\u540c\u6b65\u7684\u8fdb\u5165\u4e3b\u7ebf\u7a0b\uff0c\u5f02\u6b65\u7684\u8fdb\u5165Event Table\u5e76\u6ce8\u518c\u51fd\u6570\uff0c\u5f02\u6b65\u4e8b\u4ef6\u5b8c\u6210\u540e\uff0c\u4f1a\u5c06\u56de\u8c03\u51fd\u6570\u653e\u5165Event Queue\u4e2d(\u5b8f\u4efb\u52a1\u548c\u5fae\u4efb\u52a1\u662f\u4e0d\u540c\u7684Event Queue)\uff0c\u540c\u6b65\u4efb\u52a1\u6267\u884c\u5b8c\u6210\u540e\uff0c\u4f1a\u4eceEvent Queue\u4e2d\u8bfb\u53d6\u4e8b\u4ef6\u653e\u5165\u4e3b\u7ebf\u7a0b\u6267\u884c\uff0c\u56de\u8c03\u51fd\u6570\u4e2d\u53ef\u80fd\u8fd8\u4f1a\u5305\u542b\u4e0d\u540c\u7684\u4efb\u52a1\uff0c\u56e0\u6b64\u4f1a\u5faa\u73af\u6267\u884c\u4e0a\u8ff0\u64cd\u4f5c\u3002<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">\u6ce8\u610f\uff1a setTimeOut\u5e76\u4e0d\u662f\u76f4\u63a5\u7684\u628a\u4f60\u7684\u56de\u6389\u51fd\u6570\u653e\u8fdb\u4e0a\u8ff0\u7684\u5f02\u6b65\u961f\u5217\u4e2d\u53bb\uff0c\u800c\u662f\u5728\u5b9a\u65f6\u5668\u7684\u65f6\u95f4\u5230\u4e86\u4e4b\u540e\uff0c\u628a\u56de\u6389\u51fd\u6570\u653e\u5230\u6267\u884c\u5f02\u6b65\u961f\u5217\u4e2d\u53bb\u3002\u5982\u679c\u6b64\u65f6\u8fd9\u4e2a\u961f\u5217\u5df2\u7ecf\u6709\u5f88\u591a\u4efb\u52a1\u4e86\uff0c\u90a3\u5c31\u6392\u5728\u4ed6\u4eec\u7684\u540e\u9762\u3002\u8fd9\u4e5f\u5c31\u89e3\u91ca\u4e86\u4e3a\u4ec0\u4e48setTimeOut\u4e3a\u4ec0\u4e48\u4e0d\u80fd\u7cbe\u51c6\u7684\u6267\u884c\u7684\u95ee\u9898\u4e86\u3002setTimeOut\u6267\u884c\u9700\u8981\u6ee1\u8db3\u4e24\u4e2a\u6761\u4ef6\uff1a\n\n1.\u4e3b\u8fdb\u7a0b\u5fc5\u987b\u662f\u7a7a\u95f2\u7684\u72b6\u6001\uff0c\u5982\u679c\u5230\u65f6\u95f4\u4e86\uff0c\u4e3b\u8fdb\u7a0b\u4e0d\u7a7a\u95f2\u4e5f\u4e0d\u4f1a\u6267\u884c\u4f60\u7684\u56de\u8c03\u51fd\u6570\n2.\u8fd9\u4e2a\u56de\u8c03\u51fd\u6570\u9700\u8981\u7b49\u5230\u63d2\u5165\u5f02\u6b65\u961f\u5217\u65f6\u524d\u9762\u7684\u5f02\u6b65\u51fd\u6570\u90fd\u6267\u884c\u5b8c\u4e86\uff0c\u624d\u4f1a\u6267\u884c\n\u3002<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>promise\u3001async\/await<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u9996\u5148\uff0c<code>new Promise<\/code>\u662f\u540c\u6b65\u7684\u4efb\u52a1\uff0c\u4f1a\u88ab\u653e\u5230\u4e3b\u8fdb\u7a0b\u4e2d\u53bb\u7acb\u5373\u6267\u884c\u3002\u800c<code>.then()<\/code>\u51fd\u6570\u662f\u5f02\u6b65\u4efb\u52a1\u4f1a\u653e\u5230\u5f02\u6b65\u961f\u5217\u4e2d\u53bb\uff0c\u90a3\u4ec0\u4e48\u65f6\u5019\u653e\u5230\u5f02\u6b65\u961f\u5217\u4e2d\u53bb\u5462\uff1f\u5f53\u4f60\u7684<code>promise<\/code>\u72b6\u6001\u7ed3\u675f\u7684\u65f6\u5019\uff0c\u5c31\u4f1a\u7acb\u5373\u653e\u8fdb\u5f02\u6b65\u961f\u5217\u4e2d\u53bb\u4e86\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>\u5e26<code>async<\/code>\u5173\u952e\u5b57\u7684\u51fd\u6570\u4f1a\u8fd4\u56de\u4e00\u4e2a<code>promise<\/code>\u5bf9\u8c61<\/strong>\uff0c\u5982\u679c\u91cc\u9762\u6ca1\u6709<code>await<\/code>\uff0c\u6267\u884c\u8d77\u6765\u7b49\u540c\u4e8e\u666e\u901a\u51fd\u6570\uff1b\u5982\u679c\u6ca1\u6709<code>await<\/code>\uff0c<code>async<\/code>\u51fd\u6570\u5e76\u6ca1\u6709\u5f88\u5389\u5bb3\u662f\u4e0d\u662f\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><code>await<\/code> \u5173\u952e\u5b57\u8981\u5728 <code>async<\/code> \u5173\u952e\u5b57\u51fd\u6570\u7684\u5185\u90e8\uff0c<code>await<\/code> \u5199\u5728\u5916\u9762\u4f1a\u62a5\u9519\uff1b<code>await<\/code>\u5982\u540c\u4ed6\u7684\u8bed\u610f\uff0c\u5c31\u662f\u5728\u7b49\u5f85\uff0c\u7b49\u5f85\u53f3\u4fa7\u7684\u8868\u8fbe\u5f0f\u5b8c\u6210\u3002\u6b64\u65f6\u7684<code>await<\/code>\u4f1a\u8ba9\u51fa\u7ebf\u7a0b\uff0c\u963b\u585e<code>async<\/code>\u5185\u540e\u7eed\u7684\u4ee3\u7801\uff0c\u5148\u53bb\u6267\u884c<code>async<\/code>\u5916\u7684\u4ee3\u7801\u3002\u7b49\u5916\u9762\u7684\u540c\u6b65\u4ee3\u7801\u6267\u884c\u5b8c\u6bd5\uff0c\u624d\u4f1a\u6267\u884c\u91cc\u9762\u7684\u540e\u7eed\u4ee3\u7801\u3002\u5c31\u7b97<code>await<\/code>\u7684\u4e0d\u662f<code>promise<\/code>\u5bf9\u8c61\uff0c\u662f\u4e00\u4e2a\u540c\u6b65\u51fd\u6570\uff0c\u4e5f\u4f1a\u7b49\u8fd9\u6837\u64cd\u4f5c\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u6d41\u7a0b\u68b3\u7406<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u6211\u4eec\u6574\u4f53\u518d\u68b3\u7406\u4e00\u4e0b\u4e0a\u9762\u4ee3\u7801\u6267\u884c\u7684\u6d41\u7a0b\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u6574\u4e2a\u4ee3\u7801\u7247\u6bb5\uff08script\uff09\u4f5c\u4e3a\u4e00\u4e2a\u5b8f\u4efb\u52a1\u6267\u884c<code>console.log('script start')<\/code>\uff0c\u8f93\u51fa<code>script start<\/code>\uff1b<\/li>\n\n\n\n<li>\u6267\u884c<code>setTimeout<\/code>\uff0c\u662f\u4e00\u4e2a\u5f02\u6b65\u52a8\u4f5c\uff0c\u653e\u5165\u5b8f\u4efb\u52a1\u5f02\u6b65\u961f\u5217\u4e2d\uff1b<\/li>\n\n\n\n<li>\u6267\u884c<code>async1()<\/code>\uff0c\u8f93\u51fa<code>async1 start<\/code>\uff0c\u7ee7\u7eed\u5411\u4e0b\u6267\u884c\uff1b<\/li>\n\n\n\n<li>\u6267\u884c<code>async2()<\/code>\uff0c\u8f93\u51fa<code>async2<\/code>\uff0c\u5e76\u8fd4\u56de\u4e86\u4e00\u4e2a<code>promise<\/code>\u5bf9\u8c61\uff0c<code>await<\/code>\u8ba9\u51fa\u4e86\u7ebf\u7a0b\uff0c\u628a\u8fd4\u56de\u7684<code>promise<\/code>\u52a0\u5165\u4e86\u5fae\u4efb\u52a1\u5f02\u6b65\u961f\u5217\uff0c\u6240\u4ee5<code>async1()<\/code>\u4e0b\u9762\u7684\u4ee3\u7801\u4e5f\u8981\u7b49\u5f85\u4e0a\u9762\u5b8c\u6210\u540e\u7ee7\u7eed\u6267\u884c;<\/li>\n\n\n\n<li>\u6267\u884c <code>new Promise<\/code>\uff0c\u8f93\u51fa<code>promise1<\/code>\uff0c\u7136\u540e\u5c06<code>resolve()<\/code>\u653e\u5165\u5fae\u4efb\u52a1\u5f02\u6b65\u961f\u5217\uff1b\u6267\u884c<code>console.log('script end')<\/code>\uff0c\u8f93\u51fa<code>script end<\/code>\uff1b<\/li>\n\n\n\n<li>\u5230\u6b64\u540c\u6b65\u7684\u4ee3\u7801\u5c31\u90fd\u6267\u884c\u5b8c\u6210\u4e86\uff0c\u7136\u540e\u53bb\u5fae\u4efb\u52a1\u5f02\u6b65\u961f\u5217\u91cc\u53bb\u83b7\u53d6\u4efb\u52a1<\/li>\n\n\n\n<li>\u63a5\u4e0b\u6765\u6267\u884c<code>resolve<\/code>\uff08<code>async2<\/code>\u8fd4\u56de\u7684<code>promise<\/code>\u8fd4\u56de\u7684\uff09\uff0c\u8f93\u51fa\u4e86<code>async1 end<\/code>\uff1b<\/li>\n\n\n\n<li>\u7136\u540e\u6267\u884c<code>resolve\uff08new Promise\u7684\uff09<\/code>\uff0c\u8f93\u51fa\u4e86<code>promise2<\/code>\uff1b<\/li>\n\n\n\n<li>\u6700\u540e\u6267\u884c<code>setTimeout<\/code>\uff0c\u8f93\u51fa\u4e86<code>settimeout<\/code>\u3002<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">\u5728\u7b2c<code>4<\/code>\u6b65\u4e2d\uff0c <code>await<\/code> \u8fd9\u91cc\u6709\u4e00\u4e2a\u673a\u5236\uff0c \u5c31\u662f <code>await<\/code> \u7684\u7b49\u5f85\uff0c \u4e0d\u4f1a\u963b\u585e\u5916\u90e8\u51fd\u6570\u7684\u6267\u884c\uff0c \u800c <code>await<\/code> \u7b49\u5f85\u7684 \u5982\u679c\u662f\u4e00\u4e2a <code>Promise<\/code> \u5219 <code>Promise<\/code> \u91cc\u9762\u7684\u4ee3\u7801\u8fd8\u662f\u540c\u6b65\u6267\u884c\uff0c \u5982\u679c\u4e0d\u662f <code>Promise<\/code> \uff0c\u5c31\u4f1a\u4f7f\u7528 <code>Promise.resolve<\/code> \u6765\u8fdb\u884c\u5c01\u88c5\uff0c \u8fd9\u91cc\u7684 <code>async2<\/code> \u662f\u4e00\u4e2a <code>async<\/code> \u65b9\u6cd5\uff0c \u91cc\u9762\u7684 \u6253\u5370\u4f1a\u540c\u6b65\u6267\u884c\uff0c \u800c <code>await async2()<\/code> \u540e\u9762\u7684\u4ee3\u7801 \u4f1a\u653e\u5230\u5fae\u4efb\u52a1\u961f\u5217\u4e2d\u7684\u7b2c\u4e00\u4e2a\u4f4d\u7f6e\uff0c\u7b49\u5f85\u5916\u90e8\u540c\u6b65\u4ee3\u7801\u6267\u884c\u5b8c\u6bd5\u4ee5\u540e\u518d\u6267\u884c\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u6240\u4ee5\u6211\u77e5\u9053\u4e86<code>script end<\/code>\u4e3a\u4ec0\u4e48\u4f1a\u4f18\u5148\u4e8e<code>async1 end<\/code>\u8f93\u51fa\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u4f5c\u8005\uff1a\u767d\u54e5\u5b66\u524d\u7aef<br>\u94fe\u63a5\uff1ahttps:\/\/juejin.cn\/post\/7171002835016892453<\/p>\n","protected":false},"excerpt":{"rendered":"<p>async function async1() { console.log(&#8216;async1 start&#8217;);  &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/yichenghui.net\/index.php\/2023\/02\/20\/async-await%e3%80%81promise%e5%92%8csettimeout%e7%9a%84%e6%89%a7%e8%a1%8c%e9%a1%ba%e5%ba%8f\/\" class=\"more-link\">\u7ee7\u7eed\u9605\u8bfb<span class=\"screen-reader-text\">\u201casync\/await\u3001promise\u548csetTimeout\u7684\u6267\u884c\u987a\u5e8f\u201d<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_kadence_starter_templates_imported_post":false,"footnotes":""},"categories":[4],"tags":[],"class_list":["post-221","post","type-post","status-publish","format-standard","hentry","category-javascript"],"_links":{"self":[{"href":"https:\/\/yichenghui.net\/index.php\/wp-json\/wp\/v2\/posts\/221","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/yichenghui.net\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/yichenghui.net\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/yichenghui.net\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/yichenghui.net\/index.php\/wp-json\/wp\/v2\/comments?post=221"}],"version-history":[{"count":2,"href":"https:\/\/yichenghui.net\/index.php\/wp-json\/wp\/v2\/posts\/221\/revisions"}],"predecessor-version":[{"id":224,"href":"https:\/\/yichenghui.net\/index.php\/wp-json\/wp\/v2\/posts\/221\/revisions\/224"}],"wp:attachment":[{"href":"https:\/\/yichenghui.net\/index.php\/wp-json\/wp\/v2\/media?parent=221"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/yichenghui.net\/index.php\/wp-json\/wp\/v2\/categories?post=221"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/yichenghui.net\/index.php\/wp-json\/wp\/v2\/tags?post=221"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}