[{"_1":2,"_990":-5,"_991":-5},"loaderData",{"_3":4,"_49":50},"root",{"_5":6},"clerkState",{"_7":8},"__internal_clerk_state",{"_9":10,"_20":21,"_22":23,"_24":23,"_25":26,"_27":23,"_28":23,"_29":23,"_30":23,"_31":23,"_32":23,"_33":23,"_34":23,"_35":36,"_45":23,"_46":23,"_47":26,"_48":26},"__clerk_ssr_state",{"_11":-5,"_12":-5,"_13":-5,"_14":-5,"_15":-5,"_16":-5,"_17":-5,"_18":-5,"_19":-5},"sessionClaims","sessionId","userId","actor","orgId","orgRole","orgSlug","orgPermissions","factorVerificationAge","__publishableKey","pk_live_Y2xlcmsucXVlc3Rpb25zLnZpc3VhbGl6ZWl0LmFwcCQ","__proxyUrl","","__domain","__isSatellite",false,"__signInUrl","__signUpUrl","__afterSignInUrl","__afterSignUpUrl","__signInForceRedirectUrl","__signUpForceRedirectUrl","__signInFallbackRedirectUrl","__signUpFallbackRedirectUrl","__clerk_debug",{"_37":26,"_38":23,"_39":40,"_41":23,"_42":21,"_43":26,"_44":23},"isSignedIn","proxyUrl","reason","session-token-and-uat-missing","message","publishableKey","isSatellite","domain","__clerkJSUrl","__clerkJSVersion","__telemetryDisabled","__telemetryDebug","routes/_index",{"_51":52,"_986":987},"questions",[53,186,209,248,287,310,332,359,383,410,434,458,482,513,540,575,598,622,646,670,694,718,742,765,789,816,843,867,891,914,938,962],{"_54":55,"_56":57,"_58":59,"_60":61,"_62":63,"_64":65,"_66":67,"_68":69,"_70":71,"_72":73,"_74":75,"_107":108,"_127":128,"_129":26,"_130":-5,"_131":132,"_133":134,"_155":148,"_149":156,"_151":157,"_154":-5,"_158":159,"_160":161,"_165":-5,"_166":167,"_168":169,"_180":181,"_182":-5,"_183":-5,"_184":185},"url","https://api.github.com/repos/pro-collection/interview-question/issues/893","repository_url","https://api.github.com/repos/pro-collection/interview-question","labels_url","https://api.github.com/repos/pro-collection/interview-question/issues/893/labels{/name}","comments_url","https://api.github.com/repos/pro-collection/interview-question/issues/893/comments","events_url","https://api.github.com/repos/pro-collection/interview-question/issues/893/events","html_url","https://github.com/pro-collection/interview-question/issues/893","id",2529877298,"node_id","I_kwDOJGDC6c6Wyt0y","number",893,"title","http 常见的几个重定向 code 是多少，区别是啥【热度: 172】","user",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"login","yanlele",22188674,"MDQ6VXNlcjIyMTg4Njc0","avatar_url","https://avatars.githubusercontent.com/u/22188674?v=4","gravatar_id","https://api.github.com/users/yanlele","https://github.com/yanlele","followers_url","https://api.github.com/users/yanlele/followers","following_url","https://api.github.com/users/yanlele/following{/other_user}","gists_url","https://api.github.com/users/yanlele/gists{/gist_id}","starred_url","https://api.github.com/users/yanlele/starred{/owner}{/repo}","subscriptions_url","https://api.github.com/users/yanlele/subscriptions","organizations_url","https://api.github.com/users/yanlele/orgs","repos_url","https://api.github.com/users/yanlele/repos","https://api.github.com/users/yanlele/events{/privacy}","received_events_url","https://api.github.com/users/yanlele/received_events","type","User","user_view_type","public","site_admin","labels",[109,120],{"_66":110,"_68":111,"_54":112,"_113":114,"_115":116,"_117":26,"_118":119},5232529101,"LA_kwDOJGDC6c8AAAABN-IOzQ","https://api.github.com/repos/pro-collection/interview-question/labels/%E7%BD%91%E7%BB%9C","name","网络","color","1A8829","default","description","web 网络相关",{"_66":121,"_68":122,"_54":123,"_113":124,"_115":125,"_117":26,"_118":126},5342931240,"LA_kwDOJGDC6c8AAAABPnapKA","https://api.github.com/repos/pro-collection/interview-question/labels/%E7%BE%8E%E5%9B%A2","美团","ededed","公司标签","state","open","locked","assignee","assignees",[],"milestone",{"_54":135,"_64":136,"_58":137,"_66":138,"_68":139,"_70":140,"_72":141,"_118":142,"_143":144,"_145":146,"_147":148,"_127":128,"_149":150,"_151":152,"_153":-5,"_154":-5},"https://api.github.com/repos/pro-collection/interview-question/milestones/2","https://github.com/pro-collection/interview-question/milestone/2","https://api.github.com/repos/pro-collection/interview-question/milestones/2/labels",9124545,"MI_kwDOJGDC6c4AizrB",2,"中","中级程序面试问题","creator",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"open_issues",491,"closed_issues",0,"created_at","2023-03-06T15:00:15Z","updated_at","2025-02-10T16:32:39Z","due_on","closed_at","comments","2024-09-17T03:01:27Z","2024-09-17T03:01:28Z","author_association","MEMBER","sub_issues_summary",{"_162":148,"_163":148,"_164":148},"total","completed","percent_completed","active_lock_reason","body","**关键词**：http 重定向 code\n\nHTTP 重定向是指当客户端访问一个页面时，服务器返回一个重定向状态码，告诉客户端去访问另一个 URL。常见的 HTTP 重定向状态码有以下几种，每个状态码都有其特定的意义和使用场景：\n\n### 1. **301 Moved Permanently（永久移动）**\n\n- **含义**：请求的资源已被永久移动到新位置，未来任何对此资源的引用都应使用返回的新 URI。\n- **使用场景**：当你永久性地更改了网页的 URL 地址，比如网站改版后结构变化导致 URL 变更。\n\n### 2. **302 Found（临时移动）/ 307 Temporary Redirect**\n\n- **含义（302）**：请求的资源临时移到了新的 URI 下，客户端应继续使用原有 URI。\n- **含义（307）**：与 302 类似，资源临时从不同的 URI 访问，但保证请求方法（如 POST）不变，307 在 HTTP/1.1 中引入，以明确分清与 302 的本意不同。\n- **使用场景**：当资源或页面需要临时性地从不同的 URI 访问时使用，且期望方法和消息主体不改变（特别适用 307）。\n\n### 3. **303 See Other（查看其他位置）**\n\n- **含义**：这个状态码用于重定向，目的是让客户端访问新 URI 并使用 GET 方法获取资源，无论原始请求是什么方法。\n- **使用场景**：通常用于处理表单提交后的重定向，以避免刷新页面时重复提交表单。\n\n### 4. **308 Permanent Redirect（永久重定向）**\n\n- **含义**：类似于 301，但它禁止改变请求的方法。因此，例如，应用在一个 POST 请求上时，接下来的请求仍然是一个 POST 请求。\n- **使用场景**：对于需要保留相同 HTTP 方法（如 POST）情况下的永久重定向。\n\n### 区分 301/302 与 307/308\n\n- **301 和 308**：这两个状态码表示资源已被永久移动。区别在于 308 要求后续请求使用与原始请求相同的方法。\n- **302 和 307**：这两个状态码表示资源临时移动。区别在于 307 明确规定客户端后续请求应使用与原始请求相同的方法，而 302 没有这样的强制规定，但在实际使用中客户端一般会将 POST 请求改变为 GET 请求，从而在一些情况下可能与预期不符。\n","reactions",{"_54":170,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/893/reactions","total_count","+1","-1","laugh","hooray","confused","heart","rocket","eyes","timeline_url","https://api.github.com/repos/pro-collection/interview-question/issues/893/timeline","performed_via_github_app","state_reason","score",1,{"_54":187,"_56":57,"_58":188,"_60":189,"_62":190,"_64":191,"_66":192,"_68":193,"_70":194,"_72":195,"_74":196,"_107":197,"_127":128,"_129":26,"_130":-5,"_131":200,"_133":201,"_155":148,"_149":203,"_151":203,"_154":-5,"_158":159,"_160":204,"_165":-5,"_166":205,"_168":206,"_180":208,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/892","https://api.github.com/repos/pro-collection/interview-question/issues/892/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/892/comments","https://api.github.com/repos/pro-collection/interview-question/issues/892/events","https://github.com/pro-collection/interview-question/issues/892",2529873699,"I_kwDOJGDC6c6Wys8j",892,"http 的请求和响应都有哪些传输数据格式【热度: 149】",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[198,199],{"_66":110,"_68":111,"_54":112,"_113":114,"_115":116,"_117":26,"_118":119},{"_66":121,"_68":122,"_54":123,"_113":124,"_115":125,"_117":26,"_118":126},[],{"_54":135,"_64":136,"_58":137,"_66":138,"_68":139,"_70":140,"_72":141,"_118":142,"_143":202,"_145":146,"_147":148,"_127":128,"_149":150,"_151":152,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2024-09-17T02:57:39Z",{"_162":148,"_163":148,"_164":148},"**关键词**：http 传输格式\n\nHTTP（超文本传输协议）是一种用于传输超媒体文档（如 HTML）的应用层协议。在 HTTP 请求和响应中，可以传输多种数据格式。这些数据格式主要通过 HTTP 头部中的`Content-Type`字段来指定。下面是一些常见的 HTTP 传输数据格式：\n\n### 1. 文本格式\n\n- **`text/plain`**：纯文本格式，不包含任何格式化。\n- **`text/html`**：HTML 格式，用于网页。\n- **`text/css`**：层叠样式表（CSS）格式，用于样式信息。\n- **`text/javascript`**（或`application/javascript`）：JavaScript 代码。\n\n### 2. 应用格式\n\n- **`application/json`**：JSON（JavaScript Object Notation）格式，常用于 Web 应用中的数据交换。\n- **`application/xml`**：XML（可扩展标记语言）格式，类似于 HTML 但更加通用，也用于数据交换。\n- **`application/x-www-form-urlencoded`**：这是 HTML 表单提交时最常用的编码格式，键值对都被编码为键=值对，并且使用`&`字符分隔。\n- **`application/form-data`**：常用于文件上传。在表单数据被编码为一系列键值对时使用，每对键值对都表示为一个表单部分。\n- **`application/octet-stream`**：任意的二进制数据。通常用于下载或上传文件。\n\n### 3. 图像格式\n\n- **`image/png`**：PNG 图像格式。\n- **`image/jpeg`**：JPEG 图像格式。\n- **`image/gif`**：GIF 图像格式。\n- **`image/webp`**：WebP 图像格式，提供了比 JPEG 更好的压缩。\n\n### 4. 音视频格式\n\n- **`audio/mpeg`**：MP3 音频格式。\n- **`audio/ogg`**：Ogg 音频格式。\n- **`video/mp4`**：MP4 视频格式。\n- **`video/webm`**：WebM 视频格式，提供高质量的视频压缩。\n\n### 5. 字体格式\n\n- **`font/woff`**：Web 开放字体格式。\n- **`font/woff2`**：Web 开放字体格式的第二版，较 WOFF 更加高效。\n",{"_54":207,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/892/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/892/timeline",{"_54":210,"_56":57,"_58":211,"_60":212,"_62":213,"_64":214,"_66":215,"_68":216,"_70":217,"_72":218,"_74":219,"_107":220,"_127":128,"_129":26,"_130":-5,"_131":227,"_133":228,"_155":148,"_149":241,"_151":242,"_154":-5,"_158":159,"_160":243,"_165":-5,"_166":244,"_168":245,"_180":247,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/891","https://api.github.com/repos/pro-collection/interview-question/issues/891/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/891/comments","https://api.github.com/repos/pro-collection/interview-question/issues/891/events","https://github.com/pro-collection/interview-question/issues/891",2529871150,"I_kwDOJGDC6c6WysUu",891,"发送请求的时候， method = OPTIONS 是什么请求【热度: 717】",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[221,222],{"_66":110,"_68":111,"_54":112,"_113":114,"_115":116,"_117":26,"_118":119},{"_66":223,"_68":224,"_54":225,"_113":226,"_115":125,"_117":26,"_118":126},5326133419,"LA_kwDOJGDC6c8AAAABPXZYqw","https://api.github.com/repos/pro-collection/interview-question/labels/%E5%B0%8F%E7%B1%B3","小米",[],{"_54":229,"_64":230,"_58":231,"_66":232,"_68":233,"_70":234,"_72":235,"_118":236,"_143":237,"_145":238,"_147":148,"_127":128,"_149":239,"_151":240,"_153":-5,"_154":-5},"https://api.github.com/repos/pro-collection/interview-question/milestones/3","https://github.com/pro-collection/interview-question/milestone/3","https://api.github.com/repos/pro-collection/interview-question/milestones/3/labels",9124547,"MI_kwDOJGDC6c4AizrD",3,"高","高级别面试问题",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},425,"2023-03-06T15:00:27Z","2025-02-10T16:49:33Z","2024-09-17T02:54:39Z","2024-09-17T02:54:40Z",{"_162":148,"_163":148,"_164":148},"**关键词**：预检请求\n\n当看到 method 为 `OPTIONS` 的请求时，这是一个 HTTP OPTIONS 请求。OPTIONS 请求是 HTTP/1.1 协议中定义的一种方法，用于获取目的资源（服务器）支持的通信选项。这种请求主要被用于 CORS（Cross-Origin Resource Sharing，跨域资源共享）预检请求，在真正的跨域请求被发送之前执行。\n\n### 作用和目的\n\n- **确定服务器的支持性**：客户端通过发送一个 OPTIONS 请求来确定服务器支持的 HTTP 方法（如 GET、POST、DELETE 等）。\n- **CORS 预检请求**：在发送实际的跨域请求前，浏览器会自动发出一个 OPTIONS 预检请求，询问目标资源的服务器是否允许该跨域请求。这个步骤用来确保安全，避免非法站点调用敏感资源。\n\n### CORS 预检请求内容\n\n在 CORS 上下文中，OPTIONS 请求会包含一些 HTTP 头，指明了实际请求将会使用哪些 HTTP 方法和头部。服务器响应该请求时会指明允许的方法、头部和是否允许带有凭证的请求（如 Cookies）。重要的 HTTP 头包括：\n\n- **`Access-Control-Request-Method`**：在预检请求中，这个头部告诉服务器实际请求将使用的 HTTP 方法是什么。\n\n- **`Access-Control-Request-Headers`**：当实际请求中需要携带额外的头部时，这个字段会列出它们。\n\n- **`Access-Control-Allow-Methods`**：在响应中，这个头部告诉客户端服务器允许的方法。\n\n- **`Access-Control-Allow-Headers`**：在响应中，这个头部告诉客户端服务器允许的头部。\n\n- **`Access-Control-Allow-Origin`**：这个头部指明了哪些源可以访问该资源。如果服务器支持请求的源，则会在响应中包含这个头部。\n\n### 示例\n\n当您的 Web 应用尝试从另一个域名（源）的服务器获取资源时，浏览器会首先发起一个 OPTIONS 请求。例如，如果您的前端应用运行在 `http://example.com` 并尝试通过 AJAX 请求 `http://api.example.com/data`，浏览器会先发送 OPTIONS 请求到 `http://api.example.com/data`。服务器响应该请求后，如果允许此类请求，则浏览器会继续发起实际的 GET/POST/等请求；如果不允许，则停止请求。\n\n总的来说，OPTIONS 请求是 HTTP 规范的一部分，它是 CORS 预检机制中非常重要的一步，用于在实际跨域请求发出之前确定通信的可能性和条件。\n",{"_54":246,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/891/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/891/timeline",{"_54":249,"_56":57,"_58":250,"_60":251,"_62":252,"_64":253,"_66":254,"_68":255,"_70":256,"_72":257,"_74":258,"_107":259,"_127":128,"_129":26,"_130":-5,"_131":266,"_133":267,"_155":148,"_149":280,"_151":281,"_154":-5,"_158":159,"_160":282,"_165":-5,"_166":283,"_168":284,"_180":286,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/875","https://api.github.com/repos/pro-collection/interview-question/issues/875/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/875/comments","https://api.github.com/repos/pro-collection/interview-question/issues/875/events","https://github.com/pro-collection/interview-question/issues/875",2526771056,"I_kwDOJGDC6c6Wm3dw",875,"请求数量过多，该如何治理【热度: 418】",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[260,261],{"_66":110,"_68":111,"_54":112,"_113":114,"_115":116,"_117":26,"_118":119},{"_66":262,"_68":263,"_54":264,"_113":265,"_115":125,"_117":26,"_118":126},5312231007,"LA_kwDOJGDC6c8AAAABPKI2Xw","https://api.github.com/repos/pro-collection/interview-question/labels/%E9%98%BF%E9%87%8C%E5%B7%B4%E5%B7%B4","阿里巴巴",[],{"_54":268,"_64":269,"_58":270,"_66":271,"_68":272,"_70":273,"_72":274,"_118":275,"_143":276,"_145":277,"_147":148,"_127":128,"_149":278,"_151":279,"_153":-5,"_154":-5},"https://api.github.com/repos/pro-collection/interview-question/milestones/4","https://github.com/pro-collection/interview-question/milestone/4","https://api.github.com/repos/pro-collection/interview-question/milestones/4/labels",9124550,"MI_kwDOJGDC6c4AizrG",4,"资深","资深级别面试问题",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},48,"2023-03-06T15:00:45Z","2024-10-07T08:15:55Z","2024-09-15T06:53:53Z","2024-09-17T12:30:56Z",{"_162":148,"_163":148,"_164":148},"**关键词**：治理请求数量\r\n\r\n> 作者备注 \r\n> 很多同学我有 http2 ，可以多路复用，所以请求再多都不会影响页面性能。实际上是错误的。\r\n> 在作者知道的很多超大型项目（千万行级别的项目）里面，太多的网络并发（首屏可能就有好大几百的请求发出去），会因为 IO 问题到时吃掉很多的 CPU 与网络带宽，用户依然会觉得非常的卡顿。\r\n> 所以这个话题是非常有意义的。但是实际中遇到请求过多的问题，场景是非常少的。\r\n> 目前作者暂定该问题级别为「资深」\r\n> 而且该问题没有一个准确的答案，作者在这里知识提供干一些思路。\r\n\r\n**1. 常量请求做本地内存存储**\r\n\r\n不是使用 https 缓存，而是直接存一个 promise 在浏览器内存里面。保证整个系统里面，请求只调用一次。\r\n\r\n对于一些数据不经常变化的请求，例如用户信息、配置数据等，可以将请求的结果缓存起来。下一次请求相同的资源时，先从缓存中读取数据，如果缓存有效，则无需再发起新的网络请求。\r\n\r\n思路类似于下面这张图\r\n![img](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b6ce7486c01f451684160a7738c6417e~tplv-k3u1fbpfcp-jj-mark:3024:0:0:0:q75.awebp#?w=1103&h=401&s=57837&e=png&b=fdfdfd)\r\n\r\n要达到这样的效果，可以设计一个请求缓存管理器，来管理并发的请求。如果有相同的请求（URL、参数、方法相同）时，只发起一次网络调用，然后将结果分发给所有等待的请求。这种模式通常可以通过一个简单的缓存对象来实现，该对象将请求的唯一标识作为键，对应的 Promise 作为值。\r\n\r\n以下是一个基本实现的示例：\r\n\r\n```javascript\r\nclass RequestCache {\r\n constructor() {\r\n this.cache = new Map();\r\n }\r\n\r\n // 生成请求的唯一标识符，这里仅以 URL 和 Method 为例，实际可能需要包括请求体等\r\n generateKey(url, method) {\r\n return `${method}:${url}`;\r\n }\r\n\r\n // 执行请求的方法，接受 fetch 的所有参数\r\n request(url, options = {}) {\r\n const { method = \"GET\" } = options;\r\n const key = this.generateKey(url, method);\r\n\r\n // 检查缓存中是否有相同的请求\r\n if (this.cache.has(key)) {\r\n return this.cache.get(key);\r\n }\r\n\r\n // 没有相同的请求，发起新的请求\r\n const requestPromise = fetch(url, options)\r\n .then((response) => response.json())\r\n .then((data) => {\r\n // 请求成功后，将其从缓存中移除\r\n this.cache.delete(key);\r\n return data;\r\n })\r\n .catch((error) => {\r\n // 请求失败也应该从缓存中移除\r\n this.cache.delete(key);\r\n throw error;\r\n });\r\n\r\n // 将新的请求 Promise 保存在缓存中\r\n this.cache.set(key, requestPromise);\r\n\r\n return requestPromise;\r\n }\r\n}\r\n\r\n// 使用示例\r\nconst cache = new RequestCache();\r\nconst URL = \"https://api.example.com/data\";\r\n\r\n// 假设这三个请求几乎同时发起\r\ncache.request(URL).then((data) => console.log(\"请求1:\", data));\r\ncache.request(URL).then((data) => console.log(\"请求2:\", data));\r\ncache.request(URL).then((data) => console.log(\"请求3:\", data));\r\n```\r\n\r\n这个简单的 `RequestCache` 类通过一个内部的 `Map` 对象管理缓存的请求。当一个新的请求发起时，它会首先检查是否已经有相同的请求存在。如果已存在，那么它只返回先前请求的 Promise；如果不存在，它会发起一个新的网络请求，并将请求的 Promise 存储在缓存中，直到请求完成（无论是成功还是失败）之后，再将其从缓存中移除。\r\n\r\n请注意，这里的示例非常基础，且主要用于说明如何缓存并复用请求的结果。在实际应用中，你可能还需要考虑更多细节，比如如何更精细地处理 POST 请求的请求体内容、如何设置缓存的过期时间、错误处理策略、缓存大小限制等。\r\n\r\n**推荐参考文档**： https://juejin.cn/post/7341840038964363283\r\n\r\n**2. 合并请求**\r\n\r\n对于多个小请求，特别是对同一个服务器或 API 的调用，考虑将它们合并为一个较大的请求。例如，如果有多个 API 分别获取用户信息、用户订单、用户地址等，可以考虑后端提供一个合并接口，一次性返回所有所需数据。\r\n\r\n**3. 使用 Web 缓存**\r\n\r\n- **浏览器缓存**：利用 HTTP 缓存头控制静态资源（CSS、JS、图片）的缓存策略，减少重复请求。\r\n- **数据缓存**：对于 AJAX 请求的响应，可以在前端进行数据缓存，避免短时间内对相同资源的重复请求。\r\n\r\n**4. 延迟加载（懒加载）**\r\n\r\n对于非首屏必须的资源（如图片、视频、长列表等），可以采用延迟加载或懒加载的方式，只有当用户滚动到相应位置时才加载这些内容，减少初次加载时的请求数量。\r\n\r\n**5. 使用服务工作线程（Service Workers）**\r\n\r\n通过 Service Workers 可以拦截和缓存网络请求，实现离线体验，减少对服务器的请求。此外，Service Workers 还可以用于请求合并、请求失败的重试策略等。\r\n\r\n**6. 避免重复请求**\r\n\r\n在某些情况下，为了保证数据的实时性，前端可能会频繁地轮询服务器。可以通过设置合理的轮询间隔或采用基于 WebSocket 的实时数据推送方案，以减少请求次数。\r\n\r\n**7. 使用 GraphQL**\r\n\r\n对于 REST API 可能导致的过度取数据（over-fetching）或取少数据（under-fetching）问题，可以考虑使用 GraphQL。GraphQL 允许客户端准确指定所需数据的结构，一次请求准确获取所需信息，减少无效数据的传输。\r\n\r\n**8. 防抖和节流**\r\n\r\n在处理连续的事件触发对后端的请求（如输入框实时搜索、窗口大小调整等）时，使用防抖（debouncing）和节流（throttling）技术可以限制触发请求的频率，减少不必要的请求量。\r\n",{"_54":285,"_171":185,"_172":185,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/875/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/875/timeline",{"_54":288,"_56":57,"_58":289,"_60":290,"_62":291,"_64":292,"_66":293,"_68":294,"_70":295,"_72":296,"_74":297,"_107":298,"_127":128,"_129":26,"_130":-5,"_131":301,"_133":302,"_155":148,"_149":304,"_151":304,"_154":-5,"_158":159,"_160":305,"_165":-5,"_166":306,"_168":307,"_180":309,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/857","https://api.github.com/repos/pro-collection/interview-question/issues/857/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/857/comments","https://api.github.com/repos/pro-collection/interview-question/issues/857/events","https://github.com/pro-collection/interview-question/issues/857",2494831272,"I_kwDOJGDC6c6UtBqo",857,"可有办法判断用户的网络条件, 判断网速快慢，网络状态？【热度: 195】",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[299,300],{"_66":110,"_68":111,"_54":112,"_113":114,"_115":116,"_117":26,"_118":119},{"_66":223,"_68":224,"_54":225,"_113":226,"_115":125,"_117":26,"_118":126},[],{"_54":135,"_64":136,"_58":137,"_66":138,"_68":139,"_70":140,"_72":141,"_118":142,"_143":303,"_145":146,"_147":148,"_127":128,"_149":150,"_151":152,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2024-08-29T15:18:24Z",{"_162":148,"_163":148,"_164":148},"**关键词**：网络状态\n\n确定用户的网络条件，包括网络速度和连接状态，对于提供优质用户体验至关重要。以下是一些方法可以帮助你判断用户的网络条件：\n\n### 1. **Navigator Connection API**\n\n这个 API 提供有关系统的网络连接的信息，如网络的类型和下载速度。这个 API 的支持度不是全局性的，但在许多现代浏览器上可用。使用这个 API，你可以获取到有关用户网络连接的详细信息。\n\n```javascript\nif (\"connection\" in navigator) {\n const connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;\n\n console.log(`网络类型: ${connection.effectiveType}`);\n console.log(`估计的下行速度: ${connection.downlink}Mbps`);\n console.log(`RTT: ${connection.rtt}ms`);\n\n // 监听网络类型变化\n connection.addEventListener(\"change\", (e) => {\n console.log(`网络类型变化为: ${connection.effectiveType}`);\n });\n}\n```\n\n- `connection.effectiveType` 提供了网络的类型，如 `'4g'`，`'3g'`，代表网络速度。\n- `connection.downlink` 提供了网络的下载速度信息，单位是 Mbps。\n- `connection.rtt` 提供了来回时间信息，单位是毫秒。\n\n### 2. **观测发送请求的速度**\n\n通过发送一个小请求（可能是一个小文件或 API 请求）并测量它完成的时间，可以粗略地估计当前的网络速度。\n\n```javascript\nlet startTime = new Date().getTime(); // 记录开始时间\nfetch(\"your-small-file-or-api-url\").then((response) => {\n let endTime = new Date().getTime(); // 记录结束时间\n let duration = endTime - startTime; // 请求持续时间\n console.log(`请求持续时间: ${duration}ms`);\n // 根据持续时间和文件大小估计网速\n});\n```\n\n### 3. **监听在线和离线事件**\n\nHTML5 引入了在线和离线事件监听，可以用来简单判断用户是否连接到网络。\n\n```javascript\nwindow.addEventListener(\"online\", () => console.log(\"网络已连接\"));\nwindow.addEventListener(\"offline\", () => console.log(\"网络已断开\"));\n```\n\n根据`navigator.onLine`的属性值，你可以检测用户是否在线。\n\n```javascript\nif (navigator.onLine) {\n console.log(\"用户在线\");\n} else {\n console.log(\"用户离线\");\n}\n```\n\n### 结论\n\n虽然无法精确地测量用户的网速，但以上方法提供了一些手段来估计用户的网络状况。这样的信息可以用来动态调整网站或应用的行为，例如，通过降低图像质量、推迟非关键资源的加载或取消某些动画，以改善慢速连接下的用户体验。\n",{"_54":308,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/857/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/857/timeline",{"_54":311,"_56":57,"_58":312,"_60":313,"_62":314,"_64":315,"_66":316,"_68":317,"_70":318,"_72":319,"_74":320,"_107":321,"_127":128,"_129":26,"_130":-5,"_131":323,"_133":324,"_155":148,"_149":326,"_151":326,"_154":-5,"_158":159,"_160":327,"_165":-5,"_166":328,"_168":329,"_180":331,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/848","https://api.github.com/repos/pro-collection/interview-question/issues/848/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/848/comments","https://api.github.com/repos/pro-collection/interview-question/issues/848/events","https://github.com/pro-collection/interview-question/issues/848",2485084164,"I_kwDOJGDC6c6UH2AE",848,"介绍一下 fetch 请求 keepalive 属性【热度: 112】",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[322],{"_66":110,"_68":111,"_54":112,"_113":114,"_115":116,"_117":26,"_118":119},[],{"_54":135,"_64":136,"_58":137,"_66":138,"_68":139,"_70":140,"_72":141,"_118":142,"_143":325,"_145":146,"_147":148,"_127":128,"_149":150,"_151":152,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2024-08-25T06:24:04Z",{"_162":148,"_163":148,"_164":148},"**关键词**：fetch keepalive 属性\n\n`keepalive` 选项在 `fetch` 请求中的作用主要是允许在浏览器即将关闭或者用户即将离开当前页面时，仍然能够成功发送网络请求。这个选项的设计初衷是为了处理那些需要在页面生命周期结束时发送的统计或追踪数据的场景，比如用户的行为追踪数据、性能数据等。\n\n### keepalive 选项的主要特点包括：\n\n- **异步发送**：`keepalive` 选项允许请求在后台异步发送，即使在 `unload` 或 `beforeunload` 事件中触发。这确保了页面卸载过程不会因等待数据发送而延迟。\n- **请求不会阻止页面关闭**：使用了 `keepalive` 选项的请求不会阻止浏览器关闭页面，提升了用户体验。\n- **数据量限制**：为了保证功能的有效性和避免滥用，`keepalive` 请求的数据大小有限制。最新的浏览器通常限制请求体的大小在 64KB 左右。\n\n- **用例限制**：考虑到 `keepalive` 选项设计的是为了处理小量且关键的数据，比如统计和追踪数据，因此它并不适合用于发送大量数据。\n\n### 示例\n\n以下是如何在 `fetch` 请求中使用 `keepalive` 选项的例子：\n\n```javascript\nwindow.addEventListener(\"beforeunload\", (event) => {\n // 构造你想要发送的数据\n const data = {\n // ...一些追踪数据\n };\n\n // 发送请求到服务器\n fetch(\"https://yourserver.com/api/track\", {\n method: \"POST\",\n body: JSON.stringify(data),\n headers: {\n \"Content-Type\": \"application/json\",\n },\n keepalive: true, // 使用 keepalive 选项\n });\n});\n```\n\n这种方法非常适合收集页面关闭前的最后一些用户行为数据，以便于更准确地追踪用户在网页上的活动和体验。但要记住，`keepalive` 选项应当谨慎使用，并确保发送的数据量不会超过浏览器的限制。\n",{"_54":330,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/848/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/848/timeline",{"_54":333,"_56":57,"_58":334,"_60":335,"_62":336,"_64":337,"_66":338,"_68":339,"_70":340,"_72":341,"_74":342,"_107":343,"_127":128,"_129":26,"_130":-5,"_131":350,"_133":351,"_155":148,"_149":353,"_151":353,"_154":-5,"_158":159,"_160":354,"_165":-5,"_166":355,"_168":356,"_180":358,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/824","https://api.github.com/repos/pro-collection/interview-question/issues/824/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/824/comments","https://api.github.com/repos/pro-collection/interview-question/issues/824/events","https://github.com/pro-collection/interview-question/issues/824",2471479933,"I_kwDOJGDC6c6TT8p9",824,"手写一个 axios 中间件，支持缓存返回到本地内存【热度: 845】",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[344,345],{"_66":110,"_68":111,"_54":112,"_113":114,"_115":116,"_117":26,"_118":119},{"_66":346,"_68":347,"_54":348,"_113":349,"_115":125,"_117":26,"_118":126},5312726360,"LA_kwDOJGDC6c8AAAABPKnFWA","https://api.github.com/repos/pro-collection/interview-question/labels/%E8%85%BE%E8%AE%AF","腾讯",[],{"_54":229,"_64":230,"_58":231,"_66":232,"_68":233,"_70":234,"_72":235,"_118":236,"_143":352,"_145":238,"_147":148,"_127":128,"_149":239,"_151":240,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2024-08-17T11:07:50Z",{"_162":148,"_163":148,"_164":148},"**关键词**：请求缓存\n\n手写一个 axios 中间件，支持缓存返回到本地内存，下次同样的请求路径和参数，直接返回上一次的缓存内容即可，不需再请求，同时支持设置自动清除缓存数据的时间。\n\n创建一个简单的 Axios 中间件来支持内存缓存可以大致分为以下步骤：\n\n1. 实现一个缓存管理器，可以存储、检索和删除缓存数据。\n2. 在发送请求前，检查是否存在对应的缓存数据，如果存在，则直接返回缓存数据，而不是发起新的请求。\n3. 在接收到新的请求响应后，将响应数据存储到缓存中，并设置一个定时器来自动清除过期的缓存数据。\n\n下面是一个简单的实现示例：\n\n```javascript\nimport axios from \"axios\";\n\nclass CacheManager {\n constructor() {\n this.cache = {};\n }\n\n // 生成缓存键\n _generateCacheKey(url, params) {\n const paramString = Object.keys(params)\n .sort()\n .map((key) => `${key}=${params[key]}`)\n .join(\"&\");\n return `${url}?${paramString}`;\n }\n\n // 设置缓存\n set(url, params, data, ttl) {\n const cacheKey = this._generateCacheKey(url, params);\n\n // 清除可能存在的旧缓存\n if (this.cache[cacheKey]) {\n clearTimeout(this.cache[cacheKey].timeout);\n }\n\n // 设置新的缓存\n const timeout = setTimeout(() => {\n delete this.cache[cacheKey];\n }, ttl);\n\n this.cache[cacheKey] = { data, timeout };\n }\n\n // 获取缓存\n get(url, params) {\n const cacheKey = this._generateCacheKey(url, params);\n return this.cache[cacheKey] ? this.cache[cacheKey].data : null;\n }\n}\n\n// 创建缓存管理器实例\nconst cacheManager = new CacheManager();\n\n// 自定义请求拦截器\naxios.interceptors.request.use((config) => {\n // 检查缓存\n const cachedResponse = cacheManager.get(config.url, config.params || {});\n\n if (cachedResponse) {\n // 如果找到缓存，将缓存数据作为Promise直接返回\n return Promise.reject({\n config,\n response: cachedResponse,\n isCached: true, // 自定义属性，标记这是一个缓存的结果\n });\n }\n\n return config;\n});\n\n// 自定义响应拦截器\naxios.interceptors.response.use(\n (response) => {\n // 存储新的响应数据到缓存。假设 TTL（生存时间）为 1 分钟（60000 毫秒）\n cacheManager.set(response.config.url, response.config.params || {}, response, 60000);\n return response;\n },\n (error) => {\n // 检查错误对象中是否包含缓存响应\n if (error.isCached) {\n // 直接返回缓存响应\n return Promise.resolve(error.response);\n }\n // 对于其他类型的错误，继续抛出\n return Promise.reject(error);\n }\n);\n\n// 使用自定义的 Axios 实例发送请求\n// 随后的请求（在缓存未过期之前），会直接返回缓存的数据\naxios\n .get(\"https://example.com/data\", { params: { userId: \"123\" } })\n .then((response) => console.log(\"Response:\", response))\n .catch((error) => console.log(\"Error:\", error));\n```\n\n这个简单的实现展示了如何在 Axios 请求级别添加缓存逻辑。你可以根据你的实际需求调整和扩展这个实现，比如添加错误处理逻辑、支持更复杂的缓存失效策略等。\n",{"_54":357,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/824/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/824/timeline",{"_54":360,"_56":57,"_58":361,"_60":362,"_62":363,"_64":364,"_66":365,"_68":366,"_70":367,"_72":368,"_74":369,"_107":370,"_127":128,"_129":26,"_130":-5,"_131":373,"_133":374,"_155":148,"_149":376,"_151":377,"_154":-5,"_158":159,"_160":378,"_165":-5,"_166":379,"_168":380,"_180":382,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/823","https://api.github.com/repos/pro-collection/interview-question/issues/823/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/823/comments","https://api.github.com/repos/pro-collection/interview-question/issues/823/events","https://github.com/pro-collection/interview-question/issues/823",2471478538,"I_kwDOJGDC6c6TT8UK",823,"axios 是否可以缓存请求返回值到内存里面，下次调用的时候，直接使用内存中的缓存数据？【热度: 884】",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[371,372],{"_66":110,"_68":111,"_54":112,"_113":114,"_115":116,"_117":26,"_118":119},{"_66":346,"_68":347,"_54":348,"_113":349,"_115":125,"_117":26,"_118":126},[],{"_54":229,"_64":230,"_58":231,"_66":232,"_68":233,"_70":234,"_72":235,"_118":236,"_143":375,"_145":238,"_147":148,"_127":128,"_149":239,"_151":240,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2024-08-17T11:03:26Z","2024-08-17T11:03:27Z",{"_162":148,"_163":148,"_164":148},"**关键词**：请求缓存\n\n**Axios 本身没有内置的请求缓存机制**，但你可以通过一些策略手动实现，或者使用第三方库来帮助你实现请求缓存。以下是实现 Axios 请求缓存的两种方法：\n\n### 方法 1: 手动实现缓存逻辑\n\n你可以通过创建一个缓存对象和一个自定义的 Axios 实例来实现请求的缓存。每次发起请求前，检查缓存对象中是否已经存在该请求的数据；如果存在，则直接返回缓存数据，否则发起真实的请求，并将请求结果存入缓存对象中。\n\n```javascript\nimport axios from \"axios\";\n\n// 创建一个简单的缓存对象\nconst cache = {};\n\nconst fetchWithCache = async (url, config = {}) => {\n // 检查缓存对象中是否已存在请求结果\n const cacheKey = JSON.stringify({ url, ...config });\n if (cache[cacheKey]) {\n return Promise.resolve(cache[cacheKey]);\n }\n\n // 发起真实请求\n try {\n const response = await axios.get(url, config);\n // 将请求结果存入缓存\n cache[cacheKey] = response;\n return response;\n } catch (error) {\n return Promise.reject(error);\n }\n};\n\n// 使用 fetchWithCache 函数\nfetchWithCache(\"https://example.com/data\")\n .then((response) => console.log(response.data))\n .catch((error) => console.error(error));\n```\n\n### 方法 2: 使用第三方库\n\n有些第三方库如 `axios-cache-adapter` 可以为 Axios 添加缓存功能，这样你就不需要手动实现缓存逻辑。\n\n```javascript\nimport axios from \"axios\";\nimport { setupCache } from \"axios-cache-adapter\";\n\n// 创建 cache adapter 实例\nconst cache = setupCache({\n maxAge: 15 * 60 * 1000, // 设置缓存有效期为 15 分钟\n});\n\n// 创建一个带有缓存能力的 axios 实例\nconst axiosWithCache = axios.create({\n adapter: cache.adapter,\n});\n\n// 使用带有缓存能力的 axios 实例发起请求\naxiosWithCache\n .get(\"https://example.com/data\")\n .then((response) => console.log(response.data))\n .catch((error) => console.error(error));\n```\n",{"_54":381,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/823/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/823/timeline",{"_54":384,"_56":57,"_58":385,"_60":386,"_62":387,"_64":388,"_66":389,"_68":390,"_70":391,"_72":392,"_74":393,"_107":394,"_127":128,"_129":26,"_130":-5,"_131":401,"_133":402,"_155":148,"_149":404,"_151":404,"_154":-5,"_158":159,"_160":405,"_165":-5,"_166":406,"_168":407,"_180":409,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/810","https://api.github.com/repos/pro-collection/interview-question/issues/810/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/810/comments","https://api.github.com/repos/pro-collection/interview-question/issues/810/events","https://github.com/pro-collection/interview-question/issues/810",2458865291,"I_kwDOJGDC6c6Sj06L",810,"axios 请求的底层依赖是什么？【热度: 266】",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[395,396],{"_66":110,"_68":111,"_54":112,"_113":114,"_115":116,"_117":26,"_118":119},{"_66":397,"_68":398,"_54":399,"_113":400,"_115":125,"_117":26,"_118":126},6294910473,"LA_kwDOJGDC6c8AAAABdzS2CQ","https://api.github.com/repos/pro-collection/interview-question/labels/TOP100%E4%BA%92%E8%81%94%E7%BD%91","TOP100互联网",[],{"_54":135,"_64":136,"_58":137,"_66":138,"_68":139,"_70":140,"_72":141,"_118":142,"_143":403,"_145":146,"_147":148,"_127":128,"_149":150,"_151":152,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2024-08-10T02:54:22Z",{"_162":148,"_163":148,"_164":148},"**关键词**：axios 请求依赖\n\nAxios 的底层依赖会根据运行环境而有所不同：\n\n在浏览器环境中，Axios 通常会优先使用 `XMLHttpRequest` 对象来发送请求。但它也可以使用 `fetch` API （如果浏览器支持）。\n\n在 Node.js 环境中，Axios 依赖于 Node.js 的 `http` 或 `https` 模块来发送请求。\n",{"_54":408,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/810/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/810/timeline",{"_54":411,"_56":57,"_58":412,"_60":413,"_62":414,"_64":415,"_66":416,"_68":417,"_70":418,"_72":419,"_74":420,"_107":421,"_127":128,"_129":26,"_130":-5,"_131":424,"_133":425,"_155":148,"_149":427,"_151":428,"_154":-5,"_158":159,"_160":429,"_165":-5,"_166":430,"_168":431,"_180":433,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/809","https://api.github.com/repos/pro-collection/interview-question/issues/809/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/809/comments","https://api.github.com/repos/pro-collection/interview-question/issues/809/events","https://github.com/pro-collection/interview-question/issues/809",2458864919,"I_kwDOJGDC6c6Sj00X",809,"ajax 和 xhr 是什么关系？【热度: 332】",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[422,423],{"_66":110,"_68":111,"_54":112,"_113":114,"_115":116,"_117":26,"_118":119},{"_66":397,"_68":398,"_54":399,"_113":400,"_115":125,"_117":26,"_118":126},[],{"_54":135,"_64":136,"_58":137,"_66":138,"_68":139,"_70":140,"_72":141,"_118":142,"_143":426,"_145":146,"_147":148,"_127":128,"_149":150,"_151":152,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2024-08-10T02:52:57Z","2024-08-10T02:52:58Z",{"_162":148,"_163":148,"_164":148},"**关键词**：ajax 和 xhr\n\n**Ajax**\n\n全称为 Asynchronous JavaScript and XML（异步 JavaScript 和 XML），是一种在不重新加载整个网页的情况下，与服务器进行数据交换并更新部分网页内容的技术方法。\n\nAjax 主要基于以下几个关键概念和技术：\n\n1. 异步通信：允许网页在发送请求后继续执行其他操作，无需等待服务器响应。\n\n2. JavaScript：用于处理请求的发送、响应的接收和页面的动态更新。\n\n3. XML 或其他数据格式：虽然名称中包含 XML，但实际上服务器返回的数据可以是 XML、JSON、HTML 等各种格式。\n\n**关系**\n\n`Ajax`（Asynchronous JavaScript and XML）是一种使用多种技术（包括 `XMLHttpRequest`（XHR）对象）在后台与服务器进行异步数据交换，而无需重新加载整个网页的 Web 开发技术。\n\n`XMLHttpRequest` 是实现 `Ajax` 技术的关键对象之一。通过创建 `XMLHttpRequest` 对象，我们可以使用 JavaScript 向服务器发送请求，并处理服务器返回的响应。\n\n简单来说，`XMLHttpRequest` 是实现 `Ajax` 的一种底层机制或工具。`Ajax` 是一个更广泛的概念，涵盖了使用包括 `XMLHttpRequest` 在内的技术来实现异步数据交互的方法和模式。\n\n例如，以下是一个使用 `XMLHttpRequest` 实现简单 `Ajax` 请求的示例：\n\n```javascript\nlet xhr = new XMLHttpRequest();\n\nxhr.open(\"GET\", \"https://example.com/data\");\n\nxhr.onreadystatechange = function () {\n if (xhr.readyState === 4 && xhr.status === 200) {\n let data = xhr.responseText;\n\n console.log(data);\n }\n};\n\nxhr.send();\n```\n\n在这个示例中，我们通过操作 `XMLHttpRequest` 对象来完成了一个异步获取数据的过程，这就是 `Ajax` 技术的一种应用。\n\n**其他实现方式**\n\n除了使用 `XMLHttpRequest` 实现 `Ajax` 之外，还有以下几种常见的实现方式：\n\n1. `fetch` API：这是现代浏览器中提供的一种更简洁的异步请求方式，基于 `Promise` 。\n\n```javascript\nfetch(\"https://example.com/data\")\n .then((response) => response.json())\n\n .then((data) => console.log(data))\n\n .catch((error) => console.error(error));\n```\n\n2. `Axios` 库：一个流行的第三方 `Ajax` 库，提供了丰富的功能和简洁的接口。\n\n```javascript\naxios\n .get(\"https://example.com/data\")\n\n .then((response) => console.log(response.data))\n\n .catch((error) => console.error(error));\n```\n\n3. `jQuery` 的 `$.ajax()` 方法：如果项目中使用了 `jQuery` 库，可以使用其提供的 `ajax` 方法。\n\n```javascript\n$.ajax({\n url: \"https://example.com/data\",\n\n method: \"GET\",\n\n success: function (data) {\n console.log(data);\n },\n\n error: function (error) {\n console.error(error);\n },\n});\n```\n\n这些方式各有特点，可以根据项目的需求和技术架构选择合适的 `Ajax` 实现方式。\n",{"_54":432,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/809/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/809/timeline",{"_54":435,"_56":57,"_58":436,"_60":437,"_62":438,"_64":439,"_66":440,"_68":441,"_70":442,"_72":443,"_74":444,"_107":445,"_127":128,"_129":26,"_130":-5,"_131":448,"_133":449,"_155":148,"_149":451,"_151":452,"_154":-5,"_158":159,"_160":453,"_165":-5,"_166":454,"_168":455,"_180":457,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/797","https://api.github.com/repos/pro-collection/interview-question/issues/797/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/797/comments","https://api.github.com/repos/pro-collection/interview-question/issues/797/events","https://github.com/pro-collection/interview-question/issues/797",2406658420,"I_kwDOJGDC6c6PcrF0",797,"浏览器有同源策略，但是为何 cdn 请求资源的时候不会有跨域限制【热度: 579】",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[446,447],{"_66":110,"_68":111,"_54":112,"_113":114,"_115":116,"_117":26,"_118":119},{"_66":397,"_68":398,"_54":399,"_113":400,"_115":125,"_117":26,"_118":126},[],{"_54":229,"_64":230,"_58":231,"_66":232,"_68":233,"_70":234,"_72":235,"_118":236,"_143":450,"_145":238,"_147":148,"_127":128,"_149":239,"_151":240,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2024-07-13T03:19:04Z","2024-07-13T03:19:05Z",{"_162":148,"_163":148,"_164":148},"**关键词**：同源策略、跨域限制\n\n### 同源策略是啥\n\n浏览器的同源策略（Same-origin policy）是一种重要的安全机制，用于限制不同源的文档或脚本之间的交互操作。\n\n“源”（origin）由三部分组成：协议（protocol）、域名（domain）和端口（port）。如果两个 URL 的协议、域名和端口都完全相同，那么它们就是同源的；否则，就是不同源的。\n\n同源策略的主要作用和规则如下：\n\n1. **阻止文档或脚本读取来自不同源的文档内容**\n\n - 比如，在 `https://example.com/page1.html` 页面中的 JavaScript 脚本，不能读取 `https://anotherdomain.com/page2.html` 的文档内容。\n\n2. **限制不同源的脚本之间的交互**\n\n - 不同源的脚本不能相互调用方法、访问对象属性或修改对方的 DOM（文档对象模型）。\n\n3. **限制跨源的网络请求**\n - 例如，使用 `XMLHttpRequest` 或 `Fetch API` 发起的网络请求，如果目标地址与当前页面的源不同，会受到同源策略的限制。不过，一些跨源请求可以通过 CORS（跨源资源共享，Cross-Origin Resource Sharing）机制来实现合法的跨源访问。\n\n同源策略的目的是防止恶意网站窃取用户在其他网站上的敏感信息或进行未经授权的操作，保护用户数据的安全性和隐私性。\n\n举个例子，如果没有同源策略，恶意网站 `malicious-site.com` 可能会在其页面中嵌入脚本，尝试读取用户正在访问的银行网站 `bank-site.com` 的页面内容，获取用户的账户信息、交易记录等敏感数据，这将给用户带来极大的安全风险。\n\n### 浏览器有同源策略，但是为何 cdn 请求资源的时候不跨域\n\n一些 CDN 资源不受同源策略限制，是因为同源策略主要是浏览器的一种安全机制，用于限制不同源的文档或脚本之间的交互操作，但对于某些特定类型的资源访问，浏览器会有一些例外情况。\n**在 HTML 中，``加载来自 CDN 的 Vue.js 库。\n\n这样做的主要原因是为了保证 Web 的开放性和可扩展性。如果这些资源也严格受到同源策略的限制，那么将所有相关资源都部署在同一个服务器下会违背 Web 开放的初衷，并且不利于资源的分发和缓存。\n然而，虽然浏览器允许这些资源的跨域加载，但在加载 JavaScript 时，会限制对返回内容的读写权限，以防止恶意脚本获取或修改其他域的信息。\n另外，CDN 服务提供商通常也会采取一些措施来确保资源的安全性和合法性。他们会对资源进行管理和配置，只允许合法的请求访问资源，并防止恶意使用或滥用 CDN 资源。\n需要注意的是，同源策略仍然是非常重要的安全机制，它能有效防止恶意网站窃取用户在其他网站上的敏感信息或进行未经授权的操作。在涉及到敏感数据的交互或需要更严格安全控制的情况下，仍然需要遵循同源策略或采用适当的跨域解决方案，如 CORS（跨域资源共享）等。CORS 通过在服务器端设置响应头，明确允许哪些源可以访问资源，从而在保证安全的前提下实现跨域数据交互。\n\n### img src 指向的任何资源都是可以跨域访问吗\n\n一般情况下，`` 元素的 `src` 属性指向的资源是可以进行跨域访问的。\n\n当您在网页中使用 `` 标签加载图片资源时，浏览器会向指定的 URL 发送请求获取图片数据，并将其显示在页面上，即使该资源的源与当前页面的源不同。\n\n然而，也存在一些特殊情况和限制：\n\n1. 如果图片资源所在的服务器设置了严格的访问控制策略（例如通过服务器端的配置限制某些来源的访问），那么可能会导致您的请求被拒绝。\n\n2. 对于一些受版权保护或有特殊访问权限要求的图片资源，如果您没有相应的授权或访问权限，即使浏览器本身允许跨域访问，您也无法获取和显示这些图片。\n\n总的来说，在大多数常规情况下，`` 元素的 `src` 属性指向的图片资源能够实现跨域访问，但需要考虑服务器端的配置和资源本身的权限要求等因素。\n",{"_54":456,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/797/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/797/timeline",{"_54":459,"_56":57,"_58":460,"_60":461,"_62":462,"_64":463,"_66":464,"_68":465,"_70":466,"_72":467,"_74":468,"_107":469,"_127":128,"_129":26,"_130":-5,"_131":472,"_133":473,"_155":148,"_149":475,"_151":476,"_154":-5,"_158":159,"_160":477,"_165":-5,"_166":478,"_168":479,"_180":481,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/796","https://api.github.com/repos/pro-collection/interview-question/issues/796/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/796/comments","https://api.github.com/repos/pro-collection/interview-question/issues/796/events","https://github.com/pro-collection/interview-question/issues/796",2405632503,"I_kwDOJGDC6c6PYwn3",796,"cookie 可以实现不同域共享吗【热度: 533】",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[470,471],{"_66":110,"_68":111,"_54":112,"_113":114,"_115":116,"_117":26,"_118":119},{"_66":397,"_68":398,"_54":399,"_113":400,"_115":125,"_117":26,"_118":126},[],{"_54":135,"_64":136,"_58":137,"_66":138,"_68":139,"_70":140,"_72":141,"_118":142,"_143":474,"_145":146,"_147":148,"_127":128,"_149":150,"_151":152,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2024-07-12T13:34:16Z","2025-02-09T15:10:07Z",{"_162":148,"_163":148,"_164":148},"**关键词**：cookie 共享\n\n通常，Cookie不能直接在不同域间共享，这源于浏览器同源策略，该策略由协议、域名和端口号共同界定“源”，只有三者完全相同才属同源，Cookie才能在其间共享。但在特定条件和技术手段下，可实现不同域间一定程度的Cookie共享，同时，Cookie也能设置为在同主域下的子域间共享，具体如下：\n\n### 不同域共享Cookie\n- **跨域资源共享（CORS）**：在服务端设置`Access-Control-Allow-Origin`等CORS头信息，允许特定跨域请求。但主要用于解决跨域资源请求，对Cookie共享支持有限，一般仅能共享简单、非敏感的Cookie信息，且需客户端与服务端配合。\n- **设置P3P头**：P3P用于网站向用户传达隐私策略，通过在响应头设置相关信息，理论上可让浏览器允许跨域设置Cookie。不过，该方法存在兼容性问题，在现代浏览器中支持程度不一，且有安全风险。\n- **JSONP**：利用`