{"id":971,"date":"2022-04-06T21:34:56","date_gmt":"2022-04-06T13:34:56","guid":{"rendered":"http:\/\/zhuxinyong.com\/?p=971"},"modified":"2022-04-06T22:41:01","modified_gmt":"2022-04-06T14:41:01","slug":"37-asyncawait-jian-jie","status":"publish","type":"post","link":"https:\/\/zhuxinyong.com\/?p=971","title":{"rendered":"37 – Async\/Await : \u7b80\u4ecb"},"content":{"rendered":"

\"\"<\/p>\n

Callbacks \u548c promise \u5f88\u597d\u5730\u89e3\u51b3\u4e86\u5f02\u6b65\u64cd\u4f5c\u3002Promise \u6bd4 callback \u6539\u8fdb\u7684\u5730\u65b9\u5728\u63d0\u4f9b\u4e86\u6241\u5e73\u7684\u8bed\u6cd5\uff0c\u7279\u522b\u662f\u9047\u5230\u94fe\u5f0f promise \u7684\u65f6\u5019\u3002promise \u5305\u542b\u7684\u64cd\u4f5c\u7b26 allSettled<\/strong>\u3001any<\/strong>\u3001then<\/strong>\u3001catch<\/strong> \u4f7f\u5f97\u5e94\u5bf9\u590d\u6742\u7684\u5f02\u6b65\u64cd\u4f5c\u66f4\u81ea\u5982\u3002<\/p>\n

ES2017 \u5f15\u5165\u4e86 \u63d0\u4f9b\u4e86\u7b80\u6d01\u8bed\u6cd5\u7684 Async\/Await\u3002\u4e8b\u5b9e\u4e0a\uff0casync\/await \u5c31\u662f promise\uff1b\u5b83\u4eec\u5728\u8fd9\u4e9b\u5173\u952e\u8bcd\u4e0a\u63d0\u4f9b\u62bd\u8840\u5c42\u3002<\/p>\n

<\/span><\/a>Async<\/h3>\n

async \u5173\u952e\u5b57\u53ef\u4ee5\u5e94\u7528\u5728\u4efb\u4f55\u51fd\u6570\uff08\u58f0\u660e\u3001\u8868\u8fbe\u5f0f\u3001\u56de\u8c03\uff09\uff0c\u5373\u6240\u6709\u8fd9\u4e9b\u8fd4\u56de\u4e00\u4e2a promise \u3002\u4efb\u4f55\u4e0d\u662f promise \u7684\u503c\u90fd\u4f1a\u5305\u88c5\u5230 promise \u7684 resolve \u4e2d\u3002<\/p>\n

async function foo() {\n    return "Parwinder" \/\/ returning a string but `async` will ensure it is wrapped in a promise\n}\n\nfoo().then((data) => { \/\/ we can safely use then because async function foo returns a promise\n    console.log(data); \/\/ Parwinder\n})\n<\/code><\/pre>\n
\u6211\u4eec\u540c\u6837\u4e5f\u53ef\u4ee5\u5728 foo \u51fd\u6570\u4e2d\u8fd4\u56de promise \u6548\u679c\u4e00\u6837\uff0c\u4f46\u662f\u8fd9\u5e76\u4e0d\u662f\u5fc5\u987b\uff1a<\/p>\n
async function foo() {\n    return Promise.resolve("Parwinder")\n}\n\nfoo().then((data) => {\n    console.log(data); \/\/ Parwinder\n})\n<\/code><\/pre>\n
\u6ce8\uff1a\u867d\u7136 async<\/strong> \u51fd\u6570\u7684\u8fd4\u56de\u503c\u8868\u73b0\u7684\u5c31\u50cf\u88ab\u5305\u88f9\u4e86\u4e00\u4e2a Promise.resolve<\/strong> \u4f46\u662f\u5b83\u4eec\u5e76\u4e0d\u76f8\u7b49\u3002\u82e5\u8fd4\u56de\u503c\u662f\u4e00\u4e2a promise\uff0casync \u51fd\u6570\u8fd4\u56de\u4e00\u4e2a\u4e0d\u540c\u7684 promise \u5bf9\u8c61\uff0c\u800c Promise.resolve \u8fd4\u56de\u7684\u662f\u540c\u4e00\u4e2a\u3002\u5f53\u4f60\u60f3\u68c0\u6d4b async \u51fd\u6570\u8fd4\u56de\u503c\u548c\u539f\u59cb promise \u7684\u76f8\u7b49\u6027\u65f6\u5c31\u4f1a\u9047\u5230\u9ebb\u70e6\u3002MDN<\/a><\/p>\n
const p = new Promise((res, rej) => {\n  res(1);\n})\n\nasync function asyncReturn() {\n  return p;\n}\n\nfunction basicReturn() {\n  return Promise.resolve(p);\n}\n\nconsole.log(p === basicReturn()); \/\/ true\nconsole.log(p === asyncReturn()); \/\/ false\n<\/code><\/pre>\n
<\/span><\/a>Await<\/h3>\n
await<\/strong> \u5173\u952e\u5b57\u4f7f JavaScript \u7b49\u5f85 promise \u5b8c\u6210\u4e14\u8fd4\u56de\u5176\u7ed3\u679c\uff0c\u540c\u65f6\u5b83\u53ea\u80fd\u88ab\u7528\u5728 async<\/strong> \u51fd\u6570\u4e2d\u3002<\/p>\n
async function foo() {\n    const myPromise = new Promise((resolve, reject) => {\n        setTimeout(() => {\n            resolve("Parwinder"); \/\/ resolves with "Parwinder" after 2 seconds\n        }, 2000);\n    });\n\n    \/\/ will not move to the next line until myPromise resolves\/rejects\n    const name = await myPromise;\n    \/\/ the execution pauses (or awaits) for the promise\n\n    console.log(name); \/\/ Parwinder\n}\n\nfoo();\n<\/code><\/pre>\n
\u5c31\u50cf\u4e0a\u9762\u4f60\u770b\u5230\u7684 await<\/strong> \u5173\u952e\u5b57\u63d0\u4f9b\u4e86\u6bd4 promise.then<\/strong> \u66f4\u6e05\u6670\u7684\u8bed\u6cd5\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"
Callbacks \u548c promise \u5f88\u597d\u5730\u89e3\u51b3\u4e86\u5f02\u6b65\u64cd\u4f5c\u3002Promise \u6bd4 callback ...<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2,20,3],"tags":[84,86],"class_list":["post-971","post","type-post","status-publish","format-standard","hentry","category-all","category-frontend","category-tech","tag-async-await","tag-promise"],"_links":{"self":[{"href":"https:\/\/zhuxinyong.com\/index.php?rest_route=\/wp\/v2\/posts\/971","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/zhuxinyong.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/zhuxinyong.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/zhuxinyong.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/zhuxinyong.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=971"}],"version-history":[{"count":3,"href":"https:\/\/zhuxinyong.com\/index.php?rest_route=\/wp\/v2\/posts\/971\/revisions"}],"predecessor-version":[{"id":974,"href":"https:\/\/zhuxinyong.com\/index.php?rest_route=\/wp\/v2\/posts\/971\/revisions\/974"}],"wp:attachment":[{"href":"https:\/\/zhuxinyong.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=971"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/zhuxinyong.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=971"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/zhuxinyong.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=971"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}