{"id":25,"date":"2024-02-26T10:05:31","date_gmt":"2024-02-26T10:05:31","guid":{"rendered":"http:\/\/icpnet.cn\/?p=25"},"modified":"2024-02-26T13:00:51","modified_gmt":"2024-02-26T13:00:51","slug":"xmlhttprequest%e4%b8%8efetch-api","status":"publish","type":"post","link":"http:\/\/icpnet.cn\/?p=25","title":{"rendered":"XMLHttpRequest\u4e0eFetch API"},"content":{"rendered":"\n<p>XMLHttpRequest<\/p>\n\n\n\n<p>\u76ee\u524d\u5e38\u89c1\u7684\u4e3b\u6d41\u6d4f\u89c8\u5668\u5ea6\u652f\u6301XMLHttpRequest\uff0c\u4e0b\u9762\u5217\u4e3e\u4e00\u4e2a\u5e38\u89c1\u7684\u8bf7\u6c42\u793a\u4f8b\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const xhr = new XMLHttpRequest();\nxhr.open(\"GET\", \"\/service\");\n\n\/\/ state change event\nxhr.onreadystatechange = () =&gt; {\n  \/\/ is request complete?\n  if (xhr.readyState !== 4) return;\n\n  if (xhr.status === 200) {\n    \/\/ request successful xhr.responseText\/xhr.responseXml\n    console.log(JSON.parse(xhr.responseText));\n  } else {\n    \/\/ request not successful\n    console.log(\"HTTP error\", xhr.status, xhr.statusText);\n  }\n};\n\n\/\/ start request\nxhr.send()<\/code><\/pre>\n\n\n\n<p>onreadystatechange \u56de\u8c03\u51fd\u6570\u5728\u8bf7\u6c42\u7684\u751f\u547d\u5468\u671f\u4e2d\u8fd0\u884c\u597d\u51e0\u6b21\uff1bXMLHttpRequest \u5bf9\u8c61\u7684 readyState \u5c5e\u6027\u5219\u8fd4\u56de\u5f53\u524d\u72b6\u6001\uff1a<\/p>\n\n\n\n<ul>\n<li>0 (UNSET\uff09 &#8211; XMLHttpRequest\u88ab\u521b\u5efa\uff0c\u4e14open() \u65b9\u6cd5\u672a\u8c03\u7528<\/li>\n\n\n\n<li>1\uff08OPENED\uff09- open() \u5df2\u7ecf\u88ab\u8c03\u7528<\/li>\n\n\n\n<li>2\uff08HEADERS_RECEIVED\uff09- send() \u5df2\u7ecf\u88ab\u8c03\u7528\uff0c\u4e14\u54cd\u5e94\u5934\u90e8\u548c\u72b6\u6001\u5df2\u7ecf\u83b7\u5f97<\/li>\n\n\n\n<li>3\uff08LOADING\uff09- \u4e0b\u8f7d\u4e2d\uff0cresponse\u5df2\u7ecf\u5305\u542b\u90e8\u5206\u6570\u636e<\/li>\n\n\n\n<li>4\uff08DONE\uff09- \u8bf7\u6c42\u5b8c\u6210<\/li>\n<\/ul>\n\n\n\n<p>onreadystatechange<\/p>\n\n\n\n<p>\u5f53<code>readyState<\/code>\u5c5e\u6027\u53d1\u751f\u53d8\u5316\u65f6\uff0c\u4f1a\u8c03\u7528<code>&nbsp;onreadystatechange<\/code>\u51fd\u6570<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>var xhr = new XMLHttpRequest();\n\nxhr.onreadystatechange = function () {\n    \/\/ 0 1 \"\"\n    \/\/ 200 2 \"\"\n    \/\/ 200 3 \"\u7b2c\u4e00\u6b21\u8f93\u51fa\"\n    \/\/ 200 3 \"\u7b2c\u4e00\u6b21\u8f93\u51fa\u5ef6\u8fdf2\u79d2\u540e\u7684\u8f93\u51fa\"\n    \/\/ 200 3 \"\u7b2c\u4e00\u6b21\u8f93\u51fa\u5ef6\u8fdf2\u79d2\u540e\u7684\u8f93\u51fa\u5ef6\u8fdf4\u79d2\u540e\u7684\u8f93\u51fa\"\n    \/\/ 200 4 \"\u7b2c\u4e00\u6b21\u8f93\u51fa\u5ef6\u8fdf2\u79d2\u540e\u7684\u8f93\u51fa\u5ef6\u8fdf4\u79d2\u540e\u7684\u8f93\u51fa\"\n    console.log(this.status, this.readyState, this.response);\n}\n\nxhr.open('GET', url);\nxhr.send();<\/code><\/pre>\n\n\n\n<p>status<\/p>\n\n\n\n<p>\u8fd4\u56de\u7684\u72b6\u6001\u7801<\/p>\n\n\n\n<p>statusText<\/p>\n\n\n\n<p>\u8fd4\u56de\u7684\u72b6\u6001<\/p>\n\n\n\n<p>response<\/p>\n\n\n\n<p>\u54cd\u5e94\u5185\u5bb9\uff0c\u6570\u636e\u7c7b\u578b\u901a\u8fc7<code>responseType<\/code>\u5b9a\u4e49<\/p>\n\n\n\n<p>responseType<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td>\u503c<\/td><td>\u63cf\u8ff0<\/td><\/tr><tr><td><\/td><td>\u4e3a\u7a7a\u65f6\uff0c\u9ed8\u8ba4\u548ctext\u76f8\u540c<\/td><\/tr><tr><td>arraybuffer<\/td><td>response\u662f\u4e00\u4e2a ArrayBuffer \u5bf9\u8c61<\/td><\/tr><tr><td>blob<\/td><td>response\u662f\u4e00\u4e2a Blob \u5bf9\u8c61<\/td><\/tr><tr><td>document<\/td><td>response\u662f\u4e00\u4e2aHTML Document \u6216\u8005 XML Document<\/td><\/tr><tr><td>json<\/td><td>response\u662f\u4e00\u4e2ajs\u5bf9\u8c61<\/td><\/tr><tr><td>text<\/td><td>response\u662f\u4e00\u4e2aDOMString`\u5bf9\u8c61<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<ul>\n<li><\/li>\n<\/ul>\n\n\n\n<p>timeout<\/p>\n\n\n\n<p>\u8bbe\u7f6e\u8bf7\u6c42\u8d85\u65f6\u65f6\u95f4\uff0c\u5f53\u8d85\u65f6\u53d1\u751f\u540e\uff0c\u8bf7\u6c42\u7684<code>readyState<\/code>\u4f1a\u53d8\u4e3a4\uff08DONE\uff09,&nbsp;<code>status<\/code>\u7531\u5df2\u63a5\u53d7\u5230\u7684200\u53d8\u4e3a0\uff0c<code>respose<\/code>\u7f6e\u4e3a\u7a7a\u3002\u89e6\u53d1timeout\u4e8b\u4ef6\u3002<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>var xhr = new XMLHttpRequest();\n\nxhr.onreadystatechange = function () {\n    \/\/ 0 1 \"\"\n    \/\/ 200 2 \"\"\n    \/\/ 200 3 \"\u7b2c\u4e00\u6b21\u8f93\u51fa\"\n    \/\/ 0 4 \"\"\n    console.log(this.status, this.readyState, this.response);\n}\nxhr.addEventListener('timeout', function () {\n    \/\/ timeout 0 4\n    console.log('timeout', this.status, this.readyState, this.response);\n});\nxhr.addEventListener('error', function () {\n    console.log('error', this.status, this.readyState, this.response);\n});\n\nxhr.open('GET', url);\nxhr.timeout = 1000;\nxhr.send();<\/code><\/pre>\n\n\n\n<p>withCredentials<\/p>\n\n\n\n<p>\u9ed8\u8ba4\u503c\u662f<code>false<\/code>\uff0c\u5728\u8de8\u57df\u8bf7\u6c42\u65f6\uff0c\u4e0d\u643a\u5e26<code>cookie<\/code>\uff0c\u4e14\u54cd\u5e94\u7684<code>Set-Cookie<\/code>\u4e0d\u751f\u6548\u3002\u8bbe\u7f6e\u4e3a<code>true<\/code>\u65f6\uff0c\u8de8\u57df\u8bf7\u6c42\u4f1a\u5e26\u4e0a<code>cookie<\/code>\uff0c\u4e14\u54cd\u5e94\u7684<code>Set-Cookie<\/code>\u4f1a\u751f\u6548\u3002\u5bf9\u540c\u6e90\u8bf7\u6c42\uff0c\u8be5\u5c5e\u6027\u4e0d\u751f\u6548\u3002<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ \u9a8c\u8bc1withCredentials\u53ef\u4ee5\u53d1\u9001cookies\u3001\u8bbe\u7f6ecookies\nvar xhr = new XMLHttpRequest();\nvar url = 'http:\/\/localhost:8090\/setcookie?c=' + encodeURIComponent('random=' + Math.random());\n\nxhr.onreadystatechange = function () {\n    console.log(this.status, this.readyState, this.response);\n}\n\nxhr.open('GET', url);\nxhr.withCredentials = true;\nxhr.send();\n\/\/ \u8bf7\u6c42\u5b8c\u6210\u540e\uff0c\u5728\u5f00\u53d1\u8005\u9762\u677f\u53ef\u4ee5\u770b\u5230\uff0c\u57df\u540dlocalhost:8090\u4e0b\u7684cookies\u4e2d\u5b58\u5728\u7531\u54cd\u5e94\u8bbe\u7f6e\u7684random\u503c<\/code><\/pre>\n\n\n\n<p><\/p>\n\n\n\n<p><strong>\u6ce8\u610f<\/strong>\uff1a<\/p>\n\n\n\n<ul>\n<li><code>withCredentials<\/code>\u4f9d\u7136\u8981\u9075\u5faa\u6d4f\u89c8\u5668\u7684\u5b89\u5168\u7b56\u7565\uff0c\u4e0d\u540c\u57df\u540d\u4e0b\u7684cookie\u662f\u9694\u79bb\u7684\uff0c\u4e0d\u80fd\u76f8\u4e92\u8bbf\u95ee\u5bf9\u65b9\u57df\u540d\u4e0b\u7684<code>cookie<\/code><\/li>\n\n\n\n<li>\u54cd\u5e94\u5934\u9700\u8981\u8bbe\u7f6e<code>Access-Control-Allow-Origin<\/code>\u548c<code>Access-Control-Allow-Credentials<\/code>,\u5426\u5219\u8de8\u57df\u8bf7\u6c42\u4f1a\u5931\u8d25<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>self.set_header('Access-Control-Allow-Origin', 'http:\/\/localhost:8210')\nself.set_header('Access-Control-Allow-Credentials', 'true') <\/code><\/pre>\n\n\n\n<p>setRequestHeader<\/p>\n\n\n\n<p>\u8bbe\u7f6eHTTP\u8bf7\u6c42\u5934\uff0c\u9700\u8981\u5728<code>open()<\/code>\u51fd\u6570\u8c03\u7528\u548c<code>send()<\/code>\u51fd\u6570\u8c03\u7528\u4e4b\u95f4\u8c03\u7528\u3002 \u8003\u8651\u5230\u5b89\u5168\u95ee\u9898\uff0c\u6d4f\u89c8\u5668\u4f1a\u7981\u6b62\u7528\u6237\u8bbe\u7f6e\u67d0\u4e9b\u8bf7\u6c42\u5934\u3002\u88ab\u7981\u6b62\u7684\u8bf7\u6c42\u5934\u5305\u62ec<\/p>\n\n\n\n<p>getResponseHeader<\/p>\n\n\n\n<p>\u83b7\u53d6HTTP\u54cd\u5e94\u5934<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>Fetch<\/p>\n\n\n\n<p>Fetch\u662f\u4e00\u4e2a\u5168\u5c40\u51fd\u6570\uff0c\u7528\u6765\u4ece\u7f51\u7edc\u4e0a\u83b7\u53d6\u8d44\u6e90\uff0c\u5177\u6709\u4e24\u4e2a\u53c2\u6570<code>resource<\/code>,<code>init<\/code>\u3002\u8fd4\u56de\u7ed3\u679c\u662fPromise\uff0c\u8bf7\u6c42\u7ed3\u675f\u65f6\uff0c\u8fd4\u56de<code>Response<\/code>\u5bf9\u8c61\u3002<\/p>\n\n\n\n<p>Fetch \u662f\u4e00\u4e2a\u73b0\u4ee3\u57fa\u4e8e promise \u7684 Ajax \u8bf7\u6c42 API\uff0c\u9996\u6b21\u51fa\u73b0\u4e8e 2015 \u5e74\uff0c\u5728\u5927\u591a\u6570\u6d4f\u89c8\u5668\u4e2d\u90fd\u5f97\u5230\u4e86\u652f\u6301\u3002\u5b83\u4e0d\u662f\u57fa\u4e8e XMLHttpRequest \u6784\u5efa\u7684\uff0c\u5e76\u4e14\u7528\u66f4\u7b80\u6d01\u7684\u8bed\u6cd5\u63d0\u4f9b\u4e86\u66f4\u597d\u7684\u4e00\u81f4\u6027\u3002\u4e0b\u9762\u7684 Promise \u94fe\u51fd\u6570\u4e0e\u4e0a\u9762\u7684 XMLHttpRequest \u4f8b\u5b50\u76f8\u540c\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>fetch(\"\/service\", { method: \"GET\" })\n  .then((res) =&gt; res.json())\n  .then((json) =&gt; console.log(json))\n  .catch((err) =&gt; console.error(\"error:\", err));<\/code><\/pre>\n\n\n\n<p>\u6216\u8005\u4f60\u53ef\u4ee5\u4f7f\u7528 async\/await\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>try {\n  const res = await fetch(\"\/service\", { method: \"GET\" }),\n    json = await res.json();\n\n  console.log(json);\n} catch (err) {\n  console.error(\"error:\", err);\n}<\/code><\/pre>\n\n\n\n<p>resource<\/p>\n\n\n\n<p>\u8d44\u6e90\u7684\u8def\u5f84 \u6216\u8005<code>Request<\/code>\u5bf9\u8c61<\/p>\n\n\n\n<p><code>init<\/code><\/p>\n\n\n\n<p>\u662f\u4e00\u4e2a\u521d\u59cb\u5316\u914d\u7f6e\u5bf9\u8c61\uff0c\u5177\u4f53\u53c2\u6570\u914d\u7f6e\u5982\u4e0b<\/p>\n\n\n\n<p>method <\/p>\n\n\n\n<p>\u8bf7\u6c42\u65b9\u5f0f<\/p>\n\n\n\n<p>headers<\/p>\n\n\n\n<p>\u8bf7\u6c42\u5934\uff0c\u8003\u8651\u5230\u5b89\u5168\u95ee\u9898\uff0c\u6d4f\u89c8\u5668\u4f1a\u7981\u6b62\u7528\u6237\u8bbe\u7f6e\u67d0\u4e9b\u8bf7\u6c42\u5934\u3002Headers \u5bf9\u8c61\u63d0\u4f9b\u4e86\u4e00\u4e2a\u7b80\u5355\u7684\u63a5\u53e3\u6765\u8bbe\u7f6e\u8bf7\u6c42\u4e2d\u7684\u5934\u4fe1\u606f\u6216\u83b7\u53d6\u54cd\u5e94\u4e2d\u7684\u5934\u4fe1\u606f<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ set request headers\nconst headers = new Headers();\nheaders.set(\"X-Requested-With\", \"ajax\");\nheaders.append(\"Content-Type\", \"text\/xml\");\n\nconst request = new Request(\"\/service\", {\n  method: \"POST\",\n  headers,\n});\n\nconst res = await fetch(request);\n\n\/\/ examine response headers\nconsole.log(res.headers.get(\"Content-Type\"));<\/code><\/pre>\n\n\n\n<p>body<\/p>\n\n\n\n<p>\u8bf7\u6c42\u4f53\uff0c\u53ef\u4ee5\u662f<code>Blob<\/code>,<code>BufferSource&nbsp;<\/code>,&nbsp;<code>FormData<\/code>\uff0c<code>URLSearchParams<\/code>\uff0c<code>USVString<\/code>\uff0c<code>ReadableStream<\/code>\u3002\u9700\u8981\u6ce8\u610f\uff0c<code>GET<\/code>\u548c<code>HEAD<\/code>\u8bf7\u6c42\u4e0d\u80fd\u8bbe\u7f6e<code>body<\/code><\/p>\n\n\n\n<p>mode<\/p>\n\n\n\n<p>\u8bf7\u6c42\u7684\u6a21\u5f0f,\u5982&nbsp;<code>cors<\/code>\u3001<code>no-cors<\/code>&nbsp;\u6216\u8005&nbsp;<code>same-origin<\/code><\/p>\n\n\n\n<ul>\n<li>same-origin \u53d1\u9001\u7684\u662f\u540c\u6e90\u8bf7\u6c42<\/li>\n\n\n\n<li>no-cors \u53d1\u9001\u7684\u662f<a href=\"https:\/\/www.zhihu.com\/search?q=%E5%90%8C%E6%BA%90%E8%AF%B7%E6%B1%82&amp;search_source=Entity&amp;hybrid_search_source=Entity&amp;hybrid_search_extra=%7B%22sourceType%22%3A%22answer%22%2C%22sourceId%22%3A2169249853%7D\" target=\"_blank\" rel=\"noreferrer noopener\">\u540c\u6e90\u8bf7\u6c42<\/a>\u6216\u7b80\u5355\u7684\u8de8\u57df\u8bf7\u6c42<\/li>\n\n\n\n<li>cors \u53d1\u9001\u7684\u662f\u975e\u7b80\u5355\u7684\u8de8\u57df\u8bf7\u6c42\uff0c\u4f1a\u5148\u53d1\u9001\u9884\u68c0\u8bf7\u6c42<\/li>\n<\/ul>\n\n\n\n<p>credentials<\/p>\n\n\n\n<p>\u4e00\u4e2a\u679a\u4e3e\u503c\uff0c\u53ef\u9009\u7684\u503c\u6709<code>omit<\/code>\u3001<code>same-origin<\/code>\u6216\u8005<code>include<\/code>\u3002\u9ed8\u8ba4\u662f<code>same-origin<\/code>\uff0c\u5f53\u53d1\u8d77\u8bf7\u6c42\u65f6\uff0c\u53ea\u6709\u540c\u6e90\u7684\u60c5\u51b5\u4e0b\uff0c\u4f1a\u5e26\u4e0a<code>cookie<\/code>\uff0c\u8de8\u57df\u65f6\u4e0d\u5e26<code>cookie<\/code>\u3002\u8bbe\u7f6e<code>omit<\/code>\u65f6\uff0c\u4efb\u4f55\u60c5\u51b5\u4e0b\u90fd\u4e0d\u5e26<code>cookie<\/code>\u3002\u8bbe\u7f6e<code>include<\/code>\u7684\u60c5\u51b5\u4e0b\uff0c\u540c\u6e90\u60c5\u51b5\u4e0b\u5e26\u4e0a<code>cookie<\/code>\uff0c\u8de8\u57df\u65f6\u4e5f\u5e26<code>cookie<\/code><\/p>\n\n\n\n<p>cache<\/p>\n\n\n\n<p>\u7528\u6765\u63a7\u5236\u8d44\u6e90\u7684\u7f13\u5b58\u7b56\u7565\uff0c\u53ef\u9009\u7684\u503c\u662f<code>default<\/code>\uff0c<code>no-store<\/code>\uff0c<code>reload<\/code>\uff0c<code>no-cache<\/code>\uff0c<code>force-cache<\/code>\uff0c<code>only-if-cached<\/code><\/p>\n\n\n\n<ul>\n<li>default &nbsp;\u5982\u679c\u6709\u4e00\u4e2a\u65b0\u7684 (\u672a\u8fc7\u671f\u7684) \u5339\u914d\uff0c\u5219\u4f7f\u7528\u6d4f\u89c8\u5668\u7f13\u5b58\uff1b\u5982\u679c\u6ca1\u6709\uff0c\u6d4f\u89c8\u5668\u4f1a\u53d1\u51fa\u4e00\u4e2a\u5e26\u6761\u4ef6\u7684\u8bf7\u6c42\u6765\u68c0\u67e5\u8d44\u6e90\u662f\u5426\u5df2\u6539\u53d8\uff0c\u5e76\u5728\u5fc5\u8981\u65f6\u4f1a\u53d1\u51fa\u65b0\u7684\u8bf7\u6c42<\/li>\n\n\n\n<li><code>no-store<\/code>\uff1a\u603b\u662f\u53d1\u9001\u6b63\u5e38\u8bf7\u6c42\uff0c\u4e14\u4e0d\u7f13\u5b58\u4efb\u4f55\u8bf7\u6c42<\/li>\n\n\n\n<li><code>reload<\/code>\uff1a\u603b\u662f\u53d1\u9001\u6b63\u5e38\u8bf7\u6c42\uff08\u4e0d\u68c0\u67e5\u7f13\u5b58\uff09\uff0c\u518d\u7528\u8bf7\u6c42\u7ed3\u679c\u66f4\u65b0\u7f13\u5b58<\/li>\n\n\n\n<li><code style=\"background-color: rgb(248, 248, 250); border-radius: 3px; font-family: Menlo, Monaco, Consolas, &quot;Andale Mono&quot;, &quot;lucida console&quot;, &quot;Courier New&quot;, monospace; font-size: 0.9em; margin: 0px 2px; padding: 3px 4px; color: rgb(25, 27, 31); white-space-collapse: collapse;\"><a class=\"RichContent-EntityWord css-b7erz1\" data-za-not-track-link=\"true\" data-paste-text=\"true\" style=\"color: rgb(9, 64, 142); text-decoration-line: none; text-decoration-thickness: initial; cursor: pointer;\" href=\"https:\/\/www.zhihu.com\/search?q=no-cache&amp;search_source=Entity&amp;hybrid_search_source=Entity&amp;hybrid_search_extra=%7B%22sourceType%22%3A%22answer%22%2C%22sourceId%22%3A2169249853%7D\" target=\"_blank\" rel=\"noopener\">no-cache<svg width=\"10px\" height=\"10px\" viewBox=\"0 0 15 15\" class=\"css-1dvsrp\"><path d=\"M10.89 9.477l3.06 3.059a1 1 0 0 1-1.414 1.414l-3.06-3.06a6 6 0 1 1 1.414-1.414zM6 10a4 4 0 1 0 0-8 4 4 0 0 0 0 8z\" fill=\"currentColor\"><\/path><\/svg><\/a><\/code><span style=\"color: rgb(25, 27, 31); font-family: -apple-system, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Source Han Sans SC&quot;, &quot;Noto Sans CJK SC&quot;, &quot;WenQuanYi Micro Hei&quot;, sans-serif; font-size: 15px; white-space-collapse: collapse;\">\uff1a\u6709\u7f13\u5b58\u5219\u53d1\u9001\u6761\u4ef6\u8bf7\u6c42\u3001\u65e0\u7f13\u5b58\u5219\u53d1\u9001\u6b63\u5e38\u8bf7\u6c42\uff0c\u518d\u7528\u8bf7\u6c42\u7ed3\u679c\u66f4\u65b0\u7f13\u5b58<\/span><\/li>\n\n\n\n<li><code><a href=\"https:\/\/www.zhihu.com\/search?q=force-cache&amp;search_source=Entity&amp;hybrid_search_source=Entity&amp;hybrid_search_extra=%7B%22sourceType%22%3A%22answer%22%2C%22sourceId%22%3A2169249853%7D\" target=\"_blank\" rel=\"noreferrer noopener\">force-cache<\/a><\/code>\uff1a\u6709\u7f13\u5b58\u5219\u5f3a\u5236\u4f7f\u7528\u7f13\u5b58\uff08\u4e0d\u53d1\u9001\u4efb\u4f55\u8bf7\u6c42\uff09\u3001\u65e0\u7f13\u5b58\u5219\u53d1\u9001\u6b63\u5e38\u8bf7\u6c42\u518d\u7528\u8bf7\u6c42\u7ed3\u679c\u66f4\u65b0\u7f13\u5b58<\/li>\n\n\n\n<li><code><a href=\"https:\/\/www.zhihu.com\/search?q=only-if-cached&amp;search_source=Entity&amp;hybrid_search_source=Entity&amp;hybrid_search_extra=%7B%22sourceType%22%3A%22answer%22%2C%22sourceId%22%3A2169249853%7D\" target=\"_blank\" rel=\"noreferrer noopener\">only-if-cached<\/a><\/code>\uff1a\u4ec5\u5728\u8bf7\u6c42\u6a21\u5f0f\u4e3a&nbsp;<code>mode=\"same-origin\"<\/code>&nbsp;\u6709\u6548\uff1b\u5728\u4e0d\u4e0e&nbsp;<code>mode=\"same-origin\"<\/code>&nbsp;\u51b2\u7a81\u7684\u60c5\u51b5\u4e0b\uff0c\u5f53\u91cd\u5b9a\u5411\u6a21\u5f0f\u4e3a&nbsp;<code>redirect=\"follow\"<\/code>&nbsp;\u65f6\uff0c\u82e5\u53d1\u751f\u91cd\u5b9a\u5411\uff0c\u4e14\u8be5\u91cd\u5b9a\u5411\u6307\u5411\u7684\u8bf7\u6c42\u6709\u7f13\u5b58\uff0c\u5219\u8be5\u8bf7\u6c42\u540c\u6837\u4e5f\u9075\u5faa\u8be5\u7f13\u5b58\u6a21\u5f0f<\/li>\n<\/ul>\n\n\n\n<p>redirect<\/p>\n\n\n\n<p>\u8bf7\u6c42\u88ab\u91cd\u5b9a\u5411\u65f6\u7684\u5904\u7406\u7b56\u7565<\/p>\n\n\n\n<ul>\n<li><code>follow<\/code>&nbsp;(\u81ea\u52a8\u91cd\u5b9a\u5411)<\/li>\n\n\n\n<li>&nbsp;<code>error<\/code>&nbsp;(\u5982\u679c\u4ea7\u751f\u91cd\u5b9a\u5411\u5c06\u81ea\u52a8\u7ec8\u6b62\u5e76\u4e14\u629b\u51fa\u4e00\u4e2a\u9519\u8bef\uff09<\/li>\n\n\n\n<li><code>manual<\/code>&nbsp;(\u624b\u52a8\u5904\u7406\u91cd\u5b9a\u5411)<\/li>\n<\/ul>\n\n\n\n<p>referrer<\/p>\n\n\n\n<p>\u6307\u5b9a\u8bf7\u6c42\u7684\u6765\u6e90,\u4e00\u4e2a&nbsp;<a href=\"https:\/\/developer.mozilla.org\/zh-CN\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/String\"><code>USVString<\/code><\/a>&nbsp;\u53ef\u4ee5\u662f&nbsp;<code>no-referrer<\/code>\u3001<code>client<\/code>&nbsp;\u6216\u4e00\u4e2a URL\u3002\u9ed8\u8ba4\u662f&nbsp;<code>client<\/code><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>referrerPolicy<\/p>\n\n\n\n<p>&nbsp;\u6307\u5b9a\u4e86 HTTP \u5934\u90e8 referer \u5b57\u6bb5\u7684\u503c\u3002\u53ef\u80fd\u4e3a\u4ee5\u4e0b\u503c\u4e4b\u4e00\uff1a<code>no-referrer<\/code>\u3001&nbsp;<code>no-referrer-when-downgrade<\/code>\u3001<code>origin<\/code>\u3001<code>origin-when-cross-origin<\/code>\u3001&nbsp;<code>unsafe-url<\/code>\u3002<\/p>\n\n\n\n<p>\u6570\u636e\u6d41<\/p>\n\n\n\n<p>XMLHttpRequest \u5c06\u6574\u4e2a\u54cd\u5e94\u8bfb\u5165\u5185\u5b58\u7f13\u51b2\u533a\uff0c\u4f46\u662f fetch() \u53ef\u4ee5\u6d41\u5f0f\u4f20\u8f93\u8bf7\u6c42\u548c\u54cd\u5e94\u6570\u636e\uff0c\u8fd9\u662f\u4e00\u9879\u65b0\u6280\u672f\uff0c\u6d41\u5141\u8bb8\u4f60\u5728\u53d1\u9001\u6216\u63a5\u6536\u65f6\u5904\u7406\u66f4\u5c0f\u7684\u6570\u636e\u5757\u3002\u4f8b\u5982\uff0c\u4f60\u53ef\u4ee5\u5728\u5b8c\u5168\u4e0b\u8f7d\u524d\u5904\u7406\u6570\u5146\u5b57\u8282\u6587\u4ef6\u4e2d\u7684\u4fe1\u606f\uff0c\u4e0b\u9762\u7684\u793a\u4f8b\u5c06\u4f20\u5165\u7684\uff08\u4e8c\u8fdb\u5236\uff09\u6570\u636e\u5757\u8f6c\u6362\u4e3a\u6587\u672c\uff0c\u5e76\u5c06\u5176\u8f93\u51fa\u5230\u63a7\u5236\u53f0\u3002\u5728\u8f83\u6162\u7684\u8fde\u63a5\u4e0a\uff0c\u4f60\u4f1a\u770b\u5230\u66f4\u5c0f\u7684\u6570\u636e\u5757\u5728\u8f83\u957f\u7684\u65f6\u95f4\u5185\u5230\u8fbe<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const response = await fetch(\"\/service\"),\n  reader = response.body\n    .pipeThrough(new TextDecoderStream())\n    .getReader();\n\nwhile (true) {\n  const { value, done } = await reader.read();\n  if (done) break;\n  console.log(value);\n}\n<\/code><\/pre>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>XMLHttpRequest\u4f18\u52bf<\/p>\n\n\n\n<ul>\n<li>\u517c\u5bb9\u6027\u66f4\u597d\uff0c\u4e3b\u6d41\u6d4f\u89c8\u5668\u652f\u6301<\/li>\n\n\n\n<li>\u8d85\u65f6\u652f\u6301\uff0cXMLHttpRequest \u5bf9\u8c61\u63d0\u4f9b\u4e86\u4e00\u4e2a timeout \u5c5e\u6027\uff0c\u53ef\u4ee5\u5c06\u5176\u8bbe\u7f6e\u4e3a\u8bf7\u6c42\u81ea\u52a8\u7ec8\u6b62\u524d\u5141\u8bb8\u8fd0\u884c\u7684\u6beb\u79d2\u6570\uff1b\u5982\u679c\u8d85\u65f6\uff0c\u5c31\u89e6\u53d1\u4e00\u4e2a timeout \u4e8b\u4ef6\u6765\u5904\u7406<\/li>\n\n\n\n<li>\u8fdb\u5ea6\u652f\u6301\uff0c\u6211\u4eec\u53ef\u4ee5\u76d1\u63a7\u8bf7\u6c42\u7684\u8fdb\u5ea6\uff0c\u901a\u8fc7\u5c06\u4e00\u4e2a\u5904\u7406\u7a0b\u5e8f\u9644\u52a0\u5230 XMLHttpRequest \u5bf9\u8c61\u7684\u8fdb\u5ea6\u4e8b\u4ef6\u4e0a\u3002\u8fd9\u5728\u4e0a\u4f20\u5927\u6587\u4ef6\uff08\u5982\u7167\u7247\uff09\u65f6\u7279\u522b\u6709\u7528\uff1a<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>const xhr = new XMLHttpRequest();\r\n\r\n\/\/ progress event\r\nxhr.upload.onprogress = (p) => {\r\n  console.log(Math.round((p.loaded \/ p.total) * 100) + \"%\");\r\n};<\/code><\/pre>\n\n\n\n<ul>\n<li>\u7ec8\u6b62\u652f\u6301\uff0c\u8fd0\u884c\u4e2d\u7684\u8bf7\u6c42\u53ef\u4ee5\u901a\u8fc7 XMLHttpRequest \u7684 abort() \u65b9\u6cd5\u53d6\u6d88\uff0c\u5982\u6709\u5fc5\u8981\uff0c\u53ef\u4ee5\u9644\u52a0\u4e00\u4e2a abort \u4e8b\u4ef6\u6765\u5904\u7406\uff1a<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>const xhr = new XMLHttpRequest();\r\nxhr.open(\"GET\", \"\/service\");\r\nxhr.send();\r\n\r\n\/\/ ...\r\n\r\nxhr.onabort = () => console.log(\"aborted\");\r\nxhr.abort();<\/code><\/pre>\n\n\n\n<p>\u4f60\u53ef\u4ee5\u4e2d\u6b62\u4e00\u4e2a fetch()\uff0c\u4f46\u5b83\u4e0d\u662f\u90a3\u4e48\u76f4\u63a5\uff0c\u9700\u8981\u4e00\u4e2a AbortController \u5bf9\u8c61\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const controller = new AbortController();\r\n\r\nfetch(\"\/service\", {\r\n  method: \"GET\",\r\n  signal: controller.signal,\r\n})\r\n  .then((res) => res.json())\r\n  .then((json) => console.log(json))\r\n  .catch((error) => console.error(\"Error:\", error));\r\n\r\n\/\/ abort request\r\ncontroller.abort();<\/code><\/pre>\n\n\n\n<ul>\n<li>\u66f4\u663e\u5f0f\u7684\u6545\u969c\u68c0\u6d4b: \u5f53\u5f00\u53d1\u4eba\u5458\u7b2c\u4e00\u6b21\u4f7f\u7528 fetch() \u65f6\uff0c\u5047\u8bbe\u4e00\u4e2a HTTP \u9519\u8bef\uff0c\u5982 404 Not Found \u6216 500 Internal Server error \u5c06\u89e6\u53d1 Promise \u62d2\u7edd\u5e76\u8fd0\u884c\u76f8\u5173\u7684 catch() \u5757\uff0c\u8fd9\u4f3c\u4e4e\u662f\u5408\u4e4e\u903b\u8f91\u7684\uff0c\u4f46\u4e8b\u5b9e\u5e76\u975e\u5982\u6b64\uff1aPromise \u6210\u529f\u5730\u89e3\u51b3\u4e86\u8fd9\u4e9b\u54cd\u5e94\uff0c\u53ea\u6709\u5f53\u7f51\u7edc\u6ca1\u6709\u54cd\u5e94\u6216\u8bf7\u6c42\u88ab\u4e2d\u65ad\u65f6\uff0c\u624d\u4f1a\u53d1\u751f\u62d2\u7edd\u3002fetch() \u7684 Response \u5bf9\u8c61\u63d0\u4f9b\u4e86 status \u548c ok \u5c5e\u6027\uff0c\u4f46\u5e76\u4e0d\u603b\u662f\u663e\u5f0f\u5730\u9700\u8981\u68c0\u67e5\u5b83\u4eec\uff0cXMLHttpRequest \u66f4\u660e\u786e\uff0c\u56e0\u4e3a\u5355\u4e2a\u56de\u8c03\u51fd\u6570\u5904\u7406\u6bcf\u4e00\u4e2a\u7ed3\u679c\uff1a\u4f60\u5e94\u8be5\u5728\u6bcf\u4e2a\u793a\u4f8b\u4e2d\u90fd\u770b\u5230 stuatus \u68c0\u67e5<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>XMLHttpRequest \u76ee\u524d\u5e38\u89c1\u7684\u4e3b\u6d41\u6d4f\u89c8\u5668\u5ea6\u652f\u6301XMLHttpRequest\uff0c\u4e0b\u9762\u5217\u4e3e\u4e00\u4e2a\u5e38\u89c1\u7684\u8bf7\u6c42\u793a\u4f8b\uff1a onreadystatechange \u56de\u8c03\u51fd\u6570\u5728\u8bf7\u6c42\u7684\u751f\u547d\u5468\u671f\u4e2d\u8fd0\u884c\u597d\u51e0\u6b21\uff1bXMLHttpRequest \u5bf9\u8c61\u7684 readyState \u5c5e\u6027\u5219\u8fd4\u56de\u5f53\u524d\u72b6\u6001\uff1a onreadystatechange \u5f53readyState\u5c5e\u6027\u53d1\u751f\u53d8\u5316\u65f6\uff0c\u4f1a\u8c03\u7528&nbsp;onreadystatechange\u51fd\u6570 status \u8fd4\u56de\u7684\u72b6\u6001\u7801 statusText \u8fd4\u56de\u7684\u72b6\u6001 response \u54cd\u5e94\u5185\u5bb9\uff0c\u6570\u636e\u7c7b\u578b\u901a\u8fc7responseType\u5b9a\u4e49 responseType \u503c \u63cf\u8ff0 \u4e3a\u7a7a\u65f6\uff0c\u9ed8\u8ba4\u548ctext\u76f8\u540c arraybuffer response\u662f\u4e00\u4e2a ArrayBuffer \u5bf9\u8c61 blob response\u662f\u4e00\u4e2a Blob \u5bf9\u8c61 document response\u662f\u4e00\u4e2aHTML Document \u6216\u8005 XML Document json response\u662f\u4e00\u4e2ajs\u5bf9\u8c61 text response\u662f\u4e00\u4e2aDOMString`\u5bf9\u8c61 timeout \u8bbe\u7f6e\u8bf7\u6c42\u8d85\u65f6\u65f6\u95f4\uff0c\u5f53\u8d85\u65f6\u53d1\u751f\u540e\uff0c\u8bf7\u6c42\u7684readyState\u4f1a\u53d8\u4e3a4\uff08DONE\uff09,&nbsp;status\u7531\u5df2\u63a5\u53d7\u5230\u7684200\u53d8\u4e3a0\uff0crespose\u7f6e\u4e3a\u7a7a\u3002\u89e6\u53d1timeout\u4e8b\u4ef6\u3002 withCredentials \u9ed8\u8ba4\u503c\u662ffalse\uff0c\u5728\u8de8\u57df\u8bf7\u6c42\u65f6\uff0c\u4e0d\u643a\u5e26cookie\uff0c\u4e14\u54cd\u5e94\u7684Set-Cookie\u4e0d\u751f\u6548\u3002\u8bbe\u7f6e\u4e3atrue\u65f6\uff0c\u8de8\u57df\u8bf7\u6c42\u4f1a\u5e26\u4e0acookie\uff0c\u4e14\u54cd\u5e94\u7684Set-Cookie\u4f1a\u751f\u6548\u3002\u5bf9\u540c\u6e90\u8bf7\u6c42\uff0c\u8be5\u5c5e\u6027\u4e0d\u751f\u6548\u3002 \u6ce8\u610f\uff1a setRequestHeader \u8bbe\u7f6eHTTP\u8bf7\u6c42\u5934\uff0c\u9700\u8981\u5728open()\u51fd\u6570\u8c03\u7528\u548csend()\u51fd\u6570\u8c03\u7528\u4e4b\u95f4\u8c03\u7528\u3002 \u8003\u8651\u5230\u5b89\u5168\u95ee\u9898\uff0c\u6d4f\u89c8\u5668\u4f1a\u7981\u6b62\u7528\u6237\u8bbe\u7f6e\u67d0\u4e9b\u8bf7\u6c42\u5934\u3002\u88ab\u7981\u6b62\u7684\u8bf7\u6c42\u5934\u5305\u62ec getResponseHeader \u83b7\u53d6HTTP\u54cd\u5e94\u5934 Fetch Fetch\u662f\u4e00\u4e2a\u5168\u5c40\u51fd\u6570\uff0c\u7528\u6765\u4ece\u7f51\u7edc\u4e0a\u83b7\u53d6\u8d44\u6e90\uff0c\u5177\u6709\u4e24\u4e2a\u53c2\u6570resource,init\u3002\u8fd4\u56de\u7ed3\u679c\u662fPromise\uff0c\u8bf7\u6c42\u7ed3\u675f\u65f6\uff0c\u8fd4\u56deResponse\u5bf9\u8c61\u3002 Fetch \u662f\u4e00\u4e2a\u73b0\u4ee3\u57fa\u4e8e promise \u7684 Ajax \u8bf7\u6c42 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[],"_links":{"self":[{"href":"http:\/\/icpnet.cn\/index.php?rest_route=\/wp\/v2\/posts\/25"}],"collection":[{"href":"http:\/\/icpnet.cn\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/icpnet.cn\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/icpnet.cn\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/icpnet.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=25"}],"version-history":[{"count":3,"href":"http:\/\/icpnet.cn\/index.php?rest_route=\/wp\/v2\/posts\/25\/revisions"}],"predecessor-version":[{"id":28,"href":"http:\/\/icpnet.cn\/index.php?rest_route=\/wp\/v2\/posts\/25\/revisions\/28"}],"wp:attachment":[{"href":"http:\/\/icpnet.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=25"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/icpnet.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=25"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/icpnet.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=25"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}