\u5728\u6628\u5929\u7684\u6587\u7ae0\u4ecb\u7d39\u7d66\u5927\u5bb6\u7684\u662f\u5982\u4f55\u5c07\u8b8a\u6578\u7d81\u5b9a\u5230html\u7684\u4e0b\u62c9\u9078\u55ae\u4e0a\uff0c\u6700\u5f8c\u9084\u6709\u7d50\u5408\u4e4b\u524d\u5206\u4eab\u7684foreach\u52d5\u614b\u5448\u73fe\u4e0b\u62c9\u9078\u55ae\u7684\u9078\u9805\uff0c\u7136\u5f8c\u4eca\u5929\u8ddf\u5927\u5bb6\u4ecb\u7d39\u4e00\u4e0b\u5982\u4f55\u547c\u53ebapi\u4e26\u4e14\u628a\u8cc7\u6599\u6293\u56de\u4f86\u3002<\/p>\n
\u8981\u5c07\u547c\u53ebapi\u6293\u8cc7\u6599\u4e4b\u524d\u7576\u7136\u8981\u8b1b\u6b77\u53f2\u4e00\u4e0b\uff0c\u5728\u6700\u65e9\u4e4b\u524d\u662f\u900f\u904eXMLHttpRequest\u53d6\u5f97\u8cc7\u6599\uff0c\u7136\u800c\u5728jQuery\u6642\u662f\u900f\u904eajax\u4f86\u53d6\u5f97\u8cc7\u6599\uff0c\u4eca\u5929\u7b46\u8005\u5169\u500b\u90fd\u4e0d\u8aaa\u660e\uff0c\u56e0\u70ba\u6709\u597d\u7528\u7684fetch\u70ba\u4ec0\u9ebc\u8981\u5728\u8aaa\u660e\u90a3\u5169\u500b\u5462\uff1f<\/p>\n
\u63a5\u4e0b\u4f86\u8ddf\u5927\u5bb6\u5206\u4eab\u4e00\u4e0b\u5982\u4f55\u900f\u904efetch\u4f86\u53d6\u5f97\u8cc7\u6599\uff0c\u4e26\u4e14\u4ecb\u7d39\u4e00\u4e0b\u5982\u4f55\u975e\u540c\u6b65\u50b3\u8f38\uff0c\u5ee2\u8a71\u4e0d\u591a\u8aaa\u5148\u770b\u4e00\u4e0b\u4e0b\u5217\u5f0f\u5b50\u3002<\/p>\n
<script>\n let promise = getRandomNumber();\n\n async function getRandomNumber() {\n const res = await fetch(`https:\/\/svelte.dev\/tutorial\/random-number`);\n const text = await res.text();\n\n if (res.ok) {\n return text;\n } else {\n throw new Error(text);\n }\n }\n\n function handleClick() {\n promise = getRandomNumber();\n }\n<\/script>\n\n<button on:click={handleClick}>\n generate random number\n<\/button>\n\n<!-- replace this element -->\n<p>The number is {promise}<\/p><\/code><\/pre>\n\u4e0a\u9762\u662f\u4e00\u500b\u975e\u540c\u6b65\u7684fetch\uff0c\u4ed6\u6703\u547c\u53ebapi\u53bb\u53d6\u5f97\u8cc7\u6599\uff0c\u7576\u7136\u76f4\u63a5\u7528\u6703\u986f\u793a\u4e00\u500bPromise\u7684\u7269\u4ef6\uff0c\u5982\u679c\u719fjavascript\u6703\u77e5\u9053\u7528then\u8ddfresolve\u5c07\u7d50\u679c\u53d6\u51fa\u4f86\uff0c\u4e0d\u904e\u4eca\u5929svelte\u6709\u66f4\u7c21\u55ae\u7684\u4f5c\u6cd5\u4f86\u8655\u7406promise\u3002<\/p>\n
await \u8a9e\u6cd5<\/h2>\n
\u9019\u908a\u8981\u8b1b\u7684\u4e0d\u662fasync await\u7684await\uff0c\u800c\u662fsvelte \u7684\u8a9e\u6cd5await\uff0c\u900f\u904e\u9019\u8a9e\u6cd5\u53ef\u4ee5\u5e6b\u5fd9\u89e3\u6790promise\u7269\u4ef6\uff0c\u4e26\u4f9d\u64da\u6210\u529f\u3001\u5931\u6557\u53ca\u8655\u7406\u4e2d\u7d66\u4e88\u986f\u793a\u4e0d\u540c\u5340\u584a\uff0c\u5be6\u969b\u7684\u5167\u5bb9\u5c31\u770b\u4e00\u4e0b\u4e0b\u9762\u7684\u4f8b\u5b50\u5427\u3002<\/p>\n
<script>\n let promise = getRandomNumber();\n\n async function getRandomNumber() {\n const res = await fetch(`https:\/\/svelte.dev\/tutorial\/random-number`);\n const text = await res.text();\n\n if (res.ok) {\n return text;\n } else {\n throw new Error(text);\n }\n }\n\n function handleClick() {\n promise = getRandomNumber();\n }\n<\/script>\n\n<button on:click={handleClick}>\n generate random number\n<\/button>\n\n<!-- replace this element -->\n{#await promise}\n <p>...waiting<\/p>\n{:then number}\n <p>The number is {number}<\/p>\n{:catch error}\n <p style="color: red">{error.message}<\/p>\n{\/await}<\/code><\/pre>\n\u5c0f\u7d50<\/h1>\n
\u4eca\u5929\u4ecb\u7d39\u7d66\u5927\u5bb6\u7684\u662f\u900f\u904efetch\u4ee5\u53capromise\u9084\u6709svelte\u7684await\u8a9e\u6cd5\u4f86\u8655\u7406\u547c\u53ebapi\u4e26\u89e3\u6790\u547c\u53eb\u5f8c\u7684\u7d50\u679c\u4e26\u5448\u73fe\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"
\u5982\u4f55\u900f\u904e fetch \u53ca promise \u9084\u6709 await \u6293\u53d6\u8cc7\u6599 \u5728\u6628\u5929\u7684\u6587\u7ae0\u4ecb\u7d39\u7d66\u5927\u5bb6\u7684\u662f\u5982\u4f55\u5c07\u8b8a\u6578\u7d81\u5b9a … <\/p>\n