"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; function _createMdxContent(props) { const _components = { a: "a", blockquote: "blockquote", code: "code", div: "div", h2: "h2", h3: "h3", hr: "hr", li: "li", p: "p", pre: "pre", span: "span", strong: "strong", table: "table", tbody: "tbody", td: "td", th: "th", thead: "thead", tr: "tr", ul: "ul", ..._provideComponents(), ...props.components }, {R2Image} = _components; if (!R2Image) _missingMdxReference("R2Image", true); return _jsxs(_Fragment, { children: [_jsx(_components.p, { children: "网络是前端非常重要的一个部分，从基础的 HTTP 报文、状态码、跨域，到进阶的缓存策略、TCP 握手、TLS 握手、性能优化（合并请求、域名分片、预连接），再到现代前端工程中的 GraphQL、SSE、WebSocket，都是前端网络需要覆盖的内容。" }), "\n", _jsxs(_components.h2, { id: "基础概念", children: ["基础概念", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#基础概念", children: _jsx(_components.span, { className: "icon icon-link" }) })] }), "\n", _jsx(_components.p, { children: "网络基础概念在我看来有如http、tcp、https、tls还有很多比如数据链路层的，物理层的，以及smtp协议等等，但是我认为再前端里面不算是重点。故此我列一下需要理解的一些点。" }), "\n", _jsxs(_components.h3, { id: "http和https", children: ["http和https", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#http和https", children: _jsx(_components.span, { className: "icon icon-link" }) })] }), "\n", _jsxs(_components.p, { children: ["HTTP（HyperText Transfer Protocol）是 Web 上应用最广泛的协议，它定义了客户端和服务器之间传输数据的格式和规则。HTTPS（HTTP Secure）则是在 HTTP 的基础上增加了", _jsx(_components.strong, { children: "安全层（SSL/TLS）" }), "，通过加密通信来防止数据被窃听或篡改。"] }), "\n", _jsxs(_components.table, { children: [_jsx(_components.thead, { children: _jsxs(_components.tr, { children: [_jsx(_components.th, { children: "特性" }), _jsx(_components.th, { children: "HTTP" }), _jsx(_components.th, { children: "HTTPS" })] }) }), _jsxs(_components.tbody, { children: [_jsxs(_components.tr, { children: [_jsx(_components.td, { children: "协议" }), _jsx(_components.td, { children: "明文" }), _jsx(_components.td, { children: "加密（SSL/TLS）" })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: "默认端口" }), _jsx(_components.td, { children: "80" }), _jsx(_components.td, { children: "443" })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: "安全性" }), _jsx(_components.td, { children: "低，易被窃听、篡改" }), _jsx(_components.td, { children: "高，防窃听、防篡改、防冒充" })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: "性能" }), _jsx(_components.td, { children: "快（无加密开销）" }), _jsx(_components.td, { children: "稍慢（握手+加密解密，但现代硬件下差异很小）" })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: "证书" }), _jsx(_components.td, { children: "不需要" }), _jsx(_components.td, { children: "需要购买或申请免费证书（如 Let's Encrypt）" })] })] })] }), "\n", _jsxs(_components.h3, { id: "http1011和20", children: ["http1.0、1.1和2.0", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#http1011和20", children: _jsx(_components.span, { className: "icon icon-link" }) })] }), "\n", _jsxs(_components.p, { children: ["HTTP 1.0 是早期版本，每个请求/响应都需要建立一次 TCP 连接，用完即关闭。HTTP 2.0 则引入了二进制分帧、多路复用、头部压缩等机制，大幅提升了传输效率。而HTTP 1.1是一个过度阶段，通过 ", _jsx(_components.code, { children: "Connection: keep-alive" }), " 复用 TCP 连接，保证持久连接"] }), "\n", _jsxs(_components.table, { children: [_jsx(_components.thead, { children: _jsxs(_components.tr, { children: [_jsx(_components.th, { children: "特性" }), _jsx(_components.th, { children: "HTTP 1.0" }), _jsx(_components.th, { children: "HTTP 1.1" }), _jsx(_components.th, { children: "HTTP 2.0" })] }) }), _jsxs(_components.tbody, { children: [_jsxs(_components.tr, { children: [_jsx(_components.td, { children: "连接模型" }), _jsx(_components.td, { children: "短连接" }), _jsx(_components.td, { children: "持久连接（keep-alive）" }), _jsx(_components.td, { children: "多路复用（一个连接并发处理）" })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: "请求/响应队头阻塞" }), _jsx(_components.td, { children: "严重" }), _jsx(_components.td, { children: "仍然存在（流水线未解决）" }), _jsx(_components.td, { children: "无（二进制帧交错）" })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: "头部压缩" }), _jsx(_components.td, { children: "无" }), _jsx(_components.td, { children: "无" }), _jsx(_components.td, { children: "HPACK" })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: "服务器推送" }), _jsx(_components.td, { children: "无" }), _jsx(_components.td, { children: "无" }), _jsx(_components.td, { children: "支持" })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: "协议格式" }), _jsx(_components.td, { children: "文本" }), _jsx(_components.td, { children: "文本" }), _jsx(_components.td, { children: "二进制帧" })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: "并发请求数（单连接）" }), _jsx(_components.td, { children: "1" }), _jsx(_components.td, { children: "1（但可使用多个 TCP 连接）" }), _jsx(_components.td, { children: "数百个并发流" })] })] })] }), "\n", _jsxs(_components.blockquote, { children: ["\n", _jsx(_components.p, { children: "实际上还有一个HTTP3.0，解决的是HTTP2.0由可交付机制导致只要丢失一个包时阻塞整个TCP连接的问题" }), "\n"] }), "\n", _jsxs(_components.h3, { id: "tcp三次握手和四次挥手", children: ["TCP三次握手和四次挥手", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#tcp三次握手和四次挥手", children: _jsx(_components.span, { className: "icon icon-link" }) })] }), "\n", _jsx(_components.p, { children: "TCP 是面向连接的可靠传输协议。在发送数据之前，通信双方需要先“握手”建立一个连接；数据传输结束后，再“挥手”释放连接。" }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.p, { children: "首先是三次握手建立连接，目的是确保双方都能发送和接收数据，同步初始序列号（ISN），并分配缓冲区资源。" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "第一次：客户端 → 服务器，发送 SYN（seq=x），客户端进入 SYN_SENT。" }), "\n", _jsx(_components.li, { children: "第二次：服务器 → 客户端，发送 SYN+ACK（seq=y, ack=x+1），服务器进入 SYN_RCVD。" }), "\n", _jsx(_components.li, { children: "第三次：客户端 → 服务器，发送 ACK（seq=x+1, ack=y+1），双方进入 ESTABLISHED。" }), "\n", _jsx(_components.li, { children: "作用：同步序列号，确认双方收发能力，防止历史连接。" }), "\n"] }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.p, { children: "然后是四次挥手，TCP 是全双工通信，每个方向必须独立关闭。当一方发送 FIN 时，只表示自己不再发送数据，但还可以接收数据；另一方可能还有数据要发，所以不能像握手一样合并 ACK 和 FIN。只有当双方都完成发送后，才能完全关闭。" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "第一次（FIN）：客户端 → 服务器，客户端无数据发送，发送 FIN（seq=u），进入 FIN_WAIT_1。" }), "\n", _jsx(_components.li, { children: "第二次（ACK）：服务器 → 客户端，回复 ACK（seq=v, ack=u+1），进入 CLOSE_WAIT；客户端收到后进入 FIN_WAIT_2。客户端→服务器方向关闭。" }), "\n", _jsx(_components.li, { children: "第三次（FIN）：服务器 → 客户端，服务器数据发完，发送 FIN（seq=w, ack=u+1），进入 LAST_ACK。" }), "\n", _jsx(_components.li, { children: "第四次（ACK）：客户端 → 服务器，发送 ACK（seq=u+1, ack=w+1），进入 TIME_WAIT（等待 2MSL 后关闭）；服务器收到后进入 CLOSED。" }), "\n"] }), "\n", _jsxs(_components.h3, { id: "常见状态码", children: ["常见状态码", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#常见状态码", children: _jsx(_components.span, { className: "icon icon-link" }) })] }), "\n", _jsxs(_components.table, { children: [_jsx(_components.thead, { children: _jsxs(_components.tr, { children: [_jsx(_components.th, { children: "状态码" }), _jsx(_components.th, { children: "含义" })] }) }), _jsxs(_components.tbody, { children: [_jsxs(_components.tr, { children: [_jsx(_components.td, { children: "200" }), _jsx(_components.td, { children: "成功" })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: "201" }), _jsx(_components.td, { children: "创建成功" })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: "204" }), _jsx(_components.td, { children: "无内容" })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: "301" }), _jsx(_components.td, { children: "永久重定向" })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: "302" }), _jsx(_components.td, { children: "临时重定向" })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: "304" }), _jsx(_components.td, { children: "未修改（使用缓存）" })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: "400" }), _jsx(_components.td, { children: "请求错误" })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: "401" }), _jsx(_components.td, { children: "未授权（需登录）" })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: "403" }), _jsx(_components.td, { children: "禁止访问" })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: "404" }), _jsx(_components.td, { children: "未找到" })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: "405" }), _jsx(_components.td, { children: "方法不允许" })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: "429" }), _jsx(_components.td, { children: "请求过多" })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: "500" }), _jsx(_components.td, { children: "服务器内部错误" })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: "502" }), _jsx(_components.td, { children: "网关错误" })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: "503" }), _jsx(_components.td, { children: "服务不可用" })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: "504" }), _jsx(_components.td, { children: "网关超时" })] })] })] }), "\n", _jsxs(_components.h2, { id: "跨域", children: ["跨域", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#跨域", children: _jsx(_components.span, { className: "icon icon-link" }) })] }), "\n", _jsxs(_components.p, { children: ["跨域的需求是基于同源策略（Same-Origin Policy）产生的。同源策略是浏览器的一个核心安全机制，它要求：", _jsx(_components.strong, { children: "两个页面或请求的“协议（protocol）”、“域名（domain/IP）”、“端口（port）”必须完全一致，才能自由地共享数据或发送请求" }), "。"] }), "\n", _jsxs(_components.p, { children: ["跨域可以使用", _jsx(_components.strong, { children: "jsonp" }), "、", _jsx(_components.strong, { children: "后端配置" }), "、", _jsx(_components.strong, { children: "前端配置" }), "和", _jsx(_components.strong, { children: "nginx代理" }), "完成。"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "jsonp太老了，且只支持get请求" }), "\n", _jsx(_components.li, { children: "前端配置一般指开发环境的代理，但只能在本地使用，无法解决生产环境的跨域。前端配置在webpack和vite里面配置如下：" }), "\n"] }), "\n", _jsxs(_components.div, { className: "code-window", children: [_jsxs(_components.div, { className: "code-header", children: [_jsxs(_components.div, { className: "window-controls", children: [_jsx(_components.span, { className: "control close" }), _jsx(_components.span, { className: "control minimize" }), _jsx(_components.span, { className: "control maximize" })] }), _jsx(_components.span, { className: "code-lang", children: "ts" })] }), _jsx(_components.div, { className: "code-content", children: _jsx(_components.pre, { className: "language-ts", children: _jsxs(_components.code, { className: "language-ts code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token comment", children: "// webpack配置" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: ["devServer", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" proxy", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "'/api'" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" target", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'http://localhost:3000'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" changeOrigin", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token boolean", children: "true" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" pathRewrite", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " ", _jsx(_components.span, { className: "token string-property property", children: "'^/api'" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "''" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] })] }) }) })] }), "\n", _jsxs(_components.div, { className: "code-window", children: [_jsxs(_components.div, { className: "code-header", children: [_jsxs(_components.div, { className: "window-controls", children: [_jsx(_components.span, { className: "control close" }), _jsx(_components.span, { className: "control minimize" }), _jsx(_components.span, { className: "control maximize" })] }), _jsx(_components.span, { className: "code-lang", children: "ts" })] }), _jsx(_components.div, { className: "code-content", children: _jsx(_components.pre, { className: "language-ts", children: _jsxs(_components.code, { className: "language-ts code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token comment", children: "// vite解决跨域" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: ["server", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" proxy", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "'/api'" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" target", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'http://localhost:3000'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" changeOrigin", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token boolean", children: "true" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] })] }) }) })] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "后端设置跨域一般比较常见，并且可以使用这种方式来决定哪些接口由哪些端口和ip可以访问" }), "\n"] }), "\n", _jsxs(_components.div, { className: "code-window", children: [_jsxs(_components.div, { className: "code-header", children: [_jsxs(_components.div, { className: "window-controls", children: [_jsx(_components.span, { className: "control close" }), _jsx(_components.span, { className: "control minimize" }), _jsx(_components.span, { className: "control maximize" })] }), _jsx(_components.span, { className: "code-lang", children: "ts" })] }), _jsx(_components.div, { className: "code-content", children: _jsx(_components.pre, { className: "language-ts", children: _jsxs(_components.code, { className: "language-ts code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token comment", children: "// 后端配置跨域，cors为一个包" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: ["app", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "use" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'/api/*'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token function", children: "cors" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" origin", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token string", children: "'http://localhost:3000'" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), "\n"] })] }) }) })] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "nginx配置跨域,类似于将前后端绑定变成同源" }), "\n"] }), "\n", _jsxs(_components.div, { className: "code-window", children: [_jsxs(_components.div, { className: "code-header", children: [_jsxs(_components.div, { className: "window-controls", children: [_jsx(_components.span, { className: "control close" }), _jsx(_components.span, { className: "control minimize" }), _jsx(_components.span, { className: "control maximize" })] }), _jsx(_components.span, { className: "code-lang", children: "ts" })] }), _jsx(_components.div, { className: "code-content", children: _jsx(_components.pre, { className: "language-ts", children: _jsxs(_components.code, { className: "language-ts code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token comment", children: "// nginx配置跨域" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: ["location ", _jsx(_components.span, { className: "token operator", children: "/" }), "api ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: ["\tproxy_pass http", _jsx(_components.span, { className: "token operator", children: ":" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "ip地址", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token operator", children: ":" }), _jsx(_components.span, { className: "token number", children: "3000" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] })] }) }) })] }), "\n", _jsxs(_components.h2, { id: "ajax和xhr", children: ["Ajax和XHR", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#ajax和xhr", children: _jsx(_components.span, { className: "icon icon-link" }) })] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Ajax" }), "是异步的JavaScript和XML，本质是", _jsx(_components.strong, { children: "使用 JavaScript 在浏览器后台发起 HTTP 请求，在不刷新整个页面的前提下，动态更新页面内容" }), "。"] }), "\n", _jsxs(_components.p, { children: ["传统网页需要刷新整个页面才能加载新数据，用户体验差、带宽浪费。Ajax 的出现让网页可以“悄悄地”向服务器请求数据，拿到数据后只修改局部 DOM，比如：表单提交不跳转、下拉加载更多、搜索框实时补全。实现 Ajax 一般可以使用原生 ", _jsx(_components.strong, { children: "XHR" }), "实现，实际开发中一般以axios和kv封装居多。"] }), "\n", _jsx(_components.p, { children: "话不多说，xhr内置很多方便的api，可以帮助中断请求，监听等等，下面写一个简单的xhr案例，其中xhr.readyState一共有5种状态：" }), "\n", _jsxs(_components.table, { children: [_jsx(_components.thead, { children: _jsxs(_components.tr, { children: [_jsx(_components.th, { children: "值" }), _jsx(_components.th, { children: "状态" }), _jsx(_components.th, { children: "说明" })] }) }), _jsxs(_components.tbody, { children: [_jsxs(_components.tr, { children: [_jsx(_components.td, { children: "0" }), _jsx(_components.td, { children: "UNSENT" }), _jsxs(_components.td, { children: [_jsx(_components.code, { children: "open()" }), " 尚未调用"] })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: "1" }), _jsx(_components.td, { children: "OPENED" }), _jsxs(_components.td, { children: [_jsx(_components.code, { children: "open()" }), " 已调用，尚未 ", _jsx(_components.code, { children: "send()" })] })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: "2" }), _jsx(_components.td, { children: "HEADERS_RECEIVED" }), _jsxs(_components.td, { children: [_jsx(_components.code, { children: "send()" }), " 已调用，已收到响应头"] })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: "3" }), _jsx(_components.td, { children: "LOADING" }), _jsx(_components.td, { children: "接收响应体中（部分数据已到）" })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: "4" }), _jsx(_components.td, { children: "DONE" }), _jsx(_components.td, { children: "整个请求完成（成功或失败）" })] })] })] }), "\n", _jsxs(_components.h3, { id: "get请求与进度条监控", children: ["get请求与进度条监控", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#get请求与进度条监控", children: _jsx(_components.span, { className: "icon icon-link" }) })] }), "\n", _jsxs(_components.div, { className: "code-window", children: [_jsxs(_components.div, { className: "code-header", children: [_jsxs(_components.div, { className: "window-controls", children: [_jsx(_components.span, { className: "control close" }), _jsx(_components.span, { className: "control minimize" }), _jsx(_components.span, { className: "control maximize" })] }), _jsx(_components.span, { className: "code-lang", children: "ts" })] }), _jsx(_components.div, { className: "code-content", children: _jsx(_components.pre, { className: "language-ts", children: _jsxs(_components.code, { className: "language-ts code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token function-variable function", children: "Ajax" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), "posts", _jsx(_components.span, { className: "token punctuation", children: "," }), " setPosts", _jsx(_components.span, { className: "token punctuation", children: "]" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " React", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsxs(_components.span, { className: "token generic-function", children: [_jsx(_components.span, { className: "token function", children: "useState" }), _jsxs(_components.span, { className: "token generic class-name", children: [_jsx(_components.span, { className: "token operator", children: "<" }), "Post", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token operator", children: ">" })] })] }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), "progress", _jsx(_components.span, { className: "token punctuation", children: "," }), " setProgress", _jsx(_components.span, { className: "token punctuation", children: "]" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " React", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsxs(_components.span, { className: "token generic-function", children: [_jsx(_components.span, { className: "token function", children: "useState" }), _jsxs(_components.span, { className: "token generic class-name", children: [_jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token builtin", children: "number" }), _jsx(_components.span, { className: "token operator", children: ">" })] })] }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " xhrRef ", _jsx(_components.span, { className: "token operator", children: "=" }), " React", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsxs(_components.span, { className: "token generic-function", children: [_jsx(_components.span, { className: "token function", children: "useRef" }), _jsxs(_components.span, { className: "token generic class-name", children: [_jsx(_components.span, { className: "token operator", children: "<" }), "XMLHttpRequest ", _jsx(_components.span, { className: "token operator", children: "|" }), " ", _jsx(_components.span, { className: "token keyword", children: "null" }), _jsx(_components.span, { className: "token operator", children: ">" })] })] }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token keyword", children: "null" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token function-variable function", children: "fetchPosts" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token keyword", children: "async" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " xhr ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token keyword", children: "new" }), " ", _jsx(_components.span, { className: "token class-name", children: "XMLHttpRequest" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" xhrRef", _jsx(_components.span, { className: "token punctuation", children: "." }), "current ", _jsx(_components.span, { className: "token operator", children: "=" }), " xhr", _jsx(_components.span, { className: "token punctuation", children: ";" }), " ", _jsx(_components.span, { className: "token comment", children: "// 保存 xhr 对象 " }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" xhr", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "open" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "\"GET\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token string", children: "'/api/posts'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token boolean", children: "true" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token comment", children: "// 监听 progress 事件, 监听进度条 " }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" xhr", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "addEventListener" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "\"progress\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "event", _jsx(_components.span, { className: "token operator", children: ":" }), " ProgressEvent", _jsx(_components.span, { className: "token operator", children: "<" }), "XMLHttpRequestEventTarget", _jsx(_components.span, { className: "token operator", children: ">" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token comment", children: "// 计算进度百分比 " }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " percent ", _jsx(_components.span, { className: "token operator", children: "=" }), " Math", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "round" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "event", _jsx(_components.span, { className: "token punctuation", children: "." }), "loaded ", _jsx(_components.span, { className: "token operator", children: "/" }), " event", _jsx(_components.span, { className: "token punctuation", children: "." }), "total", _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "*" }), " ", _jsx(_components.span, { className: "token number", children: "100" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token function", children: "setProgress" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "percent", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " ", _jsx(_components.span, { className: "token comment", children: "// 更新进度条 " }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" xhr", _jsx(_components.span, { className: "token punctuation", children: "." }), "timeout ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token number", children: "1000" }), " ", _jsx(_components.span, { className: "token operator", children: "*" }), " ", _jsx(_components.span, { className: "token number", children: "30" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " ", _jsx(_components.span, { className: "token comment", children: "// 设置超时时间为 30 秒 " }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: ["\t\txhr", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function-variable function", children: "ontimeout" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: ["\t\t ", _jsx(_components.span, { className: "token builtin", children: "console" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "error" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'请求超时'" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: ["\t\t", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" xhr", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function-variable function", children: "onreadystatechange" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "if" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "xhr", _jsx(_components.span, { className: "token punctuation", children: "." }), "readyState ", _jsx(_components.span, { className: "token operator", children: "===" }), " ", _jsx(_components.span, { className: "token number", children: "4" }), " ", _jsx(_components.span, { className: "token operator", children: "&&" }), " xhr", _jsx(_components.span, { className: "token punctuation", children: "." }), "status ", _jsx(_components.span, { className: "token operator", children: "===" }), " ", _jsx(_components.span, { className: "token number", children: "200" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " response ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token constant", children: "JSON" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "parse" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "xhr", _jsx(_components.span, { className: "token punctuation", children: "." }), "responseText", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token function", children: "setPosts" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "response", _jsx(_components.span, { className: "token punctuation", children: "." }), "data ", _jsx(_components.span, { className: "token keyword", children: "as" }), " Post", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " ", _jsx(_components.span, { className: "token comment", children: "// 更新数据 " }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token function", children: "setProgress" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token number", children: "100" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " ", _jsx(_components.span, { className: "token comment", children: "// 设置进度为 100% " }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" xhrRef", _jsx(_components.span, { className: "token punctuation", children: "." }), "current ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token keyword", children: "null" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " ", _jsx(_components.span, { className: "token comment", children: "// 重置 xhr 对象" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" xhr", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "send" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token keyword", children: "null" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "return" }), " ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: ">" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), "section style", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), " display", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'flex'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " alignItems", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'center'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " gap", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'50px'" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token operator", children: ">" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), "Button type", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token string", children: "'primary'" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), " onClick", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "fetchPosts", _jsx(_components.span, { className: "token punctuation", children: "}" }), " ", _jsx(_components.span, { className: "token operator", children: ">" }), " \n"] }), _jsx(_components.span, { className: "code-line", children: " xhr获取数据 \n" }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "Button", _jsx(_components.span, { className: "token operator", children: ">" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), "Button onClick", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " xhrRef", _jsx(_components.span, { className: "token punctuation", children: "." }), "current", _jsx(_components.span, { className: "token operator", children: "?." }), _jsx(_components.span, { className: "token function", children: "abort" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token operator", children: ">" }), "中断请求", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "Button", _jsx(_components.span, { className: "token operator", children: ">" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "progress ", _jsx(_components.span, { className: "token operator", children: "===" }), " ", _jsx(_components.span, { className: "token number", children: "100" }), " ", _jsx(_components.span, { className: "token operator", children: "?" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), "Progress percent", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token number", children: "100" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), " size", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"small\"" }), " ", _jsx(_components.span, { className: "token operator", children: "/" }), _jsx(_components.span, { className: "token operator", children: ">" }), " ", _jsx(_components.span, { className: "token operator", children: ":" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), "Progress percent", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "progress", _jsx(_components.span, { className: "token punctuation", children: "}" }), " size", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"small\"" }), " status", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"exception\"" }), " ", _jsx(_components.span, { className: "token operator", children: "/" }), _jsx(_components.span, { className: "token operator", children: ">" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "section", _jsx(_components.span, { className: "token operator", children: ">" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), "Table columns", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "columns", _jsx(_components.span, { className: "token punctuation", children: "}" }), " dataSource", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "posts", _jsx(_components.span, { className: "token punctuation", children: "}" }), " rowKey", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"id\"" }), " ", _jsx(_components.span, { className: "token operator", children: "/" }), _jsx(_components.span, { className: "token operator", children: ">" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "export" }), " ", _jsx(_components.span, { className: "token keyword", children: "default" }), " Ajax\n"] })] }) }) })] }), "\n", _jsx(_components.p, { children: "类型如下：" }), "\n", _jsxs(_components.div, { className: "code-window", children: [_jsxs(_components.div, { className: "code-header", children: [_jsxs(_components.div, { className: "window-controls", children: [_jsx(_components.span, { className: "control close" }), _jsx(_components.span, { className: "control minimize" }), _jsx(_components.span, { className: "control maximize" })] }), _jsx(_components.span, { className: "code-lang", children: "ts" })] }), _jsx(_components.div, { className: "code-content", children: _jsx(_components.pre, { className: "language-ts", children: _jsxs(_components.code, { className: "language-ts code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "interface" }), " ", _jsx(_components.span, { className: "token class-name", children: "Post" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" id", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token builtin", children: "number" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" title", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token builtin", children: "string" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" slug", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token builtin", children: "string" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" content", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token builtin", children: "string" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" excerpt", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token builtin", children: "string" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" viewCount", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token builtin", children: "number" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), " \n"] }), _jsx(_components.span, { className: "code-line", children: " \n" }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "const" }), " columns ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " title", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'ID'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " dataIndex", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'id'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " key", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'id'" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " title", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'Title'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " dataIndex", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'title'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " key", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'title'" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " title", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'Slug'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " dataIndex", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'slug'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " key", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'slug'" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " title", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'Content'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " dataIndex", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'content'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " key", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'content'" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " title", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'Excerpt'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " dataIndex", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'excerpt'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " key", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'excerpt'" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " title", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'View Count'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " dataIndex", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'viewCount'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " key", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'viewCount'" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] })] }) }) })] }), "\n", _jsx(R2Image, { r2Key: "blog/front-network/1.png", alt: "1", className: "", caption: "" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["带参数的get请求可以使用", _jsx(_components.code, { children: "URLSearchParams" }), "拼接到url里面"] }), "\n"] }), "\n", _jsxs(_components.div, { className: "code-window", children: [_jsxs(_components.div, { className: "code-header", children: [_jsxs(_components.div, { className: "window-controls", children: [_jsx(_components.span, { className: "control close" }), _jsx(_components.span, { className: "control minimize" }), _jsx(_components.span, { className: "control maximize" })] }), _jsx(_components.span, { className: "code-lang", children: "ts" })] }), _jsx(_components.div, { className: "code-content", children: _jsx(_components.pre, { className: "language-ts", children: _jsxs(_components.code, { className: "language-ts code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token comment", children: "// 带参数的 GET 请求" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token function-variable function", children: "fetchPostsWithParams" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "userId", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token builtin", children: "number" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " params ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token keyword", children: "new" }), " ", _jsx(_components.span, { className: "token class-name", children: "URLSearchParams" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), " userId", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token function", children: "String" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "userId", _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " xhr ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token keyword", children: "new" }), " ", _jsx(_components.span, { className: "token class-name", children: "XMLHttpRequest" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" xhrRef", _jsx(_components.span, { className: "token punctuation", children: "." }), "current ", _jsx(_components.span, { className: "token operator", children: "=" }), " xhr", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" xhr", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "open" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'GET'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsxs(_components.span, { className: "token template-string", children: [_jsx(_components.span, { className: "token template-punctuation string", children: "`" }), _jsx(_components.span, { className: "token string", children: "/api/posts?" }), _jsxs(_components.span, { className: "token interpolation", children: [_jsx(_components.span, { className: "token interpolation-punctuation punctuation", children: "${" }), "params", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "toString" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token interpolation-punctuation punctuation", children: "}" })] }), _jsx(_components.span, { className: "token template-punctuation string", children: "`" })] }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token boolean", children: "true" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" xhr", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "send" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token keyword", children: "null" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] })] }) }) })] }), "\n", _jsxs(_components.h3, { id: "post请求的各种格式", children: ["Post请求的各种格式", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#post请求的各种格式", children: _jsx(_components.span, { className: "icon icon-link" }) })] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "post请求可以分为多种情况，这里写常见格式，第一种json格式" }), "\n"] }), "\n", _jsxs(_components.div, { className: "code-window", children: [_jsxs(_components.div, { className: "code-header", children: [_jsxs(_components.div, { className: "window-controls", children: [_jsx(_components.span, { className: "control close" }), _jsx(_components.span, { className: "control minimize" }), _jsx(_components.span, { className: "control maximize" })] }), _jsx(_components.span, { className: "code-lang", children: "ts" })] }), _jsx(_components.div, { className: "code-content", children: _jsx(_components.pre, { className: "language-ts", children: _jsxs(_components.code, { className: "language-ts code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "const" }), " createPost ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "newPost", _jsx(_components.span, { className: "token operator", children: ":" }), " Omit", _jsx(_components.span, { className: "token operator", children: "<" }), "Post", _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token string", children: "'id'" }), _jsx(_components.span, { className: "token operator", children: ">" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " xhr ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token keyword", children: "new" }), " ", _jsx(_components.span, { className: "token class-name", children: "XMLHttpRequest" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" xhrRef", _jsx(_components.span, { className: "token punctuation", children: "." }), "current ", _jsx(_components.span, { className: "token operator", children: "=" }), " xhr", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" xhr", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "open" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'POST'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token string", children: "'/api/posts'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token boolean", children: "true" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" xhr", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "setRequestHeader" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'Content-Type'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token string", children: "'application/json'" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" xhr", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function-variable function", children: "onreadystatechange" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "if" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "xhr", _jsx(_components.span, { className: "token punctuation", children: "." }), "readyState ", _jsx(_components.span, { className: "token operator", children: "===" }), " ", _jsx(_components.span, { className: "token number", children: "4" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "if" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "xhr", _jsx(_components.span, { className: "token punctuation", children: "." }), "status ", _jsx(_components.span, { className: "token operator", children: "===" }), " ", _jsx(_components.span, { className: "token number", children: "201" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " created ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token constant", children: "JSON" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "parse" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "xhr", _jsx(_components.span, { className: "token punctuation", children: "." }), "responseText", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token function", children: "setPosts" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "prev ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token operator", children: "..." }), "prev", _jsx(_components.span, { className: "token punctuation", children: "," }), " created", _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token function", children: "setProgress" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token number", children: "100" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), " ", _jsx(_components.span, { className: "token keyword", children: "else" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token builtin", children: "console" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "error" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'创建失败'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " xhr", _jsx(_components.span, { className: "token punctuation", children: "." }), "status", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" xhrRef", _jsx(_components.span, { className: "token punctuation", children: "." }), "current ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token keyword", children: "null" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" xhr", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "send" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token constant", children: "JSON" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "stringify" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "newPost", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] })] }) }) })] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["表单格式 ", _jsx(_components.code, { children: "application/x-www-form-urlencoded" })] }), "\n"] }), "\n", _jsxs(_components.div, { className: "code-window", children: [_jsxs(_components.div, { className: "code-header", children: [_jsxs(_components.div, { className: "window-controls", children: [_jsx(_components.span, { className: "control close" }), _jsx(_components.span, { className: "control minimize" }), _jsx(_components.span, { className: "control maximize" })] }), _jsx(_components.span, { className: "code-lang", children: "ts" })] }), _jsx(_components.div, { className: "code-content", children: _jsx(_components.pre, { className: "language-ts", children: _jsxs(_components.code, { className: "language-ts code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token function-variable function", children: "submitForm" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "title", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token builtin", children: "string" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " content", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token builtin", children: "string" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " xhr ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token keyword", children: "new" }), " ", _jsx(_components.span, { className: "token class-name", children: "XMLHttpRequest" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" xhr", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "open" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'POST'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token string", children: "'/api/posts'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token boolean", children: "true" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" xhr", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "setRequestHeader" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'Content-Type'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token string", children: "'application/x-www-form-urlencoded'" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " body ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token keyword", children: "new" }), " ", _jsx(_components.span, { className: "token class-name", children: "URLSearchParams" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), " title", _jsx(_components.span, { className: "token punctuation", children: "," }), " content ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "toString" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" xhr", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function-variable function", children: "onreadystatechange" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " ", _jsx(_components.span, { className: "token comment", children: "/* 同上 */" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" xhr", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "send" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "body", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] })] }) }) })] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "formdata上传文件格式,不过xhr可以识别formdata格式" }), "\n"] }), "\n", _jsxs(_components.div, { className: "code-window", children: [_jsxs(_components.div, { className: "code-header", children: [_jsxs(_components.div, { className: "window-controls", children: [_jsx(_components.span, { className: "control close" }), _jsx(_components.span, { className: "control minimize" }), _jsx(_components.span, { className: "control maximize" })] }), _jsx(_components.span, { className: "code-lang", children: "ts" })] }), _jsx(_components.div, { className: "code-content", children: _jsx(_components.pre, { className: "language-ts", children: _jsxs(_components.code, { className: "language-ts code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token function-variable function", children: "uploadFile" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "file", _jsx(_components.span, { className: "token operator", children: ":" }), " File", _jsx(_components.span, { className: "token punctuation", children: "," }), " extraData", _jsx(_components.span, { className: "token operator", children: "?" }), _jsx(_components.span, { className: "token operator", children: ":" }), " Record", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token builtin", children: "string" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token builtin", children: "string" }), _jsx(_components.span, { className: "token operator", children: ">" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " formData ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token keyword", children: "new" }), " ", _jsx(_components.span, { className: "token class-name", children: "FormData" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" formData", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "append" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'file'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " file", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " ", _jsx(_components.span, { className: "token comment", children: "// 文件字段" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "if" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "extraData", _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" Object", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "entries" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "extraData", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "forEach" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "[" }), "key", _jsx(_components.span, { className: "token punctuation", children: "," }), " value", _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" formData", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "append" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "key", _jsx(_components.span, { className: "token punctuation", children: "," }), " value", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " ", _jsx(_components.span, { className: "token comment", children: "// 普通文本字段" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " xhr ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token keyword", children: "new" }), " ", _jsx(_components.span, { className: "token class-name", children: "XMLHttpRequest" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" xhr", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "open" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'POST'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token string", children: "'/api/upload'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token boolean", children: "true" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token comment", children: "// 不要手动设置 Content-Type，XHR 会自动处理" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token comment", children: "// 可选：监听上传进度" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" xhr", _jsx(_components.span, { className: "token punctuation", children: "." }), "upload", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "addEventListener" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'progress'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "e", _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "if" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "e", _jsx(_components.span, { className: "token punctuation", children: "." }), "lengthComputable", _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " percent ", _jsx(_components.span, { className: "token operator", children: "=" }), " Math", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "round" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "e", _jsx(_components.span, { className: "token punctuation", children: "." }), "loaded ", _jsx(_components.span, { className: "token operator", children: "/" }), " e", _jsx(_components.span, { className: "token punctuation", children: "." }), "total", _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "*" }), " ", _jsx(_components.span, { className: "token number", children: "100" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token builtin", children: "console" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "log" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsxs(_components.span, { className: "token template-string", children: [_jsx(_components.span, { className: "token template-punctuation string", children: "`" }), _jsx(_components.span, { className: "token string", children: "上传进度: " }), _jsxs(_components.span, { className: "token interpolation", children: [_jsx(_components.span, { className: "token interpolation-punctuation punctuation", children: "${" }), "percent", _jsx(_components.span, { className: "token interpolation-punctuation punctuation", children: "}" })] }), _jsx(_components.span, { className: "token string", children: "%" }), _jsx(_components.span, { className: "token template-punctuation string", children: "`" })] }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" xhr", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function-variable function", children: "onreadystatechange" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " ", _jsx(_components.span, { className: "token comment", children: "/* 同上 */" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" xhr", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "send" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "formData", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] })] }) }) })] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["二进制上传文件格式，xhr也可以知道二进制的格式，可以使用 ", _jsx(_components.code, { children: "ArrayBuffer" }), " 或 ", _jsx(_components.code, { children: "Blob" }), " 作为 ", _jsx(_components.code, { children: "send()" }), " 参数,这里以", _jsx(_components.code, { children: "blob" }), "为例子，设置请求头为 ", _jsx(_components.code, { children: "application/octet-stream" })] }), "\n"] }), "\n", _jsxs(_components.div, { className: "code-window", children: [_jsxs(_components.div, { className: "code-header", children: [_jsxs(_components.div, { className: "window-controls", children: [_jsx(_components.span, { className: "control close" }), _jsx(_components.span, { className: "control minimize" }), _jsx(_components.span, { className: "control maximize" })] }), _jsx(_components.span, { className: "code-lang", children: "ts" })] }), _jsx(_components.div, { className: "code-content", children: _jsx(_components.pre, { className: "language-ts", children: _jsxs(_components.code, { className: "language-ts code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token function-variable function", children: "uploadBinary" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "file", _jsx(_components.span, { className: "token operator", children: ":" }), " File", _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " xhr ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token keyword", children: "new" }), " ", _jsx(_components.span, { className: "token class-name", children: "XMLHttpRequest" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" xhr", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "open" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'POST'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token string", children: "'/api/upload-binary'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token boolean", children: "true" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line", children: " \n" }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token comment", children: "// 可选：设置请求头（告诉服务器数据类型）" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" xhr", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "setRequestHeader" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'Content-Type'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token string", children: "'application/octet-stream'" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token comment", children: "// 也可以自定义其他头，如 xhr.setRequestHeader('X-File-Name', file.name);" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" xhr", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function-variable function", children: "onreadystatechange" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " ", _jsx(_components.span, { className: "token comment", children: "/* 同上 */" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token comment", children: "// 直接 send Blob" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" xhr", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "send" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "file", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] })] }) }) })] }), "\n", _jsxs(_components.h2, { id: "fetch-api", children: ["Fetch API", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#fetch-api", children: _jsx(_components.span, { className: "icon icon-link" }) })] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "fetch" }), "与", _jsx(_components.code, { children: "XMLHttpRequest" }), "都是前端用来与服务端进行交互的方式，不过："] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "fetch" }), "更加方便简洁现代化，而", _jsx(_components.code, { children: "XMLHttpRequest" }), "使用起来会更为繁琐"] }), "\n", _jsxs(_components.li, { children: ["但是", _jsx(_components.code, { children: "fetch" }), "默认支持get和post，而", _jsx(_components.code, { children: "XMLHttpRequest" }), "支持所有标准HTTP请求方式"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "fetch" }), "直接配置即可修改请求头，而", _jsx(_components.code, { children: "XMLHttpRequest" }), "需要使用它的api"] }), "\n", _jsxs(_components.li, { children: ["但是", _jsx(_components.code, { children: "fetch" }), "取消请求不方便，而且无法设置超时时间"] }), "\n"] }), "\n", _jsx(_components.p, { children: "一次简单的fetch调用:" }), "\n", _jsxs(_components.div, { className: "code-window", children: [_jsxs(_components.div, { className: "code-header", children: [_jsxs(_components.div, { className: "window-controls", children: [_jsx(_components.span, { className: "control close" }), _jsx(_components.span, { className: "control minimize" }), _jsx(_components.span, { className: "control maximize" })] }), _jsx(_components.span, { className: "code-lang", children: "ts" })] }), _jsx(_components.div, { className: "code-content", children: _jsx(_components.pre, { className: "language-ts", children: _jsxs(_components.code, { className: "language-ts code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token function-variable function", children: "Fetch" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), "posts", _jsx(_components.span, { className: "token punctuation", children: "," }), " setPosts", _jsx(_components.span, { className: "token punctuation", children: "]" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " React", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsxs(_components.span, { className: "token generic-function", children: [_jsx(_components.span, { className: "token function", children: "useState" }), _jsxs(_components.span, { className: "token generic class-name", children: [_jsx(_components.span, { className: "token operator", children: "<" }), "Post", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token operator", children: ">" })] })] }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), "isPending", _jsx(_components.span, { className: "token punctuation", children: "," }), " startTransition", _jsx(_components.span, { className: "token punctuation", children: "]" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " React", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "useTransition" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token function-variable function", children: "fetchData" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token keyword", children: "async" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token comment", children: "// fetch api默认是GET请求 " }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "try" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " response ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token keyword", children: "await" }), " ", _jsx(_components.span, { className: "token function", children: "fetch" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'/api/posts'" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "then" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "res ", _jsx(_components.span, { className: "token operator", children: "=>" }), " res", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "json" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token comment", children: "// 把更新posts的操作过渡到下一次事件循环 " }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token function", children: "startTransition" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token function", children: "setPosts" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "response", _jsx(_components.span, { className: "token punctuation", children: "." }), "data ", _jsx(_components.span, { className: "token keyword", children: "as" }), " Post", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "catch" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "error", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token builtin", children: "unknown" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token builtin", children: "console" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "error" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'Error fetching data:'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " error", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "return" }), " ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: ">" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), "div style", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "display", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'flex'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " alignItems", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'center'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " gap", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'50px'" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token operator", children: ">" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), "Button type", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token string", children: "'primary'" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), " onClick", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "fetchData", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token operator", children: ">" }), "Fetch Data", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "Button", _jsx(_components.span, { className: "token operator", children: ">" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "isPending ", _jsx(_components.span, { className: "token operator", children: "&&" }), " ", _jsx(_components.span, { className: "token operator", children: "<" }), "Spin size", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"large\"" }), " ", _jsx(_components.span, { className: "token operator", children: "/" }), _jsx(_components.span, { className: "token operator", children: ">" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "div", _jsx(_components.span, { className: "token operator", children: ">" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), "Table columns", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "columns", _jsx(_components.span, { className: "token punctuation", children: "}" }), " dataSource", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "posts", _jsx(_components.span, { className: "token punctuation", children: "}" }), " rowKey", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"id\"" }), " ", _jsx(_components.span, { className: "token operator", children: "/" }), _jsx(_components.span, { className: "token operator", children: ">" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), _jsx(_components.span, { className: "token operator", children: ">" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] })] }) }) })] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["进度监控,", _jsx(_components.code, { children: "fetch" }), "的进度监控非常麻烦，所以中大型项目大都会使用", _jsx(_components.code, { children: "axios" }), "去做"] }), "\n"] }), "\n", _jsxs(_components.div, { className: "code-window", children: [_jsxs(_components.div, { className: "code-header", children: [_jsxs(_components.div, { className: "window-controls", children: [_jsx(_components.span, { className: "control close" }), _jsx(_components.span, { className: "control minimize" }), _jsx(_components.span, { className: "control maximize" })] }), _jsx(_components.span, { className: "code-lang", children: "ts" })] }), _jsx(_components.div, { className: "code-content", children: _jsx(_components.pre, { className: "language-ts", children: _jsxs(_components.code, { className: "language-ts code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "const" }), " response ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token keyword", children: "await" }), " ", _jsx(_components.span, { className: "token function", children: "fetch" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'/api/posts'" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "then" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token keyword", children: "async" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "res", _jsx(_components.span, { className: "token operator", children: ":" }), " Response", _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " resClone ", _jsx(_components.span, { className: "token operator", children: "=" }), " res", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "clone" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token comment", children: "// 获取当前进度和总进度, reader为返回流 " }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " reader ", _jsx(_components.span, { className: "token operator", children: "=" }), " res", _jsx(_components.span, { className: "token punctuation", children: "." }), "body", _jsx(_components.span, { className: "token operator", children: "?." }), _jsx(_components.span, { className: "token function", children: "getReader" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " total ", _jsx(_components.span, { className: "token operator", children: "=" }), " res", _jsx(_components.span, { className: "token punctuation", children: "." }), "headers", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "get" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "\"Content-Length\"" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "||" }), " ", _jsx(_components.span, { className: "token string", children: "\"0\"" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "let" }), " loaded", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token builtin", children: "number" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "while" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token boolean", children: "true" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: ["\t\t\t", _jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "done", _jsx(_components.span, { className: "token punctuation", children: "," }), " value", _jsx(_components.span, { className: "token punctuation", children: "}" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token keyword", children: "await" }), " reader", _jsx(_components.span, { className: "token operator", children: "?." }), _jsx(_components.span, { className: "token function", children: "read" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token keyword", children: "as" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: ["\t\t\t ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "done", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token builtin", children: "boolean" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " value", _jsx(_components.span, { className: "token operator", children: ":" }), " Uint8Array", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "if" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "done", _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token keyword", children: "break" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" loaded ", _jsx(_components.span, { className: "token operator", children: "+=" }), " value", _jsx(_components.span, { className: "token punctuation", children: "." }), "length", _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" progress", _jsx(_components.span, { className: "token punctuation", children: "." }), "current ", _jsx(_components.span, { className: "token operator", children: "=" }), " Math", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "round" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "loaded ", _jsx(_components.span, { className: "token operator", children: "/" }), " ", _jsx(_components.span, { className: "token function", children: "parseInt" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "total", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "*" }), " ", _jsx(_components.span, { className: "token number", children: "100" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "return" }), " resClone", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "json" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token comment", children: "// 把更新posts的操作过渡到下一次事件循环 " }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token function", children: "startTransition" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token function", children: "setPosts" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "response", _jsx(_components.span, { className: "token punctuation", children: "." }), "data ", _jsx(_components.span, { className: "token keyword", children: "as" }), " Post", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] })] }) }) })] }), "\n", _jsxs(_components.h2, { id: "sse单向传输", children: ["SSE单向传输", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#sse单向传输", children: _jsx(_components.span, { className: "icon icon-link" }) })] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "SSE" }), "(server send service)用于服务器主动向客户端推送数据，和webSocket不同的是，SSE只能做单向数据流。利用http的长链接特性，建立一条持久化连接。"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "SSE适用于AI聊天的返回内容" }), "\n", _jsx(_components.li, { children: "其次适用于数据大屏，但是还是需要保证兼容性" }), "\n"] }), "\n", _jsxs(_components.h3, { id: "模拟股票折线图和表格", children: ["模拟股票折线图和表格", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#模拟股票折线图和表格", children: _jsx(_components.span, { className: "icon icon-link" }) })] }), "\n", _jsx(_components.p, { children: "实现一个如下所示的效果" }), "\n", _jsx(R2Image, { r2Key: "blog/front-network/2.png", alt: "2", className: "", caption: "" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["首先安装echarts，", _jsx(_components.code, { children: "pnpm add echarts echarts-for-react" }), "，然后定义数据类型："] }), "\n"] }), "\n", _jsxs(_components.div, { className: "code-window", children: [_jsxs(_components.div, { className: "code-header", children: [_jsxs(_components.div, { className: "window-controls", children: [_jsx(_components.span, { className: "control close" }), _jsx(_components.span, { className: "control minimize" }), _jsx(_components.span, { className: "control maximize" })] }), _jsx(_components.span, { className: "code-lang", children: "ts" })] }), _jsx(_components.div, { className: "code-content", children: _jsx(_components.pre, { className: "language-ts", children: _jsxs(_components.code, { className: "language-ts code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token comment", children: "// 定义 K 线数据类型 " }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "interface" }), " ", _jsx(_components.span, { className: "token class-name", children: "KlineData" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" timestamp", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token builtin", children: "number" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" datetime", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token builtin", children: "string" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token builtin", children: "symbol" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token builtin", children: "string" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" open", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token builtin", children: "number" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" high", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token builtin", children: "number" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" low", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token builtin", children: "number" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" close", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token builtin", children: "number" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" volume", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token builtin", children: "number" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" change", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token builtin", children: "number" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" changePercent", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token builtin", children: "number" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token constant", children: "SSE_URL" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token string", children: "'/api/sse/stock-kline'" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] })] }) }) })] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "定义表格列" }), "\n"] }), "\n", _jsxs(_components.div, { className: "code-window", children: [_jsxs(_components.div, { className: "code-header", children: [_jsxs(_components.div, { className: "window-controls", children: [_jsx(_components.span, { className: "control close" }), _jsx(_components.span, { className: "control minimize" }), _jsx(_components.span, { className: "control maximize" })] }), _jsx(_components.span, { className: "code-lang", children: "ts" })] }), _jsx(_components.div, { className: "code-content", children: _jsx(_components.pre, { className: "language-ts", children: _jsxs(_components.code, { className: "language-ts code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token comment", children: "// 表格列定义 " }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "const" }), " columns", _jsx(_components.span, { className: "token operator", children: ":" }), " ColumnsType", _jsx(_components.span, { className: "token operator", children: "<" }), "KlineData", _jsx(_components.span, { className: "token operator", children: ">" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " title", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'时间'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " dataIndex", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'datetime'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " key", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'datetime'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " width", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "180" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " title", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'开盘'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " dataIndex", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'open'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " key", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'open'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" align", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'right'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token function-variable function", children: "render" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "v", _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " v", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "toFixed" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token number", children: "2" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " title", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'最高'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " dataIndex", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'high'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " key", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'high'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" align", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'right'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token function-variable function", children: "render" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "v", _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " v", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "toFixed" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token number", children: "2" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " title", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'最低'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " dataIndex", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'low'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " key", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'low'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" align", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'right'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token function-variable function", children: "render" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "v", _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " v", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "toFixed" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token number", children: "2" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " title", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'收盘'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " dataIndex", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'close'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " key", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'close'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" align", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'right'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token function-variable function", children: "render" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "v", _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " v", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "toFixed" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token number", children: "2" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " title", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'涨跌额'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " dataIndex", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'change'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " key", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'change'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" align", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'right'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token function-variable function", children: "render" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "v", _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " v", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "toFixed" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token number", children: "2" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " title", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'涨跌幅(%)'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " dataIndex", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'changePercent'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " key", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'changePercent'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" align", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'right'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token function-variable function", children: "render" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "v", _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsxs(_components.span, { className: "token template-string", children: [_jsx(_components.span, { className: "token template-punctuation string", children: "`" }), _jsxs(_components.span, { className: "token interpolation", children: [_jsx(_components.span, { className: "token interpolation-punctuation punctuation", children: "${" }), "v", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "toFixed" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token number", children: "2" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token interpolation-punctuation punctuation", children: "}" })] }), _jsx(_components.span, { className: "token string", children: "%" }), _jsx(_components.span, { className: "token template-punctuation string", children: "`" })] }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " title", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'成交量'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " dataIndex", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'volume'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " key", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'volume'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" align", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'right'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token function-variable function", children: "render" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "v", _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " v", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "toLocaleString" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] })] }) }) })] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["使用", _jsx(_components.code, { children: "useCallback" }), "构建图表配置"] }), "\n"] }), "\n", _jsxs(_components.div, { className: "code-window", children: [_jsxs(_components.div, { className: "code-header", children: [_jsxs(_components.div, { className: "window-controls", children: [_jsx(_components.span, { className: "control close" }), _jsx(_components.span, { className: "control minimize" }), _jsx(_components.span, { className: "control maximize" })] }), _jsx(_components.span, { className: "code-lang", children: "ts" })] }), _jsx(_components.div, { className: "code-content", children: _jsx(_components.pre, { className: "language-ts", children: _jsxs(_components.code, { className: "language-ts code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token comment", children: "// 构建图表配置 " }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "const" }), " getChartOption ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token function", children: "useCallback" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "fullData", _jsx(_components.span, { className: "token operator", children: ":" }), " KlineData", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " chartData ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token operator", children: "..." }), "fullData", _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "reverse" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " categories ", _jsx(_components.span, { className: "token operator", children: "=" }), " chartData", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "map" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "item ", _jsx(_components.span, { className: "token operator", children: "=>" }), " item", _jsx(_components.span, { className: "token punctuation", children: "." }), "datetime", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "slice" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token number", children: "11" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token number", children: "19" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " closePrices ", _jsx(_components.span, { className: "token operator", children: "=" }), " chartData", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "map" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "item ", _jsx(_components.span, { className: "token operator", children: "=>" }), " item", _jsx(_components.span, { className: "token punctuation", children: "." }), "close", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " volumes ", _jsx(_components.span, { className: "token operator", children: "=" }), " chartData", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "map" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "item ", _jsx(_components.span, { className: "token operator", children: "=>" }), " item", _jsx(_components.span, { className: "token punctuation", children: "." }), "volume", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsx(_components.span, { className: "code-line", children: " \n" }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "return" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" title", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " text", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'实时股价走势'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " left", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'center'" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" tooltip", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " trigger", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'axis'" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" xAxis", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " type", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'category'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " data", _jsx(_components.span, { className: "token operator", children: ":" }), " categories", _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" axisLabel", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " rotate", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "45" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " interval", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'auto'" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" yAxis", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " type", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'value'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " name", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'价格'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " scale", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token boolean", children: "true" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " type", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'value'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " name", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'成交量'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " alignTicks", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token boolean", children: "true" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" axisLabel", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " ", _jsx(_components.span, { className: "token function-variable function", children: "formatter" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "v", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token builtin", children: "number" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "v ", _jsx(_components.span, { className: "token operator", children: "/" }), " ", _jsx(_components.span, { className: "token number", children: "1000" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "toFixed" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "+" }), " ", _jsx(_components.span, { className: "token string", children: "'k'" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" series", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" name", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'收盘价'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" type", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'line'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" data", _jsx(_components.span, { className: "token operator", children: ":" }), " closePrices", _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" smooth", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token boolean", children: "true" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" lineStyle", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " width", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "2" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " color", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'#ff6600'" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token builtin", children: "symbol" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'circle'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" symbolSize", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "4" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" name", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'成交量'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" type", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'bar'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" data", _jsx(_components.span, { className: "token operator", children: ":" }), " volumes", _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" yAxisIndex", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "1" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" itemStyle", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " color", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'#aaa'" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" dataZoom", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), " type", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'inside'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " start", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " end", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "100" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" grid", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " containLabel", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token boolean", children: "true" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " bottom", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "80" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] })] }) }) })] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "建立SSE链接" }), "\n"] }), "\n", _jsxs(_components.div, { className: "code-window", children: [_jsxs(_components.div, { className: "code-header", children: [_jsxs(_components.div, { className: "window-controls", children: [_jsx(_components.span, { className: "control close" }), _jsx(_components.span, { className: "control minimize" }), _jsx(_components.span, { className: "control maximize" })] }), _jsx(_components.span, { className: "code-lang", children: "ts" })] }), _jsx(_components.div, { className: "code-content", children: _jsx(_components.pre, { className: "language-ts", children: _jsxs(_components.code, { className: "language-ts code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token function", children: "useEffect" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " eventSource ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token keyword", children: "new" }), " ", _jsx(_components.span, { className: "token class-name", children: "EventSource" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token constant", children: "SSE_URL" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" eventSourceRef", _jsx(_components.span, { className: "token punctuation", children: "." }), "current ", _jsx(_components.span, { className: "token operator", children: "=" }), " eventSource", _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token function", children: "setConnectionStatus" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'connecting'" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsx(_components.span, { className: "code-line", children: " \n" }), _jsxs(_components.span, { className: "code-line", children: [" eventSource", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "addEventListener" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'kline'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "event", _jsx(_components.span, { className: "token operator", children: ":" }), " MessageEvent", _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "try" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " newData", _jsx(_components.span, { className: "token operator", children: ":" }), " KlineData ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token constant", children: "JSON" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "parse" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "event", _jsx(_components.span, { className: "token punctuation", children: "." }), "data", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token comment", children: "// 使用 startTransition 降低更新优先级，避免界面卡顿 " }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token function", children: "startTransition" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token function", children: "setDataList" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "prev ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), "newData", _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token operator", children: "..." }), "prev", _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "slice" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token number", children: "100" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token function", children: "setConnectionStatus" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'connected'" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), " ", _jsx(_components.span, { className: "token keyword", children: "catch" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "err", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token builtin", children: "unknown" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token builtin", children: "console" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "error" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'解析数据失败'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " err", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsx(_components.span, { className: "code-line", children: " \n" }), _jsxs(_components.span, { className: "code-line", children: [" eventSource", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function-variable function", children: "onerror" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token function", children: "setConnectionStatus" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'error'" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" eventSource", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "close" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" eventSourceRef", _jsx(_components.span, { className: "token punctuation", children: "." }), "current ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token keyword", children: "null" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsx(_components.span, { className: "code-line", children: " \n" }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "return" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" eventSource", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "close" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" eventSourceRef", _jsx(_components.span, { className: "token punctuation", children: "." }), "current ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token keyword", children: "null" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), "startTransition", _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] })] }) }) })] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "自动重连函数：" }), "\n"] }), "\n", _jsxs(_components.div, { className: "code-window", children: [_jsxs(_components.div, { className: "code-header", children: [_jsxs(_components.div, { className: "window-controls", children: [_jsx(_components.span, { className: "control close" }), _jsx(_components.span, { className: "control minimize" }), _jsx(_components.span, { className: "control maximize" })] }), _jsx(_components.span, { className: "code-lang", children: "ts" })] }), _jsx(_components.div, { className: "code-content", children: _jsx(_components.pre, { className: "language-ts", children: _jsxs(_components.code, { className: "language-ts code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token function-variable function", children: "reconnect" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" eventSourceRef", _jsx(_components.span, { className: "token punctuation", children: "." }), "current ", _jsx(_components.span, { className: "token operator", children: "&&" }), " eventSourceRef", _jsx(_components.span, { className: "token punctuation", children: "." }), "current", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "close" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " eventSource ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token keyword", children: "new" }), " ", _jsx(_components.span, { className: "token class-name", children: "EventSource" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token constant", children: "SSE_URL" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" eventSourceRef", _jsx(_components.span, { className: "token punctuation", children: "." }), "current ", _jsx(_components.span, { className: "token operator", children: "=" }), " eventSource", _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token function", children: "setConnectionStatus" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'connecting'" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsx(_components.span, { className: "code-line", children: " \n" }), _jsxs(_components.span, { className: "code-line", children: [" eventSource", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "addEventListener" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'kline'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "event", _jsx(_components.span, { className: "token operator", children: ":" }), " MessageEvent", _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "try" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " newData", _jsx(_components.span, { className: "token operator", children: ":" }), " KlineData ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token constant", children: "JSON" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "parse" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "event", _jsx(_components.span, { className: "token punctuation", children: "." }), "data", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token function", children: "startTransition" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token function", children: "setDataList" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "prev ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), "newData", _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token operator", children: "..." }), "prev", _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "slice" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token number", children: "200" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token function", children: "setConnectionStatus" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'connected'" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), " ", _jsx(_components.span, { className: "token keyword", children: "catch" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "err", _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token builtin", children: "console" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "error" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'解析数据失败'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " err", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsx(_components.span, { className: "code-line", children: " \n" }), _jsxs(_components.span, { className: "code-line", children: [" eventSource", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function-variable function", children: "onerror" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token function", children: "setConnectionStatus" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'error'" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" eventSource", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "close" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" eventSourceRef", _jsx(_components.span, { className: "token punctuation", children: "." }), "current ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token keyword", children: "null" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] })] }) }) })] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "UI组件" }), "\n"] }), "\n", _jsxs(_components.div, { className: "code-window", children: [_jsxs(_components.div, { className: "code-header", children: [_jsxs(_components.div, { className: "window-controls", children: [_jsx(_components.span, { className: "control close" }), _jsx(_components.span, { className: "control minimize" }), _jsx(_components.span, { className: "control maximize" })] }), _jsx(_components.span, { className: "code-lang", children: "html" })] }), _jsx(_components.div, { className: "code-content", children: _jsx(_components.pre, { className: "language-html", children: _jsxs(_components.code, { className: "language-html code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "Card"] }), " ", _jsxs(_components.span, { className: "token special-attr", children: [_jsx(_components.span, { className: "token attr-name", children: "style" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsxs(_components.span, { className: "token value css language-css", children: [_jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token punctuation", children: "{" })] })] })] }), " ", _jsx(_components.span, { className: "token attr-name", children: _jsx(_components.span, { className: "token namespace", children: "margin:" }) }), " ", _jsx(_components.span, { className: "token attr-name", children: "20" }), " ", _jsx(_components.span, { className: "token attr-name", children: "}}" }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "div"] }), " ", _jsxs(_components.span, { className: "token special-attr", children: [_jsx(_components.span, { className: "token attr-name", children: "style" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsxs(_components.span, { className: "token value css language-css", children: [_jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token punctuation", children: "{" })] })] })] }), " ", _jsx(_components.span, { className: "token attr-name", children: _jsx(_components.span, { className: "token namespace", children: "display:" }) }), " ", _jsx(_components.span, { className: "token attr-name", children: "'flex'," }), " ", _jsx(_components.span, { className: "token attr-name", children: _jsx(_components.span, { className: "token namespace", children: "alignItems:" }) }), " ", _jsx(_components.span, { className: "token attr-name", children: "'center'," }), " ", _jsx(_components.span, { className: "token attr-name", children: _jsx(_components.span, { className: "token namespace", children: "gap:" }) }), " ", _jsx(_components.span, { className: "token attr-name", children: "16," }), " ", _jsx(_components.span, { className: "token attr-name", children: _jsx(_components.span, { className: "token namespace", children: "marginBottom:" }) }), " ", _jsx(_components.span, { className: "token attr-name", children: "16" }), " ", _jsx(_components.span, { className: "token attr-name", children: "}}" }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), " \n"] }), _jsx(_components.span, { className: "code-line", children: " \n" }), _jsx(_components.span, { className: "code-line", children: " {connectionStatus === 'error' && ( \n" }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "Button"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "type" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "primary", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), " ", _jsxs(_components.span, { className: "token special-attr", children: [_jsx(_components.span, { className: "token attr-name", children: "onClick" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsxs(_components.span, { className: "token value javascript language-javascript", children: [_jsx(_components.span, { className: "token punctuation", children: "{" }), "reconnect", _jsx(_components.span, { className: "token punctuation", children: "}" })] })] })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), " \n"] }), _jsx(_components.span, { className: "code-line", children: " 重连 \n" }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), " \n"] }), _jsx(_components.span, { className: "code-line", children: " )} \n" }), _jsxs(_components.span, { className: "code-line", children: [" {isPending && ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "Spin"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "size" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "small", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), " ", _jsx(_components.span, { className: "token punctuation", children: "/>" })] }), "} \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), " \n"] }), _jsx(_components.span, { className: "code-line", children: " \n" }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "ReactECharts"] }), " \n"] })] }), _jsx(_components.span, { className: "code-line", children: _jsxs(_components.span, { className: "token tag", children: ["\t\t", _jsx(_components.span, { className: "token attr-name", children: "option" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), "{getChartOption(dataList)}"] }), " \n"] }) }), _jsx(_components.span, { className: "code-line", children: _jsxs(_components.span, { className: "token tag", children: [" ", _jsxs(_components.span, { className: "token special-attr", children: [_jsx(_components.span, { className: "token attr-name", children: "style" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsxs(_components.span, { className: "token value css language-css", children: [_jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token punctuation", children: "{" })] })] })] }), " ", _jsx(_components.span, { className: "token attr-name", children: _jsx(_components.span, { className: "token namespace", children: "height:" }) }), " ", _jsx(_components.span, { className: "token attr-name", children: "500," }), " ", _jsx(_components.span, { className: "token attr-name", children: _jsx(_components.span, { className: "token namespace", children: "width:" }) }), " ", _jsx(_components.span, { className: "token attr-name", children: "'100%'" }), " ", _jsx(_components.span, { className: "token attr-name", children: "}}" }), " \n"] }) }), _jsx(_components.span, { className: "code-line", children: _jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token attr-name", children: "notMerge" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), "{false}"] }), " \n"] }) }), _jsx(_components.span, { className: "code-line", children: _jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token attr-name", children: "lazyUpdate" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), "{true}"] }), " \n"] }) }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "/>" })] }), " \n"] }), _jsx(_components.span, { className: "code-line", children: " \n" }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "Table"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "columns" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), "{columns}"] }), " \n"] })] }), _jsx(_components.span, { className: "code-line", children: _jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token attr-name", children: "dataSource" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), "{dataList}"] }), " \n"] }) }), _jsx(_components.span, { className: "code-line", children: _jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token attr-name", children: "rowKey" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "timestamp", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), " \n"] }) }), _jsx(_components.span, { className: "code-line", children: _jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token attr-name", children: "size" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "small", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), " \n"] }) }), _jsx(_components.span, { className: "code-line", children: _jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token attr-name", children: "scroll" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), "{{"] }), " ", _jsx(_components.span, { className: "token attr-name", children: _jsx(_components.span, { className: "token namespace", children: "y:" }) }), " ", _jsx(_components.span, { className: "token attr-name", children: "400" }), " ", _jsx(_components.span, { className: "token attr-name", children: "}}" }), " \n"] }) }), _jsx(_components.span, { className: "code-line", children: _jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token attr-name", children: "pagination" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), "{false}"] }), " \n"] }) }), _jsx(_components.span, { className: "code-line", children: _jsxs(_components.span, { className: "token tag", children: [" ", _jsxs(_components.span, { className: "token special-attr", children: [_jsx(_components.span, { className: "token attr-name", children: "style" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsxs(_components.span, { className: "token value css language-css", children: [_jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token punctuation", children: "{" })] })] })] }), " ", _jsx(_components.span, { className: "token attr-name", children: _jsx(_components.span, { className: "token namespace", children: "marginTop:" }) }), " ", _jsx(_components.span, { className: "token attr-name", children: "16" }), " ", _jsx(_components.span, { className: "token attr-name", children: "}}" }), " \n"] }) }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "/>" })] }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] })] }) }) })] }), "\n", _jsxs(_components.h3, { id: "microsoftfetch-event-source接收post", children: ["@microsoft/fetch-event-source接收post", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#microsoftfetch-event-source接收post", children: _jsx(_components.span, { className: "icon icon-link" }) })] }), "\n", _jsx(_components.p, { children: "首先改造pages页面并且把之前的SSE实时折线图改成组件，并且在当前sse页面中使用antd的tabs切换：" }), "\n", _jsxs(_components.div, { className: "code-window", children: [_jsxs(_components.div, { className: "code-header", children: [_jsxs(_components.div, { className: "window-controls", children: [_jsx(_components.span, { className: "control close" }), _jsx(_components.span, { className: "control minimize" }), _jsx(_components.span, { className: "control maximize" })] }), _jsx(_components.span, { className: "code-lang", children: "tsx" })] }), _jsx(_components.div, { className: "code-content", children: _jsx(_components.pre, { className: "language-tsx", children: _jsxs(_components.code, { className: "language-tsx code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token maybe-class-name", children: "ZheXian" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token maybe-class-name", children: "React" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "lazy" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "import" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'../components/sse/zhexian'" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "then" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "m ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), " ", _jsx(_components.span, { className: "token keyword", children: "default" }), _jsx(_components.span, { className: "token operator", children: ":" }), " m", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: _jsx(_components.span, { className: "token maybe-class-name", children: "ZheXian" }) }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token maybe-class-name", children: "AiFont" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token maybe-class-name", children: "React" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "lazy" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "import" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'../components/sse/AIFont'" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "then" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "m ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), " ", _jsx(_components.span, { className: "token keyword", children: "default" }), _jsx(_components.span, { className: "token operator", children: ":" }), " m", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: _jsx(_components.span, { className: "token maybe-class-name", children: "AiFont" }) }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "const" }), " items", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token maybe-class-name", children: "TabsProps" }), _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token string", children: "'items'" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" key", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'1'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" label", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'AI打字'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" children", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), _jsx(_components.span, { className: "token class-name", children: "AiFont" })] }), _jsx(_components.span, { className: "token punctuation", children: "/>" })] }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" key", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'2'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" label", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'折线图'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" children", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), _jsx(_components.span, { className: "token class-name", children: "ZheXian" })] }), _jsx(_components.span, { className: "token punctuation", children: "/>" })] }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token constant", children: "SSE" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token maybe-class-name", children: "React" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method-variable function-variable method function property-access", children: _jsx(_components.span, { className: "token maybe-class-name", children: "FC" }) }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), _jsx(_components.span, { className: "token class-name", children: "Suspense" })] }), " ", _jsx(_components.span, { className: "token attr-name", children: "fallback" }), _jsxs(_components.span, { className: "token script language-javascript", children: [_jsx(_components.span, { className: "token script-punctuation punctuation", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), _jsx(_components.span, { className: "token class-name", children: "Spin" })] }), " ", _jsx(_components.span, { className: "token attr-name", children: "size" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "large", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), " ", _jsx(_components.span, { className: "token punctuation", children: "/>" })] }), _jsx(_components.span, { className: "token punctuation", children: "}" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text", children: " \n" })] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), _jsx(_components.span, { className: "token class-name", children: "Tabs" })] }), " ", _jsx(_components.span, { className: "token attr-name", children: "tabPlacement" }), _jsxs(_components.span, { className: "token script language-javascript", children: [_jsx(_components.span, { className: "token script-punctuation punctuation", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token string", children: "'start'" }), _jsx(_components.span, { className: "token punctuation", children: "}" })] }), " \n"] })] }), _jsx(_components.span, { className: "code-line", children: _jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token attr-name", children: "defaultActiveKey" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "1", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), " \n"] }) }), _jsx(_components.span, { className: "code-line", children: _jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token attr-name", children: "items" }), _jsxs(_components.span, { className: "token script language-javascript", children: [_jsx(_components.span, { className: "token script-punctuation punctuation", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "items", _jsx(_components.span, { className: "token punctuation", children: "}" })] }), " \n"] }) }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "/>" })] }), _jsx(_components.span, { className: "token plain-text", children: "; \n" })] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "export" }), " ", _jsx(_components.span, { className: "token keyword", children: "default" }), " ", _jsx(_components.span, { className: "token constant", children: "SSE" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] })] }) }) })] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["安装", _jsx(_components.code, { children: "pnpm add @microsoft/fetch-event-source" }), ",然后请求后端，然后代码如下，一个input输入，一个按钮提交"] }), "\n"] }), "\n", _jsxs(_components.div, { className: "code-window", children: [_jsxs(_components.div, { className: "code-header", children: [_jsxs(_components.div, { className: "window-controls", children: [_jsx(_components.span, { className: "control close" }), _jsx(_components.span, { className: "control minimize" }), _jsx(_components.span, { className: "control maximize" })] }), _jsx(_components.span, { className: "code-lang", children: "ts" })] }), _jsx(_components.div, { className: "code-content", children: _jsx(_components.pre, { className: "language-ts", children: _jsxs(_components.code, { className: "language-ts code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "import" }), " React ", _jsx(_components.span, { className: "token keyword", children: "from" }), " ", _jsx(_components.span, { className: "token string", children: "'react'" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "import" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " Button", _jsx(_components.span, { className: "token punctuation", children: "," }), " Input", _jsx(_components.span, { className: "token punctuation", children: "," }), " Spin ", _jsx(_components.span, { className: "token punctuation", children: "}" }), " ", _jsx(_components.span, { className: "token keyword", children: "from" }), " ", _jsx(_components.span, { className: "token string", children: "'antd'" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "import" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " debounce ", _jsx(_components.span, { className: "token punctuation", children: "}" }), " ", _jsx(_components.span, { className: "token keyword", children: "from" }), " ", _jsx(_components.span, { className: "token string", children: "'lodash-es'" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "import" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " fetchEventSource ", _jsx(_components.span, { className: "token punctuation", children: "}" }), " ", _jsx(_components.span, { className: "token keyword", children: "from" }), " ", _jsx(_components.span, { className: "token string", children: "'@microsoft/fetch-event-source'" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsx(_components.span, { className: "code-line", children: " \n" }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token constant", children: "SSE_URL" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token string", children: "'/api/sse/ai-chat'" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsx(_components.span, { className: "code-line", children: " \n" }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "export" }), " ", _jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token function-variable function", children: "AiFont" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), "inputValue", _jsx(_components.span, { className: "token punctuation", children: "," }), " setInputValue", _jsx(_components.span, { className: "token punctuation", children: "]" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " React", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "useState" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "''" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), "answer", _jsx(_components.span, { className: "token punctuation", children: "," }), " setAnswer", _jsx(_components.span, { className: "token punctuation", children: "]" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " React", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "useState" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "''" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), "isLoading", _jsx(_components.span, { className: "token punctuation", children: "," }), " setIsLoading", _jsx(_components.span, { className: "token punctuation", children: "]" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " React", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "useState" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token boolean", children: "false" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " hasStartedRef ", _jsx(_components.span, { className: "token operator", children: "=" }), " React", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "useRef" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token boolean", children: "false" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " abortControllerRef ", _jsx(_components.span, { className: "token operator", children: "=" }), " React", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsxs(_components.span, { className: "token generic-function", children: [_jsx(_components.span, { className: "token function", children: "useRef" }), _jsxs(_components.span, { className: "token generic class-name", children: [_jsx(_components.span, { className: "token operator", children: "<" }), "AbortController ", _jsx(_components.span, { className: "token operator", children: "|" }), " ", _jsx(_components.span, { className: "token keyword", children: "null" }), _jsx(_components.span, { className: "token operator", children: ">" })] })] }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token keyword", children: "null" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsx(_components.span, { className: "code-line", children: " \n" }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " handleInputChange ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token function", children: "debounce" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "e", _jsx(_components.span, { className: "token operator", children: ":" }), " React", _jsx(_components.span, { className: "token punctuation", children: "." }), "ChangeEvent", _jsx(_components.span, { className: "token operator", children: "<" }), "HTMLInputElement", _jsx(_components.span, { className: "token operator", children: ">" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token function", children: "setInputValue" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "e", _jsx(_components.span, { className: "token punctuation", children: "." }), "target", _jsx(_components.span, { className: "token punctuation", children: "." }), "value", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token number", children: "100" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsx(_components.span, { className: "code-line", children: " \n" }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token function-variable function", children: "handleClick" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "if" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token operator", children: "!" }), "inputValue", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "trim" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token keyword", children: "return" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token comment", children: "// 取消上一次未完成的请求 " }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "if" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "abortControllerRef", _jsx(_components.span, { className: "token punctuation", children: "." }), "current", _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" abortControllerRef", _jsx(_components.span, { className: "token punctuation", children: "." }), "current", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "abort" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token function", children: "setIsLoading" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token boolean", children: "true" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token function", children: "setAnswer" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "''" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" hasStartedRef", _jsx(_components.span, { className: "token punctuation", children: "." }), "current ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token boolean", children: "false" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsx(_components.span, { className: "code-line", children: " \n" }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " controller ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token keyword", children: "new" }), " ", _jsx(_components.span, { className: "token class-name", children: "AbortController" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" abortControllerRef", _jsx(_components.span, { className: "token punctuation", children: "." }), "current ", _jsx(_components.span, { className: "token operator", children: "=" }), " controller", _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsx(_components.span, { className: "code-line", children: " \n" }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token function", children: "fetchEventSource" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token constant", children: "SSE_URL" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" method", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'POST'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" body", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token constant", children: "JSON" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "stringify" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), " message", _jsx(_components.span, { className: "token operator", children: ":" }), " inputValue ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" signal", _jsx(_components.span, { className: "token operator", children: ":" }), " controller", _jsx(_components.span, { className: "token punctuation", children: "." }), "signal", _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token function-variable function", children: "onmessage" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "ev", _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " data ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token constant", children: "JSON" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "parse" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "ev", _jsx(_components.span, { className: "token punctuation", children: "." }), "data", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "if" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "data", _jsx(_components.span, { className: "token punctuation", children: "." }), "content", _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token comment", children: "// 只在第一次收到有效内容时隐藏 loading " }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "if" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token operator", children: "!" }), "hasStartedRef", _jsx(_components.span, { className: "token punctuation", children: "." }), "current", _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" hasStartedRef", _jsx(_components.span, { className: "token punctuation", children: "." }), "current ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token boolean", children: "true" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token function", children: "setIsLoading" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token boolean", children: "false" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token function", children: "setAnswer" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "prev ", _jsx(_components.span, { className: "token operator", children: "=>" }), " prev ", _jsx(_components.span, { className: "token operator", children: "+" }), " data", _jsx(_components.span, { className: "token punctuation", children: "." }), "content", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token function-variable function", children: "onclose" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "if" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token operator", children: "!" }), "hasStartedRef", _jsx(_components.span, { className: "token punctuation", children: "." }), "current", _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token function", children: "setIsLoading" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token boolean", children: "false" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" abortControllerRef", _jsx(_components.span, { className: "token punctuation", children: "." }), "current ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token keyword", children: "null" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token function-variable function", children: "onerror" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "err", _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token builtin", children: "console" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "error" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "err", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token function", children: "setIsLoading" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token boolean", children: "false" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" abortControllerRef", _jsx(_components.span, { className: "token punctuation", children: "." }), "current ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token keyword", children: "null" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsx(_components.span, { className: "code-line", children: " \n" }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "return" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: ">" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), "div style", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" display", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'flex'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " gap", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "16" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " alignItems", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'center'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " marginBottom", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "20" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token operator", children: ">" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), "label", _jsx(_components.span, { className: "token operator", children: ">" }), "提问", _jsx(_components.span, { className: "token operator", children: ":" }), _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "label", _jsx(_components.span, { className: "token operator", children: ">" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), "Input placeholder", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"请输入问题\"" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" onChange", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "handleInputChange", _jsx(_components.span, { className: "token punctuation", children: "}" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" style", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), " flex", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "1" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), " ", _jsx(_components.span, { className: "token operator", children: "/" }), _jsx(_components.span, { className: "token operator", children: ">" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), "Button type", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"primary\"" }), " onClick", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "handleClick", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token operator", children: ">" }), "提交", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "Button", _jsx(_components.span, { className: "token operator", children: ">" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), "Button type", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"primary\"" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" onClick", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " abortControllerRef", _jsx(_components.span, { className: "token punctuation", children: "." }), "current", _jsx(_components.span, { className: "token operator", children: "?." }), _jsx(_components.span, { className: "token function", children: "abort" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsx(_components.span, { className: "code-line", children: " 取消\n" }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "Button", _jsx(_components.span, { className: "token operator", children: ">" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "div", _jsx(_components.span, { className: "token operator", children: ">" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), "section style", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), " marginTop", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "20" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token operator", children: ">" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "isLoading ", _jsx(_components.span, { className: "token operator", children: "&&" }), " ", _jsx(_components.span, { className: "token operator", children: "<" }), "Spin size", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"large\"" }), " ", _jsx(_components.span, { className: "token operator", children: "/" }), _jsx(_components.span, { className: "token operator", children: ">" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "answer ", _jsx(_components.span, { className: "token operator", children: "&&" }), " ", _jsx(_components.span, { className: "token operator", children: "<" }), "pre style", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), " whiteSpace", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'pre-wrap'" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token operator", children: ">" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "answer", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "pre", _jsx(_components.span, { className: "token operator", children: ">" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "section", _jsx(_components.span, { className: "token operator", children: ">" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), _jsx(_components.span, { className: "token operator", children: ">" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] })] }) }) })] }), "\n", _jsx(R2Image, { r2Key: "blog/front-network/3.png", alt: "3", className: "", caption: "" }), "\n", _jsxs(_components.h2, { id: "websocket双向传输", children: ["WebSocket双向传输", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#websocket双向传输", children: _jsx(_components.span, { className: "icon icon-link" }) })] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.a, { href: "https://developer.mozilla.org/zh-CN/docs/Web/API/WebSockets_API", rel: "nofollow", target: "_blank", children: "WebSocket" }), "是html5中的新特性，是在单个", _jsx(_components.code, { children: "Tcp" }), "上进行全双工通信的网络协议，可以实现Web应用程序和服务器之间的实时通信，比如聊天室、游戏、数据可视化。"] }), "\n", _jsx(_components.p, { children: "相较于HTTP协议的请求-响应模式，使用WebSocket可以建立持久连接，允许服务器主动向客户端推送数据，避免了不必要的轮询请求，提高了实时性和效率。同时，WebSodket的连接过程也比较简单，可以通过JavaScript中的WebSocket API进行创建和管理，并且可以和现有的Web技术如HTML、CSS和JavaScript无缝集成。" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "new WebSocket(url)" }), "用来建立ws连接，要注意前缀为ws，不是http"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "ws.onopen" }), "确定是否建立连接"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "ws.onnmenssage" }), "用来和服务端的消息对接，使用e.data获取数据"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "ws.onclose和ws.onerror" }), "确立关闭和错误"] }), "\n"] }), "\n", _jsxs(_components.h3, { id: "消息聊天案例", children: ["消息聊天案例", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#消息聊天案例", children: _jsx(_components.span, { className: "icon icon-link" }) })] }), "\n", _jsx(_components.p, { children: "后端代码就不放这里了，后端返回消息格式如下：" }), "\n", _jsxs(_components.div, { className: "code-window", children: [_jsxs(_components.div, { className: "code-header", children: [_jsxs(_components.div, { className: "window-controls", children: [_jsx(_components.span, { className: "control close" }), _jsx(_components.span, { className: "control minimize" }), _jsx(_components.span, { className: "control maximize" })] }), _jsx(_components.span, { className: "code-lang", children: "json" })] }), _jsx(_components.div, { className: "code-content", children: _jsx(_components.pre, { className: "language-json", children: _jsxs(_components.code, { className: "language-json code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token property", children: "\"type\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"users\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token comment", children: "// \"message\" | \"join\" | \"leave\" | \"users\"" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token property", children: "\"username\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"系统\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token property", children: "\"content\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"当前在线: 2\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token property", children: "\"timestamp\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "1234567890" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token property", children: "\"users\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token string", children: "\"用户0tcnx\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token string", children: "\"用户bppeu\"" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] })] }) }) })] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "现在开始前端部分，首先是定义消息的ts结构：" }), "\n"] }), "\n", _jsxs(_components.div, { className: "code-window", children: [_jsxs(_components.div, { className: "code-header", children: [_jsxs(_components.div, { className: "window-controls", children: [_jsx(_components.span, { className: "control close" }), _jsx(_components.span, { className: "control minimize" }), _jsx(_components.span, { className: "control maximize" })] }), _jsx(_components.span, { className: "code-lang", children: "ts" })] }), _jsx(_components.div, { className: "code-content", children: _jsx(_components.pre, { className: "language-ts", children: _jsxs(_components.code, { className: "language-ts code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "interface" }), " ", _jsx(_components.span, { className: "token class-name", children: "ChatMessage" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" type", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'message'" }), " ", _jsx(_components.span, { className: "token operator", children: "|" }), " ", _jsx(_components.span, { className: "token string", children: "'join'" }), " ", _jsx(_components.span, { className: "token operator", children: "|" }), " ", _jsx(_components.span, { className: "token string", children: "'leave'" }), " ", _jsx(_components.span, { className: "token operator", children: "|" }), " ", _jsx(_components.span, { className: "token string", children: "'users'" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" username", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token builtin", children: "string" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" content", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token builtin", children: "string" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" timestamp", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token builtin", children: "number" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" users", _jsx(_components.span, { className: "token operator", children: "?" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token builtin", children: "string" }), _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] })] }) }) })] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "建立获取随机用户id的函数：" }), "\n"] }), "\n", _jsxs(_components.div, { className: "code-window", children: [_jsxs(_components.div, { className: "code-header", children: [_jsxs(_components.div, { className: "window-controls", children: [_jsx(_components.span, { className: "control close" }), _jsx(_components.span, { className: "control minimize" }), _jsx(_components.span, { className: "control maximize" })] }), _jsx(_components.span, { className: "code-lang", children: "ts" })] }), _jsx(_components.div, { className: "code-content", children: _jsx(_components.pre, { className: "language-ts", children: _jsxs(_components.code, { className: "language-ts code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token function-variable function", children: "getUserId" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "let" }), " id ", _jsx(_components.span, { className: "token operator", children: "=" }), " localStorage", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "getItem" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'chatUserId'" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "if" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token operator", children: "!" }), "id", _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" id ", _jsx(_components.span, { className: "token operator", children: "=" }), " Math", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "random" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "toString" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token number", children: "36" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "substring" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token number", children: "2" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token number", children: "7" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" localStorage", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "setItem" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'chatUserId'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " id", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "return" }), " id", _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsx(_components.span, { className: "code-line", children: " \n" }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "const" }), " myUserId ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token function", children: "getUserId" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "const" }), " myUsername ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsxs(_components.span, { className: "token template-string", children: [_jsx(_components.span, { className: "token template-punctuation string", children: "`" }), _jsx(_components.span, { className: "token string", children: "用户" }), _jsxs(_components.span, { className: "token interpolation", children: [_jsx(_components.span, { className: "token interpolation-punctuation punctuation", children: "${" }), "myUserId", _jsx(_components.span, { className: "token interpolation-punctuation punctuation", children: "}" })] }), _jsx(_components.span, { className: "token template-punctuation string", children: "`" })] }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] })] }) }) })] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["建立", _jsx(_components.code, { children: "webSocket" }), "的连接（原生api）,且开局加载消息"] }), "\n"] }), "\n", _jsxs(_components.div, { className: "code-window", children: [_jsxs(_components.div, { className: "code-header", children: [_jsxs(_components.div, { className: "window-controls", children: [_jsx(_components.span, { className: "control close" }), _jsx(_components.span, { className: "control minimize" }), _jsx(_components.span, { className: "control maximize" })] }), _jsx(_components.span, { className: "code-lang", children: "ts" })] }), _jsx(_components.div, { className: "code-content", children: _jsx(_components.pre, { className: "language-ts", children: _jsxs(_components.code, { className: "language-ts code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token function-variable function", children: "connect" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " ws ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token keyword", children: "new" }), " ", _jsx(_components.span, { className: "token class-name", children: "WebSocket" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsxs(_components.span, { className: "token template-string", children: [_jsx(_components.span, { className: "token template-punctuation string", children: "`" }), _jsx(_components.span, { className: "token string", children: "ws://localhost:3000/ws?id=" }), _jsxs(_components.span, { className: "token interpolation", children: [_jsx(_components.span, { className: "token interpolation-punctuation punctuation", children: "${" }), "myUserId", _jsx(_components.span, { className: "token interpolation-punctuation punctuation", children: "}" })] }), _jsx(_components.span, { className: "token template-punctuation string", children: "`" })] }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" wsRef", _jsx(_components.span, { className: "token punctuation", children: "." }), "current ", _jsx(_components.span, { className: "token operator", children: "=" }), " ws", _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ws", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function-variable function", children: "onopen" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token function", children: "setConnected" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token boolean", children: "true" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ws", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function-variable function", children: "onmessage" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "e", _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " data", _jsx(_components.span, { className: "token operator", children: ":" }), " ChatMessage ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token constant", children: "JSON" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "parse" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "e", _jsx(_components.span, { className: "token punctuation", children: "." }), "data", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "if" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "data", _jsx(_components.span, { className: "token punctuation", children: "." }), "type ", _jsx(_components.span, { className: "token operator", children: "===" }), " ", _jsx(_components.span, { className: "token string", children: "'users'" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token function", children: "setOnlineUsers" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "data", _jsx(_components.span, { className: "token punctuation", children: "." }), "users ", _jsx(_components.span, { className: "token operator", children: "||" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), " ", _jsx(_components.span, { className: "token keyword", children: "else" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token function", children: "setMessages" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "prev ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token operator", children: "..." }), "prev", _jsx(_components.span, { className: "token punctuation", children: "," }), " data", _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ws", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function-variable function", children: "onclose" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token function", children: "setConnected" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token boolean", children: "false" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token function", children: "setTimeout" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "connect", _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token number", children: "3000" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ws", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function-variable function", children: "onerror" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "err", _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token builtin", children: "console" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "error" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "err", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ws", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "close" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token function", children: "useEffect" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token function", children: "connect" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "return" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " wsRef", _jsx(_components.span, { className: "token punctuation", children: "." }), "current", _jsx(_components.span, { className: "token operator", children: "?." }), _jsx(_components.span, { className: "token function", children: "close" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] })] }) }) })] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "发消息和消息视图锚定" }), "\n"] }), "\n", _jsxs(_components.div, { className: "code-window", children: [_jsxs(_components.div, { className: "code-header", children: [_jsxs(_components.div, { className: "window-controls", children: [_jsx(_components.span, { className: "control close" }), _jsx(_components.span, { className: "control minimize" }), _jsx(_components.span, { className: "control maximize" })] }), _jsx(_components.span, { className: "code-lang", children: "ts" })] }), _jsx(_components.div, { className: "code-content", children: _jsx(_components.pre, { className: "language-ts", children: _jsxs(_components.code, { className: "language-ts code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token function", children: "useEffect" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" messagesEndRef", _jsx(_components.span, { className: "token punctuation", children: "." }), "current", _jsx(_components.span, { className: "token operator", children: "?." }), _jsx(_components.span, { className: "token function", children: "scrollIntoView" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), " behavior", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'smooth'" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), "messages", _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsx(_components.span, { className: "code-line", children: " \n" }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token function-variable function", children: "sendMessage" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "if" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token operator", children: "!" }), "input", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "trim" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token keyword", children: "return" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "if" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "wsRef", _jsx(_components.span, { className: "token punctuation", children: "." }), "current", _jsx(_components.span, { className: "token operator", children: "?." }), "readyState ", _jsx(_components.span, { className: "token operator", children: "===" }), " WebSocket", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token constant", children: "OPEN" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" wsRef", _jsx(_components.span, { className: "token punctuation", children: "." }), "current", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "send" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token constant", children: "JSON" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "stringify" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), " type", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'message'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " content", _jsx(_components.span, { className: "token operator", children: ":" }), " input", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "trim" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token function", children: "setInput" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "''" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] })] }) }) })] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "渲染单条消息" }), "\n"] }), "\n", _jsxs(_components.div, { className: "code-window", children: [_jsxs(_components.div, { className: "code-header", children: [_jsxs(_components.div, { className: "window-controls", children: [_jsx(_components.span, { className: "control close" }), _jsx(_components.span, { className: "control minimize" }), _jsx(_components.span, { className: "control maximize" })] }), _jsx(_components.span, { className: "code-lang", children: "tsx" })] }), _jsx(_components.div, { className: "code-content", children: _jsx(_components.pre, { className: "language-tsx", children: _jsxs(_components.code, { className: "language-tsx code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token function-variable function", children: "renderMessage" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "msg", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token maybe-class-name", children: "ChatMessage" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " idx", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token builtin", children: "number" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token comment", children: "// 系统消息（加入/离开） " }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "if" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "msg", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "type" }), " ", _jsx(_components.span, { className: "token operator", children: "===" }), " ", _jsx(_components.span, { className: "token string", children: "'join'" }), " ", _jsx(_components.span, { className: "token operator", children: "||" }), " msg", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "type" }), " ", _jsx(_components.span, { className: "token operator", children: "===" }), " ", _jsx(_components.span, { className: "token string", children: "'leave'" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "return" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "div"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "key" }), _jsxs(_components.span, { className: "token script language-javascript", children: [_jsx(_components.span, { className: "token script-punctuation punctuation", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "idx", _jsx(_components.span, { className: "token punctuation", children: "}" })] }), " ", _jsx(_components.span, { className: "token attr-name", children: "style" }), _jsxs(_components.span, { className: "token script language-javascript", children: [_jsx(_components.span, { className: "token script-punctuation punctuation", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), " textAlign", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'center'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " margin", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'8px 0'" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "}" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text", children: " \n" })] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), _jsx(_components.span, { className: "token class-name", children: "Text" })] }), " ", _jsx(_components.span, { className: "token attr-name", children: "type" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "secondary", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), " ", _jsx(_components.span, { className: "token attr-name", children: "italic" }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "msg", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "content" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), _jsx(_components.span, { className: "token plain-text", children: " \n" })] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), " ", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), " \n"] }), _jsx(_components.span, { className: "code-line", children: " \n" }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " isMine ", _jsx(_components.span, { className: "token operator", children: "=" }), " msg", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "username" }), " ", _jsx(_components.span, { className: "token operator", children: "===" }), " myUsername", _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "return" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "div"] }), " \n"] })] }), _jsx(_components.span, { className: "code-line", children: _jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token attr-name", children: "key" }), _jsxs(_components.span, { className: "token script language-javascript", children: [_jsx(_components.span, { className: "token script-punctuation punctuation", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "idx", _jsx(_components.span, { className: "token punctuation", children: "}" })] }), " \n"] }) }), _jsx(_components.span, { className: "code-line", children: _jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token attr-name", children: "style" }), _jsxs(_components.span, { className: "token script language-javascript", children: [_jsx(_components.span, { className: "token script-punctuation punctuation", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] })] }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token tag", children: _jsxs(_components.span, { className: "token script language-javascript", children: [" display", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'flex'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token tag", children: _jsxs(_components.span, { className: "token script language-javascript", children: [" justifyContent", _jsx(_components.span, { className: "token operator", children: ":" }), " isMine ", _jsx(_components.span, { className: "token operator", children: "?" }), " ", _jsx(_components.span, { className: "token string", children: "'flex-end'" }), " ", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'flex-start'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token tag", children: _jsxs(_components.span, { className: "token script language-javascript", children: [" marginBottom", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "16" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token script language-javascript", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "}" })] }), " \n"] }) }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text", children: " \n" })] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token comment", children: "/* 别人消息：头像和用户名在左边 */" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token plain-text", children: " \n" })] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token operator", children: "!" }), "isMine ", _jsx(_components.span, { className: "token operator", children: "&&" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "div"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "style" }), _jsxs(_components.span, { className: "token script language-javascript", children: [_jsx(_components.span, { className: "token script-punctuation punctuation", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), " marginRight", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "12" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " textAlign", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'center'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " width", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "50" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "}" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text", children: " \n" })] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), _jsx(_components.span, { className: "token class-name", children: "Avatar" })] }), " ", _jsx(_components.span, { className: "token attr-name", children: "icon" }), _jsxs(_components.span, { className: "token script language-javascript", children: [_jsx(_components.span, { className: "token script-punctuation punctuation", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), _jsx(_components.span, { className: "token class-name", children: "UserOutlined" })] }), " ", _jsx(_components.span, { className: "token punctuation", children: "/>" })] }), _jsx(_components.span, { className: "token punctuation", children: "}" })] }), " ", _jsx(_components.span, { className: "token punctuation", children: "/>" })] }), _jsx(_components.span, { className: "token plain-text", children: " \n" })] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "div"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "style" }), _jsxs(_components.span, { className: "token script language-javascript", children: [_jsx(_components.span, { className: "token script-punctuation punctuation", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), " fontSize", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "12" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " marginTop", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "4" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "}" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "msg", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "username" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), _jsx(_components.span, { className: "token plain-text", children: " \n" })] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), " ", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token plain-text", children: " \n" })] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token comment", children: "/* 消息气泡 */" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token plain-text", children: " \n" })] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "div"] }), " \n"] })] }), _jsx(_components.span, { className: "code-line", children: _jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token attr-name", children: "style" }), _jsxs(_components.span, { className: "token script language-javascript", children: [_jsx(_components.span, { className: "token script-punctuation punctuation", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] })] }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token tag", children: _jsxs(_components.span, { className: "token script language-javascript", children: [" maxWidth", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'60%'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token tag", children: _jsxs(_components.span, { className: "token script language-javascript", children: [" padding", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'8px 12px'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token tag", children: _jsxs(_components.span, { className: "token script language-javascript", children: [" borderRadius", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "12" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token tag", children: _jsxs(_components.span, { className: "token script language-javascript", children: [" backgroundColor", _jsx(_components.span, { className: "token operator", children: ":" }), " isMine ", _jsx(_components.span, { className: "token operator", children: "?" }), " ", _jsx(_components.span, { className: "token string", children: "'#1890ff'" }), " ", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'#f0f0f0'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token tag", children: _jsxs(_components.span, { className: "token script language-javascript", children: [" color", _jsx(_components.span, { className: "token operator", children: ":" }), " isMine ", _jsx(_components.span, { className: "token operator", children: "?" }), " ", _jsx(_components.span, { className: "token string", children: "'#fff'" }), " ", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'#000'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token tag", children: _jsxs(_components.span, { className: "token script language-javascript", children: [" wordBreak", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'break-word'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token script language-javascript", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "}" })] }), " \n"] }) }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text", children: " \n" })] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "div"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "msg", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "content" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), _jsx(_components.span, { className: "token plain-text", children: " \n" })] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), _jsx(_components.span, { className: "token plain-text", children: " " }), _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token comment", children: "/* 自己的消息：头像和用户名在右边（可选，但为了对称也可以加） */" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token plain-text", children: " \n" })] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "isMine ", _jsx(_components.span, { className: "token operator", children: "&&" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "div"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "style" }), _jsxs(_components.span, { className: "token script language-javascript", children: [_jsx(_components.span, { className: "token script-punctuation punctuation", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), " marginLeft", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "12" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " textAlign", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'center'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " width", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "50" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "}" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text", children: " \n" })] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), _jsx(_components.span, { className: "token class-name", children: "Avatar" })] }), " ", _jsx(_components.span, { className: "token attr-name", children: "icon" }), _jsxs(_components.span, { className: "token script language-javascript", children: [_jsx(_components.span, { className: "token script-punctuation punctuation", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), _jsx(_components.span, { className: "token class-name", children: "UserOutlined" })] }), " ", _jsx(_components.span, { className: "token punctuation", children: "/>" })] }), _jsx(_components.span, { className: "token punctuation", children: "}" })] }), " ", _jsx(_components.span, { className: "token attr-name", children: "style" }), _jsxs(_components.span, { className: "token script language-javascript", children: [_jsx(_components.span, { className: "token script-punctuation punctuation", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), " backgroundColor", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'#1890ff'" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "}" })] }), " ", _jsx(_components.span, { className: "token punctuation", children: "/>" })] }), _jsx(_components.span, { className: "token plain-text", children: " \n" })] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "div"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "style" }), _jsxs(_components.span, { className: "token script language-javascript", children: [_jsx(_components.span, { className: "token script-punctuation punctuation", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), " fontSize", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "12" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " marginTop", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "4" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "}" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text", children: "我" }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), _jsx(_components.span, { className: "token plain-text", children: " \n" })] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), " ", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token plain-text", children: " \n" })] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] })] }) }) })] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "主ui渲染，使用antd的布局效果" }), "\n"] }), "\n", _jsxs(_components.div, { className: "code-window", children: [_jsxs(_components.div, { className: "code-header", children: [_jsxs(_components.div, { className: "window-controls", children: [_jsx(_components.span, { className: "control close" }), _jsx(_components.span, { className: "control minimize" }), _jsx(_components.span, { className: "control maximize" })] }), _jsx(_components.span, { className: "code-lang", children: "tsx" })] }), _jsx(_components.div, { className: "code-content", children: _jsx(_components.pre, { className: "language-tsx", children: _jsxs(_components.code, { className: "language-tsx code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "return" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), _jsx(_components.span, { className: "token class-name", children: "Layout" })] }), " ", _jsx(_components.span, { className: "token attr-name", children: "style" }), _jsxs(_components.span, { className: "token script language-javascript", children: [_jsx(_components.span, { className: "token script-punctuation punctuation", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), " height", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'100vh'" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "}" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text", children: " \n" })] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), _jsx(_components.span, { className: "token class-name", children: "Header" })] }), " ", _jsx(_components.span, { className: "token attr-name", children: "style" }), _jsxs(_components.span, { className: "token script language-javascript", children: [_jsx(_components.span, { className: "token script-punctuation punctuation", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] })] })] }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token tag", children: _jsxs(_components.span, { className: "token script language-javascript", children: [" background", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'#fff'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " padding", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'0 24px'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " borderBottom", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'1px solid #f0f0f0'" }), " \n"] }) }) }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token script language-javascript", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "}" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text", children: " \n" })] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), _jsx(_components.span, { className: "token class-name", children: "Space" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text", children: " \n" })] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), _jsx(_components.span, { className: "token class-name", children: "WifiOutlined" })] }), " ", _jsx(_components.span, { className: "token attr-name", children: "style" }), _jsxs(_components.span, { className: "token script language-javascript", children: [_jsx(_components.span, { className: "token script-punctuation punctuation", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), " color", _jsx(_components.span, { className: "token operator", children: ":" }), " connected ", _jsx(_components.span, { className: "token operator", children: "?" }), " ", _jsx(_components.span, { className: "token string", children: "'#52c41a'" }), " ", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'#ff4d4f'" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "}" })] }), " ", _jsx(_components.span, { className: "token punctuation", children: "/>" })] }), _jsx(_components.span, { className: "token plain-text", children: " \n" })] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), _jsx(_components.span, { className: "token class-name", children: "Text" })] }), " ", _jsx(_components.span, { className: "token attr-name", children: "strong" }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text", children: "在线人数：" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "onlineUsers", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "length" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), _jsx(_components.span, { className: "token plain-text", children: " \n" })] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), _jsx(_components.span, { className: "token class-name", children: "Badge" })] }), " ", _jsx(_components.span, { className: "token attr-name", children: "status" }), _jsxs(_components.span, { className: "token script language-javascript", children: [_jsx(_components.span, { className: "token script-punctuation punctuation", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "connected ", _jsx(_components.span, { className: "token operator", children: "?" }), " ", _jsx(_components.span, { className: "token string", children: "'success'" }), " ", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'error'" }), _jsx(_components.span, { className: "token punctuation", children: "}" })] }), " \n"] })] }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token attr-name", children: "text" }), _jsxs(_components.span, { className: "token script language-javascript", children: [_jsx(_components.span, { className: "token script-punctuation punctuation", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "connected ", _jsx(_components.span, { className: "token operator", children: "?" }), " ", _jsx(_components.span, { className: "token string", children: "'已连接'" }), " ", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'连接中...'" }), _jsx(_components.span, { className: "token punctuation", children: "}" })] }), " ", _jsx(_components.span, { className: "token punctuation", children: "/>" })] }), _jsx(_components.span, { className: "token plain-text", children: " \n" })] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), _jsx(_components.span, { className: "token plain-text", children: " \n" })] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), _jsx(_components.span, { className: "token plain-text", children: " \n" })] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), _jsx(_components.span, { className: "token class-name", children: "Layout" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text", children: " \n" })] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), _jsx(_components.span, { className: "token class-name", children: "Sider" })] }), " ", _jsx(_components.span, { className: "token attr-name", children: "width" }), _jsxs(_components.span, { className: "token script language-javascript", children: [_jsx(_components.span, { className: "token script-punctuation punctuation", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token number", children: "200" }), _jsx(_components.span, { className: "token punctuation", children: "}" })] }), " ", _jsx(_components.span, { className: "token attr-name", children: "theme" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "light", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), " ", _jsx(_components.span, { className: "token attr-name", children: "style" }), _jsxs(_components.span, { className: "token script language-javascript", children: [_jsx(_components.span, { className: "token script-punctuation punctuation", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] })] })] }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token tag", children: _jsxs(_components.span, { className: "token script language-javascript", children: [" background", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'#fff'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " borderRight", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'1px solid #f0f0f0'" }), " \n"] }) }) }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token script language-javascript", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "}" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text", children: " \n" })] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "div"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "style" }), _jsxs(_components.span, { className: "token script language-javascript", children: [_jsx(_components.span, { className: "token script-punctuation punctuation", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), " padding", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "16" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "}" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text", children: " \n" })] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), _jsx(_components.span, { className: "token class-name", children: "Text" })] }), " ", _jsx(_components.span, { className: "token attr-name", children: "strong" }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text", children: "在线用户" }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), _jsx(_components.span, { className: "token plain-text", children: " \n" })] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "div"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "style" }), _jsxs(_components.span, { className: "token script language-javascript", children: [_jsx(_components.span, { className: "token script-punctuation punctuation", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), " marginTop", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "16" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "}" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text", children: " \n" })] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "onlineUsers", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "map" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "user ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "div"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "key" }), _jsxs(_components.span, { className: "token script language-javascript", children: [_jsx(_components.span, { className: "token script-punctuation punctuation", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "user", _jsx(_components.span, { className: "token punctuation", children: "}" })] }), " ", _jsx(_components.span, { className: "token attr-name", children: "style" }), _jsxs(_components.span, { className: "token script language-javascript", children: [_jsx(_components.span, { className: "token script-punctuation punctuation", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), " marginBottom", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "8" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "}" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text", children: " \n" })] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), _jsx(_components.span, { className: "token class-name", children: "Avatar" })] }), " ", _jsx(_components.span, { className: "token attr-name", children: "icon" }), _jsxs(_components.span, { className: "token script language-javascript", children: [_jsx(_components.span, { className: "token script-punctuation punctuation", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), _jsx(_components.span, { className: "token class-name", children: "UserOutlined" })] }), " ", _jsx(_components.span, { className: "token punctuation", children: "/>" })] }), _jsx(_components.span, { className: "token punctuation", children: "}" })] }), " ", _jsx(_components.span, { className: "token attr-name", children: "size" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "small", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), " \n"] })] }), _jsx(_components.span, { className: "code-line", children: _jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token attr-name", children: "style" }), _jsxs(_components.span, { className: "token script language-javascript", children: [_jsx(_components.span, { className: "token script-punctuation punctuation", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), " marginRight", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "8" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "}" })] }), " \n"] }) }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "/>" })] }), _jsx(_components.span, { className: "token plain-text", children: " \n" })] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "user", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token plain-text", children: " \n" })] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token plain-text", children: " \n" })] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), _jsx(_components.span, { className: "token plain-text", children: " \n" })] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), _jsx(_components.span, { className: "token plain-text", children: " \n" })] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), _jsx(_components.span, { className: "token plain-text", children: " \n" })] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), _jsx(_components.span, { className: "token class-name", children: "Content" })] }), " ", _jsx(_components.span, { className: "token attr-name", children: "style" }), _jsxs(_components.span, { className: "token script language-javascript", children: [_jsx(_components.span, { className: "token script-punctuation punctuation", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), " padding", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'24px'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " display", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'flex'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] })] })] }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token tag", children: _jsxs(_components.span, { className: "token script language-javascript", children: [" flexDirection", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'column'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " height", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'calc(100vh - 64px)'" }), " \n"] }) }) }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token script language-javascript", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "}" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text", children: " \n" })] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), _jsx(_components.span, { className: "token class-name", children: "Card" })] }), " ", _jsx(_components.span, { className: "token attr-name", children: "style" }), _jsxs(_components.span, { className: "token script language-javascript", children: [_jsx(_components.span, { className: "token script-punctuation punctuation", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), " flex", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "1" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " overflowY", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'auto'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " marginBottom", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "16" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "}" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text", children: " \n" })] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "messages", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "map" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "renderMessage", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token plain-text", children: " \n" })] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "div"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "ref" }), _jsxs(_components.span, { className: "token script language-javascript", children: [_jsx(_components.span, { className: "token script-punctuation punctuation", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "messagesEndRef", _jsx(_components.span, { className: "token punctuation", children: "}" })] }), " ", _jsx(_components.span, { className: "token punctuation", children: "/>" })] }), _jsx(_components.span, { className: "token plain-text", children: " \n" })] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), _jsx(_components.span, { className: "token plain-text", children: " \n" })] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), _jsx(_components.span, { className: "token class-name", children: "Space.Compact" })] }), " ", _jsx(_components.span, { className: "token attr-name", children: "style" }), _jsxs(_components.span, { className: "token script language-javascript", children: [_jsx(_components.span, { className: "token script-punctuation punctuation", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), " width", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'100%'" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "}" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text", children: " \n" })] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), _jsx(_components.span, { className: "token class-name", children: "Input" })] }), " \n"] })] }), _jsx(_components.span, { className: "code-line", children: _jsxs(_components.span, { className: "token tag", children: ["\t ", _jsx(_components.span, { className: "token attr-name", children: "value" }), _jsxs(_components.span, { className: "token script language-javascript", children: [_jsx(_components.span, { className: "token script-punctuation punctuation", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "input", _jsx(_components.span, { className: "token punctuation", children: "}" })] }), " \n"] }) }), _jsx(_components.span, { className: "code-line", children: _jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token attr-name", children: "onChange" }), _jsxs(_components.span, { className: "token script language-javascript", children: [_jsx(_components.span, { className: "token script-punctuation punctuation", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "e ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token function", children: "setInput" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "e", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "target" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "value" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "}" })] }), " \n"] }) }), _jsx(_components.span, { className: "code-line", children: _jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token attr-name", children: "onPressEnter" }), _jsxs(_components.span, { className: "token script language-javascript", children: [_jsx(_components.span, { className: "token script-punctuation punctuation", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "sendMessage", _jsx(_components.span, { className: "token punctuation", children: "}" })] }), " \n"] }) }), _jsx(_components.span, { className: "code-line", children: _jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token attr-name", children: "placeholder" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "输入消息...", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), " \n"] }) }), _jsx(_components.span, { className: "code-line", children: _jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token attr-name", children: "disabled" }), _jsxs(_components.span, { className: "token script language-javascript", children: [_jsx(_components.span, { className: "token script-punctuation punctuation", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token operator", children: "!" }), "connected", _jsx(_components.span, { className: "token punctuation", children: "}" })] }), " \n"] }) }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "/>" })] }), _jsx(_components.span, { className: "token plain-text", children: " \n" })] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), _jsx(_components.span, { className: "token class-name", children: "Button" })] }), " ", _jsx(_components.span, { className: "token attr-name", children: "type" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "primary", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), " ", _jsx(_components.span, { className: "token attr-name", children: "onClick" }), _jsxs(_components.span, { className: "token script language-javascript", children: [_jsx(_components.span, { className: "token script-punctuation punctuation", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "sendMessage", _jsx(_components.span, { className: "token punctuation", children: "}" })] }), " ", _jsx(_components.span, { className: "token attr-name", children: "disabled" }), _jsxs(_components.span, { className: "token script language-javascript", children: [_jsx(_components.span, { className: "token script-punctuation punctuation", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token operator", children: "!" }), "connected", _jsx(_components.span, { className: "token punctuation", children: "}" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text", children: " \n" })] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), _jsx(_components.span, { className: "token class-name", children: "SendOutlined" })] }), " ", _jsx(_components.span, { className: "token punctuation", children: "/>" })] }), _jsx(_components.span, { className: "token plain-text", children: " 发送 \n" })] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), _jsx(_components.span, { className: "token plain-text", children: " \n" })] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), _jsx(_components.span, { className: "token plain-text", children: " \n" })] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), _jsx(_components.span, { className: "token plain-text", children: " \n" })] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), _jsx(_components.span, { className: "token plain-text", children: " \n" })] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] })] }) }) })] }), "\n", _jsx(R2Image, { r2Key: "blog/front-network/4.png", alt: "4", className: "", caption: "" }), "\n", _jsxs(_components.h3, { id: "心跳检测与保活", children: ["心跳检测与保活", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#心跳检测与保活", children: _jsx(_components.span, { className: "icon icon-link" }) })] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "websocket" }), "如果长时间不连接，或者在弱网状态下，容易断连，所以为了保持通信，需要发送心跳包来保证客户端与服务端之间的连接，一般来说有两种方式，前端传给后端", _jsx(_components.code, { children: "ping" }), "，后端回传前端", _jsx(_components.code, { children: "pong" }), "，或者第二种方式后端传给前端，通过定时器来做。"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "首先生命周期effect：" }), "\n"] }), "\n", _jsxs(_components.div, { className: "code-window", children: [_jsxs(_components.div, { className: "code-header", children: [_jsxs(_components.div, { className: "window-controls", children: [_jsx(_components.span, { className: "control close" }), _jsx(_components.span, { className: "control minimize" }), _jsx(_components.span, { className: "control maximize" })] }), _jsx(_components.span, { className: "code-lang", children: "ts" })] }), _jsx(_components.div, { className: "code-content", children: _jsx(_components.pre, { className: "language-ts", children: _jsxs(_components.code, { className: "language-ts code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "const" }), " heartBeatIntervalRef ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsxs(_components.span, { className: "token generic-function", children: [_jsx(_components.span, { className: "token function", children: "useRef" }), _jsxs(_components.span, { className: "token generic class-name", children: [_jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token builtin", children: "number" }), " ", _jsx(_components.span, { className: "token operator", children: "|" }), " ", _jsx(_components.span, { className: "token keyword", children: "null" }), _jsx(_components.span, { className: "token operator", children: ">" })] })] }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token keyword", children: "null" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line", children: "\n" }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token function", children: "useEffect" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token function", children: "connect" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" heartBeatIntervalRef", _jsx(_components.span, { className: "token punctuation", children: "." }), "current ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token function", children: "setInterval" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "if" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "wsRef", _jsx(_components.span, { className: "token punctuation", children: "." }), "current", _jsx(_components.span, { className: "token operator", children: "?." }), "readyState ", _jsx(_components.span, { className: "token operator", children: "===" }), " WebSocket", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token constant", children: "OPEN" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" wsRef", _jsx(_components.span, { className: "token punctuation", children: "." }), "current", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "send" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token constant", children: "JSON" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "stringify" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), " type", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'ping'" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token number", children: "30" }), " ", _jsx(_components.span, { className: "token operator", children: "*" }), " ", _jsx(_components.span, { className: "token number", children: "1000" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "return" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" heartBeatIntervalRef", _jsx(_components.span, { className: "token punctuation", children: "." }), "current ", _jsx(_components.span, { className: "token operator", children: "&&" }), " ", _jsx(_components.span, { className: "token function", children: "clearInterval" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "heartBeatIntervalRef", _jsx(_components.span, { className: "token punctuation", children: "." }), "current", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" wsRef", _jsx(_components.span, { className: "token punctuation", children: "." }), "current ", _jsx(_components.span, { className: "token operator", children: "&&" }), " wsRef", _jsx(_components.span, { className: "token punctuation", children: "." }), "current", _jsx(_components.span, { className: "token operator", children: "?." }), _jsx(_components.span, { className: "token function", children: "close" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] })] }) }) })] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["然后在 ", _jsx(_components.code, { children: "onmessage" }), "加上，与此同时保证后端回复即可，至于关闭连接按钮这里就不去写了"] }), "\n"] }), "\n", _jsxs(_components.div, { className: "code-window", children: [_jsxs(_components.div, { className: "code-header", children: [_jsxs(_components.div, { className: "window-controls", children: [_jsx(_components.span, { className: "control close" }), _jsx(_components.span, { className: "control minimize" }), _jsx(_components.span, { className: "control maximize" })] }), _jsx(_components.span, { className: "code-lang", children: "ts" })] }), _jsx(_components.div, { className: "code-content", children: _jsx(_components.pre, { className: "language-ts", children: _jsxs(_components.code, { className: "language-ts code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: ["ws", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function-variable function", children: "onmessage" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "e", _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " data", _jsx(_components.span, { className: "token operator", children: ":" }), " ChatMessage ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token constant", children: "JSON" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "parse" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "e", _jsx(_components.span, { className: "token punctuation", children: "." }), "data", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "if" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "data", _jsx(_components.span, { className: "token punctuation", children: "." }), "type ", _jsx(_components.span, { className: "token operator", children: "===" }), " ", _jsx(_components.span, { className: "token string", children: "'users'" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token function", children: "setOnlineUsers" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "data", _jsx(_components.span, { className: "token punctuation", children: "." }), "users ", _jsx(_components.span, { className: "token operator", children: "||" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), " ", _jsx(_components.span, { className: "token keyword", children: "else" }), " ", _jsx(_components.span, { className: "token keyword", children: "if" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "data", _jsx(_components.span, { className: "token punctuation", children: "." }), "type ", _jsx(_components.span, { className: "token operator", children: "===" }), " ", _jsx(_components.span, { className: "token string", children: "'pong'" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token builtin", children: "console" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "log" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'Received pong'" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " ", _jsx(_components.span, { className: "token comment", children: "// 确定心跳" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), " ", _jsx(_components.span, { className: "token keyword", children: "else" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token function", children: "setMessages" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "prev ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token operator", children: "..." }), "prev", _jsx(_components.span, { className: "token punctuation", children: "," }), " data", _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] })] }) }) })] }), "\n", _jsxs(_components.h2, { id: "axios库", children: ["axios库", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#axios库", children: _jsx(_components.span, { className: "icon icon-link" }) })] }), "\n", _jsxs(_components.p, { children: ["Axios 是一个基于 ", _jsx(_components.code, { children: "Promise" }), " 的 HTTP 客户端，可以在浏览器和 Node.js 环境中使用。它是目前前端最流行的请求库，封装了 XMLHttpRequest（浏览器）和 http（Node.js），提供了更简洁、功能更强大的 API。"] }), "\n", _jsxs(_components.table, { children: [_jsx(_components.thead, { children: _jsxs(_components.tr, { children: [_jsx(_components.th, { children: "特性" }), _jsx(_components.th, { children: "说明" })] }) }), _jsxs(_components.tbody, { children: [_jsxs(_components.tr, { children: [_jsx(_components.td, { children: "支持浏览器和 Node.js" }), _jsx(_components.td, { children: "同一套 API，两端通用" })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: "基于 Promise" }), _jsxs(_components.td, { children: ["支持 ", _jsx(_components.code, { children: "async/await" }), "，避免回调地狱"] })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: "自动转换 JSON" }), _jsx(_components.td, { children: "响应数据自动解析为 JSON 对象" })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: "拦截器" }), _jsx(_components.td, { children: "可在请求/响应被处理前拦截并修改" })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: "取消请求" }), _jsxs(_components.td, { children: ["支持取消正在进行的请求（使用 ", _jsx(_components.code, { children: "CancelToken" }), " 或 ", _jsx(_components.code, { children: "AbortController" }), "）"] })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: "客户端支持 XSRF 防护" }), _jsx(_components.td, { children: "自动携带 cookie 等凭证" })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: "请求/响应数据转换" }), _jsx(_components.td, { children: "可自定义转换函数" })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: "进度监听" }), _jsx(_components.td, { children: "支持上传/下载进度回调" })] })] })] }), "\n", _jsxs(_components.h3, { id: "基本用法", children: ["基本用法", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#基本用法", children: _jsx(_components.span, { className: "icon icon-link" }) })] }), "\n", _jsxs(_components.p, { children: ["axios基本用法非常简单，这里把进度监控也一起整一整,首先肯定要安装包", _jsx(_components.code, { children: "pnpm add axios" }), ",以之前的posts为例子"] }), "\n", _jsxs(_components.div, { className: "code-window", children: [_jsxs(_components.div, { className: "code-header", children: [_jsxs(_components.div, { className: "window-controls", children: [_jsx(_components.span, { className: "control close" }), _jsx(_components.span, { className: "control minimize" }), _jsx(_components.span, { className: "control maximize" })] }), _jsx(_components.span, { className: "code-lang", children: "tsx" })] }), _jsx(_components.div, { className: "code-content", children: _jsx(_components.pre, { className: "language-tsx", children: _jsxs(_components.code, { className: "language-tsx code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), "post", _jsx(_components.span, { className: "token punctuation", children: "," }), " setPost", _jsx(_components.span, { className: "token punctuation", children: "]" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsxs(_components.span, { className: "token generic-function", children: [_jsx(_components.span, { className: "token function", children: "useState" }), _jsxs(_components.span, { className: "token generic class-name", children: [_jsx(_components.span, { className: "token operator", children: "<" }), "Post", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token operator", children: ">" })] })] }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token function-variable function", children: "fetchPost" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token keyword", children: "async" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "try" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " response ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token keyword", children: "await" }), " axios", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "get" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'/api/posts'" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token function", children: "setPost" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "response", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "data" }), _jsx(_components.span, { className: "token operator", children: "?." }), "data", _jsx(_components.span, { className: "token punctuation", children: ")" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), " ", _jsx(_components.span, { className: "token keyword", children: "catch" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "error", _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token console class-name", children: "console" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "error" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "error", _jsx(_components.span, { className: "token punctuation", children: ")" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] })] }) }) })] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "加上id搜索" }), "\n"] }), "\n", _jsxs(_components.div, { className: "code-window", children: [_jsxs(_components.div, { className: "code-header", children: [_jsxs(_components.div, { className: "window-controls", children: [_jsx(_components.span, { className: "control close" }), _jsx(_components.span, { className: "control minimize" }), _jsx(_components.span, { className: "control maximize" })] }), _jsx(_components.span, { className: "code-lang", children: "ts" })] }), _jsx(_components.div, { className: "code-content", children: _jsx(_components.pre, { className: "language-ts", children: _jsxs(_components.code, { className: "language-ts code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "const" }), " fetchPost ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token function", children: "debounce" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token keyword", children: "async" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "id", _jsx(_components.span, { className: "token operator", children: "?" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token builtin", children: "number" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "try" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " url ", _jsx(_components.span, { className: "token operator", children: "=" }), " id ", _jsx(_components.span, { className: "token operator", children: "?" }), " ", _jsxs(_components.span, { className: "token template-string", children: [_jsx(_components.span, { className: "token template-punctuation string", children: "`" }), _jsx(_components.span, { className: "token string", children: "/api/posts/" }), _jsxs(_components.span, { className: "token interpolation", children: [_jsx(_components.span, { className: "token interpolation-punctuation punctuation", children: "${" }), "id", _jsx(_components.span, { className: "token interpolation-punctuation punctuation", children: "}" })] }), _jsx(_components.span, { className: "token template-punctuation string", children: "`" })] }), " ", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'/api/posts'" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " response ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token keyword", children: "await" }), " axios", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "get" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "url", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "let" }), " data ", _jsx(_components.span, { className: "token operator", children: "=" }), " response", _jsx(_components.span, { className: "token punctuation", children: "." }), "data", _jsx(_components.span, { className: "token punctuation", children: "." }), "data ", _jsx(_components.span, { className: "token operator", children: "?" }), " response", _jsx(_components.span, { className: "token punctuation", children: "." }), "data", _jsx(_components.span, { className: "token punctuation", children: "." }), "data ", _jsx(_components.span, { className: "token operator", children: ":" }), " response", _jsx(_components.span, { className: "token punctuation", children: "." }), "data", _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " normalized ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token builtin", children: "Array" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "isArray" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "data", _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "?" }), " data ", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), "data", _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token function", children: "setPost" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "normalized", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), " ", _jsx(_components.span, { className: "token keyword", children: "catch" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "error", _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token builtin", children: "console" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "error" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "error", _jsx(_components.span, { className: "token punctuation", children: ")" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token number", children: "500" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), "\n"] })] }) }) })] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "进度条获取" }), "\n"] }), "\n", _jsxs(_components.div, { className: "code-window", children: [_jsxs(_components.div, { className: "code-header", children: [_jsxs(_components.div, { className: "window-controls", children: [_jsx(_components.span, { className: "control close" }), _jsx(_components.span, { className: "control minimize" }), _jsx(_components.span, { className: "control maximize" })] }), _jsx(_components.span, { className: "code-lang", children: "ts" })] }), _jsx(_components.div, { className: "code-content", children: _jsx(_components.pre, { className: "language-ts", children: _jsxs(_components.code, { className: "language-ts code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: ["axios", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "post" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'/upload'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " formData", _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token function-variable function", children: "onUploadProgress" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "progressEvent", _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " percent ", _jsx(_components.span, { className: "token operator", children: "=" }), " Math", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "round" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "progressEvent", _jsx(_components.span, { className: "token punctuation", children: "." }), "loaded ", _jsx(_components.span, { className: "token operator", children: "*" }), " ", _jsx(_components.span, { className: "token number", children: "100" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "/" }), " progressEvent", _jsx(_components.span, { className: "token punctuation", children: "." }), "total", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token builtin", children: "console" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "log" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsxs(_components.span, { className: "token template-string", children: [_jsx(_components.span, { className: "token template-punctuation string", children: "`" }), _jsx(_components.span, { className: "token string", children: "上传进度: " }), _jsxs(_components.span, { className: "token interpolation", children: [_jsx(_components.span, { className: "token interpolation-punctuation punctuation", children: "${" }), "percent", _jsx(_components.span, { className: "token interpolation-punctuation punctuation", children: "}" })] }), _jsx(_components.span, { className: "token string", children: "%" }), _jsx(_components.span, { className: "token template-punctuation string", children: "`" })] }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token function-variable function", children: "onDownloadProgress" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "progressEvent", _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token builtin", children: "console" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "log" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsxs(_components.span, { className: "token template-string", children: [_jsx(_components.span, { className: "token template-punctuation string", children: "`" }), _jsx(_components.span, { className: "token string", children: "下载进度: " }), _jsxs(_components.span, { className: "token interpolation", children: [_jsx(_components.span, { className: "token interpolation-punctuation punctuation", children: "${" }), "Math", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "round" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "progressEvent", _jsx(_components.span, { className: "token punctuation", children: "." }), "loaded ", _jsx(_components.span, { className: "token operator", children: "/" }), " progressEvent", _jsx(_components.span, { className: "token punctuation", children: "." }), "total ", _jsx(_components.span, { className: "token operator", children: "*" }), " ", _jsx(_components.span, { className: "token number", children: "100" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token interpolation-punctuation punctuation", children: "}" })] }), _jsx(_components.span, { className: "token string", children: "%" }), _jsx(_components.span, { className: "token template-punctuation string", children: "`" })] }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] })] }) }) })] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "终止操作" }), "\n"] }), "\n", _jsxs(_components.div, { className: "code-window", children: [_jsxs(_components.div, { className: "code-header", children: [_jsxs(_components.div, { className: "window-controls", children: [_jsx(_components.span, { className: "control close" }), _jsx(_components.span, { className: "control minimize" }), _jsx(_components.span, { className: "control maximize" })] }), _jsx(_components.span, { className: "code-lang", children: "ts" })] }), _jsx(_components.div, { className: "code-content", children: _jsx(_components.pre, { className: "language-ts", children: _jsxs(_components.code, { className: "language-ts code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), "controller", _jsx(_components.span, { className: "token punctuation", children: "," }), " setController", _jsx(_components.span, { className: "token punctuation", children: "]" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsxs(_components.span, { className: "token generic-function", children: [_jsx(_components.span, { className: "token function", children: "useState" }), _jsxs(_components.span, { className: "token generic class-name", children: [_jsx(_components.span, { className: "token operator", children: "<" }), "AbortController ", _jsx(_components.span, { className: "token operator", children: "|" }), " ", _jsx(_components.span, { className: "token keyword", children: "null" }), _jsx(_components.span, { className: "token operator", children: ">" })] })] }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token keyword", children: "null" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line", children: "\n" }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token function-variable function", children: "startDownload" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " ctrl ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token keyword", children: "new" }), " ", _jsx(_components.span, { className: "token class-name", children: "AbortController" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token function", children: "setController" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "ctrl", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" axios", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "get" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'/file'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " signal", _jsx(_components.span, { className: "token operator", children: ":" }), " ctrl", _jsx(_components.span, { className: "token punctuation", children: "." }), "signal ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line", children: "\n" }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token function-variable function", children: "pauseDownload" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" controller", _jsx(_components.span, { className: "token operator", children: "?." }), _jsx(_components.span, { className: "token function", children: "abort" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token function", children: "setController" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token keyword", children: "null" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] })] }) }) })] }), "\n", _jsxs(_components.h3, { id: "封装统一接口", children: ["封装统一接口", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#封装统一接口", children: _jsx(_components.span, { className: "icon icon-link" }) })] }), "\n", _jsxs(_components.p, { children: ["很多时候开发需要统一封装axios接口，目的是：", _jsx(_components.strong, { children: "统一配置请求基地址、超时时间、请求/响应拦截、错误处理、Loading 控制、Token 注入等" }), "。这样做的好处是——项目中的每个 API 调用都从同一个客户端实例出发，便于维护和全局调整。"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "首先是封装基础路径和超时时间" }), "\n"] }), "\n", _jsxs(_components.div, { className: "code-window", children: [_jsxs(_components.div, { className: "code-header", children: [_jsxs(_components.div, { className: "window-controls", children: [_jsx(_components.span, { className: "control close" }), _jsx(_components.span, { className: "control minimize" }), _jsx(_components.span, { className: "control maximize" })] }), _jsx(_components.span, { className: "code-lang", children: "ts" })] }), _jsx(_components.div, { className: "code-content", children: _jsx(_components.pre, { className: "language-ts", children: _jsxs(_components.code, { className: "language-ts code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "import" }), " axios", _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token keyword", children: "type" }), " ", _jsx(_components.span, { className: "token class-name", children: "AxiosInstance" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), " ", _jsx(_components.span, { className: "token keyword", children: "from" }), " ", _jsx(_components.span, { className: "token string", children: "\"axios\"" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsx(_components.span, { className: "code-line", children: " \n" }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "const" }), " baseURL ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token string", children: "'http://localhost:3000'" }), " \n"] }), _jsx(_components.span, { className: "code-line", children: " \n" }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "const" }), " request", _jsx(_components.span, { className: "token operator", children: ":" }), " AxiosInstance ", _jsx(_components.span, { className: "token operator", children: "=" }), " axios", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "create" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" baseURL", _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" timeout", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "15" }), " ", _jsx(_components.span, { className: "token operator", children: "*" }), " ", _jsx(_components.span, { className: "token number", children: "1000" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token comment", children: "// 15秒超时 " }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " \n"] })] }) }) })] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "然后是封装请求拦截器" }), "\n"] }), "\n", _jsxs(_components.div, { className: "code-window", children: [_jsxs(_components.div, { className: "code-header", children: [_jsxs(_components.div, { className: "window-controls", children: [_jsx(_components.span, { className: "control close" }), _jsx(_components.span, { className: "control minimize" }), _jsx(_components.span, { className: "control maximize" })] }), _jsx(_components.span, { className: "code-lang", children: "ts" })] }), _jsx(_components.div, { className: "code-content", children: _jsx(_components.pre, { className: "language-ts", children: _jsxs(_components.code, { className: "language-ts code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token comment", children: "// 截断白名单 " }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "const" }), " whiteList", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token builtin", children: "string" }), _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token string", children: "'/auth/login'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token string", children: "'/auth/register'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token string", children: "'/public/'" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token comment", children: "// 请求拦截器 " }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: ["request", _jsx(_components.span, { className: "token punctuation", children: "." }), "interceptors", _jsx(_components.span, { className: "token punctuation", children: "." }), "request", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "use" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "config", _jsx(_components.span, { className: "token operator", children: ":" }), " InternalAxiosRequestConfig", _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " token ", _jsx(_components.span, { className: "token operator", children: "=" }), " localStorage", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "getItem" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'token'" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token comment", children: "// 如果token存在且请求的不是白名单中的接口，则在请求头中添加token " }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "if" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "token ", _jsx(_components.span, { className: "token operator", children: "&&" }), " ", _jsx(_components.span, { className: "token operator", children: "!" }), "whiteList", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "some" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "path", _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " config", _jsx(_components.span, { className: "token punctuation", children: "." }), "url", _jsx(_components.span, { className: "token operator", children: "?." }), _jsx(_components.span, { className: "token function", children: "includes" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "path", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" config", _jsx(_components.span, { className: "token punctuation", children: "." }), "headers", _jsx(_components.span, { className: "token punctuation", children: "." }), "Authorization ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsxs(_components.span, { className: "token template-string", children: [_jsx(_components.span, { className: "token template-punctuation string", children: "`" }), _jsx(_components.span, { className: "token string", children: "Bearer " }), _jsxs(_components.span, { className: "token interpolation", children: [_jsx(_components.span, { className: "token interpolation-punctuation punctuation", children: "${" }), "token", _jsx(_components.span, { className: "token interpolation-punctuation punctuation", children: "}" })] }), _jsx(_components.span, { className: "token template-punctuation string", children: "`" })] }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token comment", children: "// 设置请求头类型,这只是一个例子，需要根据实际情况进行调整 " }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "if" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "config", _jsx(_components.span, { className: "token punctuation", children: "." }), "data ", _jsx(_components.span, { className: "token operator", children: "&&" }), " ", _jsx(_components.span, { className: "token keyword", children: "typeof" }), " config", _jsx(_components.span, { className: "token punctuation", children: "." }), "data ", _jsx(_components.span, { className: "token operator", children: "===" }), " ", _jsx(_components.span, { className: "token string", children: "'object'" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: ["\t ", _jsx(_components.span, { className: "token operator", children: "&&" }), " ", _jsx(_components.span, { className: "token operator", children: "!" }), "config", _jsx(_components.span, { className: "token punctuation", children: "." }), "headers", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token string", children: "'Content-Type'" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" config", _jsx(_components.span, { className: "token punctuation", children: "." }), "headers", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token string", children: "'Content-Type'" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token string", children: "'application/json'" }), " ", _jsx(_components.span, { className: "token keyword", children: "as" }), " ", _jsx(_components.span, { className: "token keyword", children: "const" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), " ", _jsx(_components.span, { className: "token keyword", children: "else" }), " ", _jsx(_components.span, { className: "token keyword", children: "if" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "config", _jsx(_components.span, { className: "token punctuation", children: "." }), "data ", _jsx(_components.span, { className: "token operator", children: "&&" }), " config", _jsx(_components.span, { className: "token punctuation", children: "." }), "data ", _jsx(_components.span, { className: "token keyword", children: "instanceof" }), " ", _jsx(_components.span, { className: "token class-name", children: "FormData" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: ["\t ", _jsx(_components.span, { className: "token operator", children: "&&" }), " ", _jsx(_components.span, { className: "token operator", children: "!" }), "config", _jsx(_components.span, { className: "token punctuation", children: "." }), "headers", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token string", children: "'Content-Type'" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" config", _jsx(_components.span, { className: "token punctuation", children: "." }), "headers", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token string", children: "'Content-Type'" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token string", children: "'multipart/form-data'" }), " ", _jsx(_components.span, { className: "token keyword", children: "as" }), " ", _jsx(_components.span, { className: "token keyword", children: "const" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "return" }), " config \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "error", _jsx(_components.span, { className: "token operator", children: ":" }), " AxiosError", _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "return" }), " ", _jsx(_components.span, { className: "token builtin", children: "Promise" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "reject" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "error", _jsx(_components.span, { className: "token punctuation", children: ")" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: ")" }), "\n"] })] }) }) })] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "封装响应拦截器" }), "\n"] }), "\n", _jsxs(_components.div, { className: "code-window", children: [_jsxs(_components.div, { className: "code-header", children: [_jsxs(_components.div, { className: "window-controls", children: [_jsx(_components.span, { className: "control close" }), _jsx(_components.span, { className: "control minimize" }), _jsx(_components.span, { className: "control maximize" })] }), _jsx(_components.span, { className: "code-lang", children: "ts" })] }), _jsx(_components.div, { className: "code-content", children: _jsx(_components.pre, { className: "language-ts", children: _jsxs(_components.code, { className: "language-ts code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token comment", children: "// 响应拦截器 " }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: ["request", _jsx(_components.span, { className: "token punctuation", children: "." }), "interceptors", _jsx(_components.span, { className: "token punctuation", children: "." }), "response", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "use" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "response", _jsx(_components.span, { className: "token operator", children: ":" }), " AxiosResponse", _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token comment", children: "// 如果响应状态码为200或201，则返回响应数据，否则返回错误数据 " }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "response", _jsx(_components.span, { className: "token punctuation", children: "." }), "status ", _jsx(_components.span, { className: "token operator", children: "===" }), " ", _jsx(_components.span, { className: "token number", children: "200" }), " ", _jsx(_components.span, { className: "token operator", children: "||" }), " response", _jsx(_components.span, { className: "token punctuation", children: "." }), "status ", _jsx(_components.span, { className: "token operator", children: "===" }), " ", _jsx(_components.span, { className: "token number", children: "201" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token operator", children: "?" }), " ", _jsx(_components.span, { className: "token builtin", children: "Promise" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "resolve" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "response", _jsx(_components.span, { className: "token punctuation", children: "." }), "data", _jsx(_components.span, { className: "token punctuation", children: ")" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token builtin", children: "Promise" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "reject" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "response", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "error", _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "response", _jsx(_components.span, { className: "token punctuation", children: "}" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " error", _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "if" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "response", _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " result ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token function", children: "errorHandler" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "response", _jsx(_components.span, { className: "token operator", children: "?." }), "status", _jsx(_components.span, { className: "token punctuation", children: "," }), " response", _jsx(_components.span, { className: "token punctuation", children: "." }), "info", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" message", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "error" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "result", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), " ", _jsx(_components.span, { className: "token keyword", children: "else" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token builtin", children: "console" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "log" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'请求被中断'" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), " \n"] }), _jsx(_components.span, { className: "code-line", children: " \n" }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: ")" }), "\n"] })] }) }) })] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "其中统一错误函数" }), "\n"] }), "\n", _jsxs(_components.div, { className: "code-window", children: [_jsxs(_components.div, { className: "code-header", children: [_jsxs(_components.div, { className: "window-controls", children: [_jsx(_components.span, { className: "control close" }), _jsx(_components.span, { className: "control minimize" }), _jsx(_components.span, { className: "control maximize" })] }), _jsx(_components.span, { className: "code-lang", children: "ts" })] }), _jsx(_components.div, { className: "code-content", children: _jsx(_components.pre, { className: "language-ts", children: _jsxs(_components.code, { className: "language-ts code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token comment", children: "// 错误信息处理函数 " }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token function-variable function", children: "errorHandler" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "status", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token builtin", children: "number" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " info", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token builtin", children: "string" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "switch" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "status", _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "case" }), " ", _jsx(_components.span, { className: "token number", children: "400" }), _jsx(_components.span, { className: "token operator", children: ":" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "return" }), " ", _jsx(_components.span, { className: "token string", children: "\"语义有误，请求参数错误，无法被服务器理解\"" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "case" }), " ", _jsx(_components.span, { className: "token number", children: "401" }), _jsx(_components.span, { className: "token operator", children: ":" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "return" }), " ", _jsx(_components.span, { className: "token string", children: "\"请求要求用户的身份认证\"" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "case" }), " ", _jsx(_components.span, { className: "token number", children: "403" }), _jsx(_components.span, { className: "token operator", children: ":" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "return" }), " ", _jsx(_components.span, { className: "token string", children: "\"服务器理解请求，但是拒绝执行\"" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "case" }), " ", _jsx(_components.span, { className: "token number", children: "404" }), _jsx(_components.span, { className: "token operator", children: ":" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "return" }), " ", _jsx(_components.span, { className: "token string", children: "\"请求的资源不存在\"" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "case" }), " ", _jsx(_components.span, { className: "token number", children: "500" }), _jsx(_components.span, { className: "token operator", children: ":" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "return" }), " ", _jsx(_components.span, { className: "token string", children: "\"服务器内部错误\"" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "case" }), " ", _jsx(_components.span, { className: "token number", children: "502" }), _jsx(_components.span, { className: "token operator", children: ":" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "return" }), " ", _jsx(_components.span, { className: "token string", children: "\"网关错误\"" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "default" }), _jsx(_components.span, { className: "token operator", children: ":" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "return" }), " info", _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] })] }) }) })] }), "\n", _jsxs(_components.h3, { id: "get请求重试封装", children: ["Get请求重试封装", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#get请求重试封装", children: _jsx(_components.span, { className: "icon icon-link" }) })] }), "\n", _jsx(_components.p, { children: "当发起请求出现错误时，有时是因为网络波动、服务端临时故障（如 502、503）导致的。这种场景下，一次失败并不意味着真正的失败，自动重试几次往往能成功。我们可以在 Axios 的响应拦截器中加入重试逻辑，提升用户体验。但是正常情况下一般只对get请求进行这个封装。" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "幂等性" }), "：GET 请求是幂等的，多次请求不会改变服务器状态（不会重复创建数据、不会重复扣款）。"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "安全" }), "：POST/PUT/DELETE 等操作可能涉及数据修改，自动重试可能导致副作用（如重复下单）。如需重试，应由业务显式控制。"] }), "\n"] }), "\n", _jsxs(_components.div, { className: "code-window", children: [_jsxs(_components.div, { className: "code-header", children: [_jsxs(_components.div, { className: "window-controls", children: [_jsx(_components.span, { className: "control close" }), _jsx(_components.span, { className: "control minimize" }), _jsx(_components.span, { className: "control maximize" })] }), _jsx(_components.span, { className: "code-lang", children: "ts" })] }), _jsx(_components.div, { className: "code-content", children: _jsx(_components.pre, { className: "language-ts", children: _jsxs(_components.code, { className: "language-ts code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "(" }), "error", _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " response", _jsx(_components.span, { className: "token punctuation", children: "," }), " config ", _jsx(_components.span, { className: "token punctuation", children: "}" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " error", _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "if" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token operator", children: "!" }), "config", _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token keyword", children: "return" }), " ", _jsx(_components.span, { className: "token builtin", children: "Promise" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "reject" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "error", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token comment", children: "// 初始化重试计数 " }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" config", _jsx(_components.span, { className: "token punctuation", children: "." }), "__retryCount ", _jsx(_components.span, { className: "token operator", children: "=" }), " config", _jsx(_components.span, { className: "token punctuation", children: "." }), "__retryCount ", _jsx(_components.span, { className: "token operator", children: "??" }), " ", _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token comment", children: "// 判断是否需要重试：未超过3次，且（无响应（网络错误）或状态码>=500） " }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " shouldRetry ", _jsx(_components.span, { className: "token operator", children: "=" }), " config", _jsx(_components.span, { className: "token punctuation", children: "." }), "__retryCount ", _jsx(_components.span, { className: "token operator", children: "<" }), " ", _jsx(_components.span, { className: "token number", children: "3" }), " ", _jsx(_components.span, { className: "token operator", children: "&&" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: ["\t\t\t\t ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token operator", children: "!" }), "response ", _jsx(_components.span, { className: "token operator", children: "||" }), " response", _jsx(_components.span, { className: "token punctuation", children: "." }), "status ", _jsx(_components.span, { className: "token operator", children: ">=" }), " ", _jsx(_components.span, { className: "token number", children: "500" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "if" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "shouldRetry", _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" config", _jsx(_components.span, { className: "token punctuation", children: "." }), "__retryCount", _jsx(_components.span, { className: "token operator", children: "++" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token comment", children: "// 延迟后重试，不要立即显示错误 " }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "return" }), " ", _jsx(_components.span, { className: "token keyword", children: "new" }), " ", _jsx(_components.span, { className: "token class-name", children: _jsx(_components.span, { className: "token builtin", children: "Promise" }) }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "resolve ", _jsx(_components.span, { className: "token operator", children: "=>" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token function", children: "setTimeout" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token function", children: "resolve" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token function", children: "request" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "config", _jsx(_components.span, { className: "token punctuation", children: ")" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token number", children: "1000" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token comment", children: "// 所有重试都失败，才进行错误处理和提示 " }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "if" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "response", _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " result ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token function", children: "errorHandler" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "response", _jsx(_components.span, { className: "token punctuation", children: "." }), "status", _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" response", _jsx(_components.span, { className: "token punctuation", children: "." }), "data", _jsx(_components.span, { className: "token operator", children: "?." }), "message ", _jsx(_components.span, { className: "token operator", children: "||" }), " ", _jsx(_components.span, { className: "token string", children: "'请求失败'" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" message", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "error" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "result", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), " ", _jsx(_components.span, { className: "token keyword", children: "else" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token builtin", children: "console" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "log" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'请求被中断'" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "return" }), " ", _jsx(_components.span, { className: "token builtin", children: "Promise" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "reject" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "error", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] })] }) }) })] }), "\n", _jsxs(_components.h3, { id: "request请求解耦", children: ["request请求解耦", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#request请求解耦", children: _jsx(_components.span, { className: "icon icon-link" }) })] }), "\n", _jsxs(_components.p, { children: ["在大型前端项目中，如果每个组件都直接调用 ", _jsx(_components.code, { children: "axios.get" }), "、", _jsx(_components.code, { children: "axios.post" }), "，会导致 API 调用散落在各处，难以维护、测试和统一修改。", _jsx(_components.strong, { children: "请求解耦" }), "的核心思想是：将后端接口调用抽取成独立的 API 模块，组件只关心调用哪个 API、传入什么参数，而不关心底层实现细节（如 URL、请求方法、参数序列化等）。\n创建", _jsx(_components.code, { children: "/api/posts.ts" })] }), "\n", _jsxs(_components.div, { className: "code-window", children: [_jsxs(_components.div, { className: "code-header", children: [_jsxs(_components.div, { className: "window-controls", children: [_jsx(_components.span, { className: "control close" }), _jsx(_components.span, { className: "control minimize" }), _jsx(_components.span, { className: "control maximize" })] }), _jsx(_components.span, { className: "code-lang", children: "ts" })] }), _jsx(_components.div, { className: "code-content", children: _jsx(_components.pre, { className: "language-ts", children: _jsxs(_components.code, { className: "language-ts code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "import" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "request", _jsx(_components.span, { className: "token punctuation", children: "}" }), " ", _jsx(_components.span, { className: "token keyword", children: "from" }), " ", _jsx(_components.span, { className: "token string", children: "\"../utils/request.ts\"" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "interface" }), " ", _jsx(_components.span, { className: "token class-name", children: "Post" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" id", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token builtin", children: "number" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" title", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token builtin", children: "string" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" slug", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token builtin", children: "string" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" content", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token builtin", children: "string" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" excerpt", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token builtin", children: "string" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" viewCount", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token builtin", children: "number" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "export" }), " ", _jsx(_components.span, { className: "token keyword", children: "const" }), " getPosts ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token keyword", children: "async" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "id", _jsx(_components.span, { className: "token operator", children: "?" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token builtin", children: "number" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token builtin", children: "Promise" }), _jsx(_components.span, { className: "token operator", children: "<" }), "Post", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token operator", children: ">" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "if" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "id", _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " response ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token keyword", children: "await" }), " request", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsxs(_components.span, { className: "token generic-function", children: [_jsx(_components.span, { className: "token function", children: "get" }), _jsxs(_components.span, { className: "token generic class-name", children: [_jsx(_components.span, { className: "token operator", children: "<" }), "Post", _jsx(_components.span, { className: "token operator", children: ">" })] })] }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsxs(_components.span, { className: "token template-string", children: [_jsx(_components.span, { className: "token template-punctuation string", children: "`" }), _jsx(_components.span, { className: "token string", children: "/posts/" }), _jsxs(_components.span, { className: "token interpolation", children: [_jsx(_components.span, { className: "token interpolation-punctuation punctuation", children: "${" }), "id", _jsx(_components.span, { className: "token interpolation-punctuation punctuation", children: "}" })] }), _jsx(_components.span, { className: "token template-punctuation string", children: "`" })] }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "return" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), "response", _jsx(_components.span, { className: "token punctuation", children: "." }), "data", _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " ", _jsx(_components.span, { className: "token comment", children: "// 单个对象包装为数组 " }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), " ", _jsx(_components.span, { className: "token keyword", children: "else" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " response ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token keyword", children: "await" }), " request", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsxs(_components.span, { className: "token generic-function", children: [_jsx(_components.span, { className: "token function", children: "get" }), _jsxs(_components.span, { className: "token generic class-name", children: [_jsx(_components.span, { className: "token operator", children: "<" }), "Post", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token operator", children: ">" })] })] }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsxs(_components.span, { className: "token template-string", children: [_jsx(_components.span, { className: "token template-punctuation string", children: "`" }), _jsx(_components.span, { className: "token string", children: "/posts" }), _jsx(_components.span, { className: "token template-punctuation string", children: "`" })] }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "return" }), " response", _jsx(_components.span, { className: "token punctuation", children: "." }), "data", _jsx(_components.span, { className: "token punctuation", children: ";" }), " ", _jsx(_components.span, { className: "token comment", children: "// 本来就是数组 " }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] })] }) }) })] }), "\n", _jsx(_components.p, { children: "然后再原来的tsx文件内调用：" }), "\n", _jsxs(_components.div, { className: "code-window", children: [_jsxs(_components.div, { className: "code-header", children: [_jsxs(_components.div, { className: "window-controls", children: [_jsx(_components.span, { className: "control close" }), _jsx(_components.span, { className: "control minimize" }), _jsx(_components.span, { className: "control maximize" })] }), _jsx(_components.span, { className: "code-lang", children: "tsx" })] }), _jsx(_components.div, { className: "code-content", children: _jsx(_components.pre, { className: "language-tsx", children: _jsxs(_components.code, { className: "language-tsx code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), "post", _jsx(_components.span, { className: "token punctuation", children: "," }), " setPost", _jsx(_components.span, { className: "token punctuation", children: "]" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsxs(_components.span, { className: "token generic-function", children: [_jsx(_components.span, { className: "token function", children: "useState" }), _jsxs(_components.span, { className: "token generic class-name", children: [_jsx(_components.span, { className: "token operator", children: "<" }), "Post", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token operator", children: ">" })] })] }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "const" }), " fetchPost ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token function", children: "debounce" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token keyword", children: "async" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "id", _jsx(_components.span, { className: "token operator", children: "?" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token builtin", children: "number" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " posts ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token keyword", children: "await" }), " ", _jsx(_components.span, { className: "token function", children: "getPosts" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "id ", _jsx(_components.span, { className: "token operator", children: "?" }), " id ", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token keyword", children: "undefined" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token function", children: "setPost" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "posts", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token number", children: "500" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), "\n"] })] }) }) })] }), "\n", _jsxs(_components.h2, { id: "navigator", children: ["navigator", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#navigator", children: _jsx(_components.span, { className: "icon icon-link" }) })] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "navigator" }), " 是浏览器中代表用户代理（浏览器）信息的对象。我们可以通过它获取到当前浏览器的类型、版本、语言、设备信息、网络连接状态等，并能使用一些高级的 Web API，如发送可靠数据、注册 Service Worker、读写剪贴板等。"] }), "\n", _jsxs(_components.h3, { id: "网络状态", children: ["网络状态", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#网络状态", children: _jsx(_components.span, { className: "icon icon-link" }) })] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "navigator.onLine" }), "一般用来判断是否联网，返回布尔值，表示浏览器是否认为当前处于联网状态（", _jsx(_components.code, { children: "true" }), " / ", _jsx(_components.code, { children: "false" }), "）。但是只能粗粒度判断，例如断网、飞行模式会变成 ", _jsx(_components.code, { children: "false" }), "，即使 ", _jsx(_components.code, { children: "true" }), " 也可能无法访问特定服务"] }), "\n", _jsxs(_components.div, { className: "code-window", children: [_jsxs(_components.div, { className: "code-header", children: [_jsxs(_components.div, { className: "window-controls", children: [_jsx(_components.span, { className: "control close" }), _jsx(_components.span, { className: "control minimize" }), _jsx(_components.span, { className: "control maximize" })] }), _jsx(_components.span, { className: "code-lang", children: "ts" })] }), _jsx(_components.div, { className: "code-content", children: _jsx(_components.pre, { className: "language-ts", children: _jsxs(_components.code, { className: "language-ts code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), "status", _jsx(_components.span, { className: "token punctuation", children: "," }), " setStatus", _jsx(_components.span, { className: "token punctuation", children: "]" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsxs(_components.span, { className: "token generic-function", children: [_jsx(_components.span, { className: "token function", children: "useState" }), _jsxs(_components.span, { className: "token generic class-name", children: [_jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token builtin", children: "any" }), _jsx(_components.span, { className: "token operator", children: ">" })] })] }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token keyword", children: "null" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "return" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: ">" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), "div style", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "display", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'flex'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " justifyContent", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'center'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " alignItems", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'center'" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token operator", children: ">" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), "Button type", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token string", children: "'primary'" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" onClick", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token function", children: "setStatus" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "navigator", _jsx(_components.span, { className: "token punctuation", children: "." }), "onLine", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token operator", children: ">" }), " \n"] }), _jsx(_components.span, { className: "code-line", children: " 网络环境 \n" }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "Button", _jsx(_components.span, { className: "token operator", children: ">" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "div", _jsx(_components.span, { className: "token operator", children: ">" }), " ", _jsx(_components.span, { className: "token operator", children: "<" }), "pre", _jsx(_components.span, { className: "token operator", children: ">" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token constant", children: "JSON" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "stringify" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "status", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "pre", _jsx(_components.span, { className: "token operator", children: ">" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), _jsx(_components.span, { className: "token operator", children: ">" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), "\n"] })] }) }) })] }), "\n", _jsxs(_components.h3, { id: "强网弱网环境", children: ["强网弱网环境", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#强网弱网环境", children: _jsx(_components.span, { className: "icon icon-link" }) })] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "navigator.connection" }), "返回", _jsx(_components.code, { children: "NetworkInformation" }), " 对象，提供更细粒度的网络连接信息。"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "effectiveType" }), "：", _jsx(_components.code, { children: "'slow-2g'" }), "、", _jsx(_components.code, { children: "'2g'" }), "、", _jsx(_components.code, { children: "'3g'" }), "、", _jsx(_components.code, { children: "'4g'" })] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "rtt" }), "：估算往返时间（毫秒）"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "downlink" }), "：下行带宽（Mbps）"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "saveData" }), "：用户是否开启了“数据节省模式”"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "type" }), "：物理网络类型（", _jsx(_components.code, { children: "'wifi'" }), "、", _jsx(_components.code, { children: "'cellular'" }), " 等）"] }), "\n", _jsx(_components.li, { children: "一般3g、4g以上为强网环境，反之为弱网" }), "\n"] }), "\n", _jsxs(_components.div, { className: "code-window", children: [_jsxs(_components.div, { className: "code-header", children: [_jsxs(_components.div, { className: "window-controls", children: [_jsx(_components.span, { className: "control close" }), _jsx(_components.span, { className: "control minimize" }), _jsx(_components.span, { className: "control maximize" })] }), _jsx(_components.span, { className: "code-lang", children: "ts" })] }), _jsx(_components.div, { className: "code-content", children: _jsx(_components.pre, { className: "language-ts", children: _jsxs(_components.code, { className: "language-ts code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token operator", children: "<" }), "Button onClick", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " conn ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "navigator ", _jsx(_components.span, { className: "token keyword", children: "as" }), " ", _jsx(_components.span, { className: "token builtin", children: "any" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "." }), "connection", _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "if" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "conn", _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token function", children: "setStatus" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" effectiveType", _jsx(_components.span, { className: "token operator", children: ":" }), " conn", _jsx(_components.span, { className: "token punctuation", children: "." }), "effectiveType", _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" rtt", _jsx(_components.span, { className: "token operator", children: ":" }), " conn", _jsx(_components.span, { className: "token punctuation", children: "." }), "rtt", _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" downlink", _jsx(_components.span, { className: "token operator", children: ":" }), " conn", _jsx(_components.span, { className: "token punctuation", children: "." }), "downlink", _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" saveData", _jsx(_components.span, { className: "token operator", children: ":" }), " conn", _jsx(_components.span, { className: "token punctuation", children: "." }), "saveData", _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" type", _jsx(_components.span, { className: "token operator", children: ":" }), " conn", _jsx(_components.span, { className: "token punctuation", children: "." }), "type", _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), " ", _jsx(_components.span, { className: "token keyword", children: "else" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token function", children: "setStatus" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'不支持'" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token operator", children: ">" }), " \n"] }), _jsx(_components.span, { className: "code-line", children: " 连接环境 \n" }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "Button", _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] })] }) }) })] }), "\n", _jsxs(_components.h3, { id: "clipboard剪贴板", children: ["clipboard剪贴板", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#clipboard剪贴板", children: _jsx(_components.span, { className: "icon icon-link" }) })] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "navigator.clipboard" }), " 提供了读写系统剪贴板的能力，让网页可以安全地复制文本、图片或数据，同时需要用户的授权或由用户手势触发。"] }), "\n", _jsxs(_components.table, { children: [_jsx(_components.thead, { children: _jsxs(_components.tr, { children: [_jsx(_components.th, { children: "方法" }), _jsx(_components.th, { children: "说明" }), _jsx(_components.th, { children: "返回值" })] }) }), _jsxs(_components.tbody, { children: [_jsxs(_components.tr, { children: [_jsx(_components.td, { children: _jsx(_components.code, { children: "writeText(text)" }) }), _jsx(_components.td, { children: "将文本写入剪贴板" }), _jsx(_components.td, { children: _jsx(_components.code, { children: "Promise" }) })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: _jsx(_components.code, { children: "readText()" }) }), _jsx(_components.td, { children: "读取剪贴板中的文本" }), _jsx(_components.td, { children: _jsx(_components.code, { children: "Promise" }) })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: _jsx(_components.code, { children: "write(data)" }) }), _jsx(_components.td, { children: "写入任意数据（如图片、HTML、自定义格式）" }), _jsx(_components.td, { children: _jsx(_components.code, { children: "Promise" }) })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: _jsx(_components.code, { children: "read()" }) }), _jsx(_components.td, { children: "读取剪贴板中的任意数据" }), _jsx(_components.td, { children: _jsx(_components.code, { children: "Promise" }) })] })] })] }), "\n", _jsxs(_components.div, { className: "code-window", children: [_jsxs(_components.div, { className: "code-header", children: [_jsxs(_components.div, { className: "window-controls", children: [_jsx(_components.span, { className: "control close" }), _jsx(_components.span, { className: "control minimize" }), _jsx(_components.span, { className: "control maximize" })] }), _jsx(_components.span, { className: "code-lang", children: "ts" })] }), _jsx(_components.div, { className: "code-content", children: _jsx(_components.pre, { className: "language-ts", children: _jsxs(_components.code, { className: "language-ts code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), "copyText", _jsx(_components.span, { className: "token punctuation", children: "," }), " setCopyText", _jsx(_components.span, { className: "token punctuation", children: "]" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token function", children: "useState" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "\"Hello, clipboard!\"" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsx(_components.span, { className: "code-line", children: " \n" }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token comment", children: "// 复制文本 " }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token function-variable function", children: "handleCopy" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token keyword", children: "async" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "try" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "await" }), " navigator", _jsx(_components.span, { className: "token punctuation", children: "." }), "clipboard", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "writeText" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "copyText", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token function", children: "setStatus" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), " type", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"copy\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " result", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"复制成功\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " text", _jsx(_components.span, { className: "token operator", children: ":" }), " copyText ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), " ", _jsx(_components.span, { className: "token keyword", children: "catch" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "err", _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token function", children: "setStatus" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), " type", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"copy\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " result", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"复制失败\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " error", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token function", children: "String" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "err", _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsx(_components.span, { className: "code-line", children: " \n" }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token comment", children: "// 读取剪贴板文本 " }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token function-variable function", children: "handlePaste" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token keyword", children: "async" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "try" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " text ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token keyword", children: "await" }), " navigator", _jsx(_components.span, { className: "token punctuation", children: "." }), "clipboard", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "readText" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token function", children: "setStatus" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), " type", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"paste\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " result", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"读取成功\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " text ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), " ", _jsx(_components.span, { className: "token keyword", children: "catch" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "err", _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token function", children: "setStatus" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), " type", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"paste\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " result", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"读取失败\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " error", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token function", children: "String" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "err", _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] })] }) }) })] }), "\n", _jsx(_components.p, { children: "UI部分" }), "\n", _jsxs(_components.div, { className: "code-window", children: [_jsxs(_components.div, { className: "code-header", children: [_jsxs(_components.div, { className: "window-controls", children: [_jsx(_components.span, { className: "control close" }), _jsx(_components.span, { className: "control minimize" }), _jsx(_components.span, { className: "control maximize" })] }), _jsx(_components.span, { className: "code-lang", children: "tsx" })] }), _jsx(_components.div, { className: "code-content", children: _jsx(_components.pre, { className: "language-tsx", children: _jsxs(_components.code, { className: "language-tsx code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "div"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "style" }), _jsxs(_components.span, { className: "token script language-javascript", children: [_jsx(_components.span, { className: "token script-punctuation punctuation", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), " marginTop", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "32" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " borderTop", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"1px solid #ccc\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " paddingTop", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "16" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "}" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text", children: " \n" })] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "h3"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text", children: "剪贴板演示" }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), _jsx(_components.span, { className: "token plain-text", children: " \n" })] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), _jsx(_components.span, { className: "token class-name", children: "Space.Compact" })] }), " ", _jsx(_components.span, { className: "token attr-name", children: "style" }), _jsxs(_components.span, { className: "token script language-javascript", children: [_jsx(_components.span, { className: "token script-punctuation punctuation", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), " width", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"100%\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " marginBottom", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "16" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "}" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text", children: " \n" })] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), _jsx(_components.span, { className: "token class-name", children: "Input" })] }), " ", _jsx(_components.span, { className: "token attr-name", children: "value" }), _jsxs(_components.span, { className: "token script language-javascript", children: [_jsx(_components.span, { className: "token script-punctuation punctuation", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "copyText", _jsx(_components.span, { className: "token punctuation", children: "}" })] }), " \n"] })] }), _jsx(_components.span, { className: "code-line", children: _jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token attr-name", children: "onChange" }), _jsxs(_components.span, { className: "token script language-javascript", children: [_jsx(_components.span, { className: "token script-punctuation punctuation", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "e", _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token function", children: "setCopyText" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "e", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "target" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "value" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "}" })] }), " \n"] }) }), _jsx(_components.span, { className: "code-line", children: _jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token attr-name", children: "placeholder" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "输入要复制的文本", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), " \n"] }) }), _jsx(_components.span, { className: "code-line", children: _jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token attr-name", children: "style" }), _jsxs(_components.span, { className: "token script language-javascript", children: [_jsx(_components.span, { className: "token script-punctuation punctuation", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), " flex", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "1" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "}" })] }), " \n"] }) }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "/>" })] }), _jsx(_components.span, { className: "token plain-text", children: " \n" })] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), _jsx(_components.span, { className: "token class-name", children: "Button" })] }), " ", _jsx(_components.span, { className: "token attr-name", children: "type" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "primary", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), " ", _jsx(_components.span, { className: "token attr-name", children: "onClick" }), _jsxs(_components.span, { className: "token script language-javascript", children: [_jsx(_components.span, { className: "token script-punctuation punctuation", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "handleCopy", _jsx(_components.span, { className: "token punctuation", children: "}" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text", children: " \n" })] }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token plain-text", children: " 复制文本 \n" }) }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), _jsx(_components.span, { className: "token plain-text", children: " \n" })] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), _jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), _jsx(_components.span, { className: "token class-name", children: "Button" })] }), " ", _jsx(_components.span, { className: "token attr-name", children: "onClick" }), _jsxs(_components.span, { className: "token script language-javascript", children: [_jsx(_components.span, { className: "token script-punctuation punctuation", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "handlePaste", _jsx(_components.span, { className: "token punctuation", children: "}" })] }), " ", _jsx(_components.span, { className: "token attr-name", children: "style" }), _jsxs(_components.span, { className: "token script language-javascript", children: [_jsx(_components.span, { className: "token script-punctuation punctuation", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), " marginBottom", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "16" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "}" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text", children: " \n" })] }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token plain-text", children: " 读取剪贴板 \n" }) }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), _jsx(_components.span, { className: "token plain-text", children: " \n" })] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token plain-text" }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] })] }) }) })] }), "\n", _jsxs(_components.h3, { id: "数据上报sendbeacon", children: ["数据上报sendBeacon", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#数据上报sendbeacon", children: _jsx(_components.span, { className: "icon icon-link" }) })] }), "\n", _jsx(_components.p, { children: "数据上报是指前端将用户行为、业务指标、错误日志或性能数据发送到后端服务器的过程。它是产品分析、监控告警、用户体验优化的基础。无论是统计页面 PV、记录按钮点击，还是追踪接口异常、收集崩溃日志，都离不开可靠的数据上报机制。" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "业务分析" }), "：了解用户如何使用产品（点击热图、转化漏斗、留存率）。"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "性能监控" }), "：收集 LCP、FID、CLS 等 Core Web Vitals，发现性能瓶颈。"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "错误追踪" }), "：将前端运行时错误、API 异常上报到日志系统（如 Sentry），快速定位问题。"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "安全审计" }), "：记录敏感操作（登录、支付、修改密码），用于事后追溯。"] }), "\n"] }), "\n", _jsx(_components.p, { children: "当然数据上报分为侵入性埋点和非侵入性埋点，不过这个话题太大了，需要单开博文" }), "\n", _jsxs(_components.div, { className: "code-window", children: [_jsxs(_components.div, { className: "code-header", children: [_jsxs(_components.div, { className: "window-controls", children: [_jsx(_components.span, { className: "control close" }), _jsx(_components.span, { className: "control minimize" }), _jsx(_components.span, { className: "control maximize" })] }), _jsx(_components.span, { className: "code-lang", children: "ts" })] }), _jsx(_components.div, { className: "code-content", children: _jsx(_components.pre, { className: "language-ts", children: _jsxs(_components.code, { className: "language-ts code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token comment", children: "// 使用 sendBeacon 上报 " }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token function-variable function", children: "handleBeaconReport" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " blob ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token keyword", children: "new" }), " ", _jsx(_components.span, { className: "token class-name", children: "Blob" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token constant", children: "JSON" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "stringify" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "sendData", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " type", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"application/json\"" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " success ", _jsx(_components.span, { className: "token operator", children: "=" }), " navigator", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "sendBeacon" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "\"http://localhost:3000/api/report\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " blob", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token function", children: "setStatus" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), " type", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"beacon_report\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " success", _jsx(_components.span, { className: "token punctuation", children: "," }), " message", _jsx(_components.span, { className: "token operator", children: ":" }), " success ", _jsx(_components.span, { className: "token operator", children: "?" }), " ", _jsx(_components.span, { className: "token string", children: "\"已加入发送队列\"" }), " ", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"加入队列失败\"" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line", children: "\n" }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token operator", children: "<" }), "Button onClick", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "handleBeaconReport", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token operator", children: ">" }), "Beacon 上报", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "Button", _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] })] }) }) })] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["有时候可以做监听", _jsx(_components.code, { children: "visibilitychange" }), ",也就是页面隐藏的时候"] }), "\n"] }), "\n", _jsxs(_components.div, { className: "code-window", children: [_jsxs(_components.div, { className: "code-header", children: [_jsxs(_components.div, { className: "window-controls", children: [_jsx(_components.span, { className: "control close" }), _jsx(_components.span, { className: "control minimize" }), _jsx(_components.span, { className: "control maximize" })] }), _jsx(_components.span, { className: "code-lang", children: "tsx" })] }), _jsx(_components.div, { className: "code-content", children: _jsx(_components.pre, { className: "language-tsx", children: _jsxs(_components.code, { className: "language-tsx code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token function", children: "useEffect" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token function-variable function", children: "handleVisibilityChange" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "if" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token dom variable", children: "document" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "visibilityState" }), " ", _jsx(_components.span, { className: "token operator", children: "===" }), " ", _jsx(_components.span, { className: "token string", children: "'hidden'" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " payload ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " event", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'page_hide'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " time", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token known-class-name class-name", children: "Date" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "now" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " blob ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token keyword", children: "new" }), " ", _jsx(_components.span, { className: "token class-name", children: "Blob" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token known-class-name class-name", children: "JSON" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "stringify" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "payload", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " type", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'application/json'" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token dom variable", children: "navigator" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "sendBeacon" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'/api/log'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " blob", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token dom variable", children: "document" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "addEventListener" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'visibilitychange'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " handleVisibilityChange", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: ["\t", _jsx(_components.span, { className: "token keyword", children: "return" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token dom variable", children: "document" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "removeEventListener" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'visibilitychange'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " handleVisibilityChange", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] })] }) }) })] }), "\n", _jsx(R2Image, { r2Key: "blog/front-network/5.png", alt: "5", className: "", caption: "" })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { default: MDXContent }; function _missingMdxReference(id, component) { throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); }