后端【免费下载链接】graffleSimple GraphQL Client for JavaScript. Minimal. Extensible. Type Safe. Runs everywhere.项目地址https://gitcode.com/gh_mirrors/gr/graffle点击查看免费下载本指南讲解如何在 Graffle 客户端中通过AbortController信号取消进行中的 GraphQL 请求覆盖从最小可运行示例、raw配置的底层机制、请求管线中的中止错误传播到超时控制与错误处理的最佳实践。读完你将掌握在 Graffle 中实现请求取消、超时降级与资源释放的完整方案。背景为什么需要取消请求在前端与后端应用中请求取消是一个高频刚需场景用户快速切换页面导致旧请求的响应已无意义、搜索框防抖触发的过期查询、上传进度被中断、或者设置了超时时间需要强制中止慢请求。如果放任这些请求继续占用网络与计算资源会造成带宽浪费、状态竞争race condition以及不必要的副作用。Graffle 作为运行在 JavaScript 各环境中的 GraphQL 客户端直接复用 Web 平台标准的AbortController/AbortSignal机制——不引入任何私有 API因此在浏览器、Node.js、Deno、Bun 等任何支持标准fetch的环境中都能以一致的方式工作。本仓库的官方示例 abort.md 完整演示了这一能力。最小可运行示例完整代码以下是官方示例的完整实现与 示例源码 一一对应import { Graffle } from graffle const abortController new AbortController() // ^^^^^^^^^^^^^^^ const graffle Graffle.create().transport({ url: http://localhost:3000/graphql, }) const resultPromise graffle .transport({ raw: { signal: abortController.signal } }) // ^^^^^^^^^^^^^^^ .gql( { pokemons { name } } ) .$send() abortController.abort() // ^^^^^ const result await resultPromise.catch((error: unknown) (error as Error).message) console.log(result)代码执行到末尾时控制台输出对应 运行输出 与 快照测试This operation was aborted逐行拆解执行流程创建信号源new AbortController()生成一个控制器其signal属性就是要传给请求的取消信号。配置传输层Graffle.create().transport({ url })先建立带端点地址的客户端实例。注入信号链式调用.transport({ raw: { signal: abortController.signal } })在发起本次请求前把信号写入底层RequestInit。注意这里是在单次请求级别注入不污染客户端全局配置。发送请求.gql(...).$send()返回一个 Promise赋值给resultPromise以便稍后统一处理。触发中止abortController.abort()使信号变为中止状态。若请求尚未完成fetch会立即以AbortError拒绝。捕获错误.catch()把错误对象转成message字符串最终打印This operation was aborted浏览器与 Node 中的错误文案可能略有差异见下文测试一节。raw配置通往底层 RequestInit 的通道示例中的关键配置项是raw。查看 TransportHttp 扩展源码 中ConfigurationInput的类型定义export type ConfigurationInput { url?: URL | string | undefined methodMode?: MethodMode | undefined headers?: HeadersInit | undefined raw?: RequestInit | undefined }raw的类型就是 Web 标准中的RequestInit即fetch(url, init)的第二个参数这意味着 Graffle 没有为取消功能单独发明一套抽象而是把整个底层请求配置完整开放出来raw可承载的能力典型字段说明请求取消signal传入AbortSignalabort()后请求被中止跨域策略mode: cors控制请求的跨域模式缓存策略cache控制 HTTP 缓存行为凭据策略credentials是否携带 Cookie 等凭据重定向策略redirect跟随 / 手动 / 报错流式上传duplex配合 ReadableStream 请求体使用自定义请求体body覆盖默认的 JSON 编码结果官方 raw 示例 演示了用raw: { mode: cors }访问跨域配置并通过anyware钩子在exchange阶段打印最终的请求对象可以看到raw中的字段与 Graffle 自动生成的headers、method、body一起被合并进真正的fetch调用。底层合并机制在 TransportHttp.ts 的run阶段源码通过两次Http.Req.mergeInit完成配置合并const baseRequestInit Http.Req.mergeInit( Http.Req.mergeInit( { headers: requestMethod get ? getRequestHeadersRec : postRequestHeadersRec, }, input.transport.raw, // ← 用户传入的 raw包含 signal在此合并 ), { ...(input.transport.headers ! undefined { headers: input.transport.headers }), }, )合并顺序是先以 Graffle 的默认accept/content-type头为基础再合并raw信号、模式等全部落位最后覆盖显式配置的headers。随后在exchange阶段这个baseRequestInit被原样传给标准fetchslots.fetch: (url: string | URL, init?: RequestInit): Prom.MaybeResponse fetch(url, init) // ... const response await slots.fetch(input.request.url.value, input.request)因此只要raw里携带了signal中止信号就会沿着RequestInit → fetch的调用链生效Graffle 内部不会拦截或吞掉这个信号。中止错误如何被识别与抛出请求被取消后fetch会以AbortError拒绝。这里有一个值得注意的设计在 Graffle 的请求管线request pipeline中任何步骤抛出的错误默认都会被包装成统一的返回错误取决于output配置。但中止属于用户主动取消的可预期场景如果被包装反而增加了解析成本。查看 请求管线定义Graffle 专门为中止错误开了“直通”通道// If core errors caused by an abort error then raise it as a direct error. // This is an expected possible error. Possible when user cancels a request. passthroughErrorWith: (signal) { return signal.hookName exchange Err.isAbortError(signal.error) },即当错误发生在exchange步骤也就是真正调用fetch的那一环且错误被判定为中止错误Err.isAbortError时管线把它直接抛出不再做包装。这意味着在你的业务代码里可以用统一的catch捕获并判断try { const result await resultPromise } catch (error) { if ((error as Error).name AbortError || /abort/i.test((error as Error).message)) { // 用户主动取消或超时触发 } else { // 其他请求错误 } }官方测试对行为的确证TransportHttp.test.ts 中的can set signal测试组直接验证了取消行为const abortErrorMessagePattern /This operation was aborted|AbortError: The operation was aborted/ test(to constructor, async ({ g1 }) { const abortController new AbortController() const g2 g1.transport({ url, raw: { signal: abortController.signal } }) const resultPromise g2.gql(query { id }).$send() abortController.abort() const { caughtError } await resultPromise.catch((caughtError: unknown) ({ caughtError })) as any as { caughtError: Error } expect(caughtError.message).toMatch(abortErrorMessagePattern) })测试注释还说明了 JSDOM 与 Node 环境的差异JSDOM 抛出的是一般的ErrorNode 则抛出AbortError两者的 message 分别匹配This operation was aborted或AbortError: The operation was aborted。这也是为什么示例中用.catch()提取error.message打印而不是直接打印错误对象——不同环境文案不同但message始终可读。进阶实战一用信号实现请求超时AbortSignal的标准能力之一是AbortSignal.timeout()可组合出简洁的超时取消const graffle Graffle.create().transport({ url: http://localhost:3000/graphql, }) const result await graffle .transport({ raw: { signal: AbortSignal.timeout(5000) }, // 5 秒超时自动中止 }) .gql({ pokemons { name } }) .$send()也可以保留手动控制与超时的组合用AbortSignal.any([manualSignal, AbortSignal.timeout(5000)])实现“手动取消或超时任一触发即中止”。同样地在需要同时控制多个并发请求时可以共享同一个AbortController一次abort()批量取消所有挂起请求——例如用户离开页面时清理全部在途请求const controller new AbortController() const clients urls.map((url) Graffle.create().transport({ url, raw: { signal: controller.signal } }), ) // 页面卸载时 controller.abort()进阶实战二结合 output 配置的错误分流如果客户端开启了output: { envelope: true }或返回错误模式中止错误依然会按“直通”规则直接抛出不会进入 envelope 的errors数组。这让取消语义保持纯粹取消就是取消不是业务错误。你在处理时只需区分“用户/超时主动中止”与“服务端返回错误”推荐把取消分支放在最前面处理避免与 GraphQL 业务错误混淆。使用注意事项与限制信号需在请求发出前注入signal在$send()调用前通过.transport({ raw: { signal } })注入即可请求一旦完成abort()不再产生任何影响Promise 已 settled。abort()后可复用控制器吗不能。一个AbortController触发abort()后即永久处于中止状态新请求需要新建控制器并注入新的signal。服务端处理语义中止只是客户端停止等待响应服务端是否继续执行取决于其自身实现Graffle 侧无需额外处理。环境差异Node.js 的AbortSignal.timeout需要 Node 17.3或通过node:timers/promises等方案兼容浏览器现代版本均原生支持。以当前仓库的实际依赖环境为准在旧运行时请使用 polyfill 或自行用setTimeoutabort()实现等效超时。与其他raw字段共存raw中同时写signal与其他字段如mode、cache没有任何冲突它们会一并合并进RequestInit。小结Graffle 的请求取消依托标准AbortController通过transport配置的raw字段直达RequestInit并由请求管线对中止错误提供“直通抛出”的语义。无论你是要实现用户离开页面时的资源清理、搜索输入的防抖取消失效还是统一的请求超时控制都可以直接复用本文的模式。官方示例文档见 abort.md配套的完整可运行源码在 examples/10_transport-http/transport-http_abort.ts底层实现与测试分别位于 src/extensions/TransportHttp/TransportHttp.ts 与 TransportHttp.test.ts可作为继续深入阅读的入口。赞分享后端【免费下载链接】graffleSimple GraphQL Client for JavaScript. Minimal. Extensible. Type Safe. Runs everywhere.项目地址https://gitcode.com/gh_mirrors/gr/graffle点击查看免费下载相关推荐Graffle 请求取消实战使用 AbortController 中断 GraphQL HTTP 请求Graffle 请求取消实战使用 AbortController 中断 GraphQL HTTP 请求 本文讲解如何在 Graffle一个极简、可扩展、类型后端Qlever实战案例科学家数据集上的SPARQL查询优化实践Qlever实战案例科学家数据集上的SPARQL查询优化实践 想要在科学家数据集上实现 SPARQL查询优化 并提升查询性能吗Qlever作为一款高性能的图解决React数据请求痛点用AbortController优雅取消请求解决React数据请求痛点用AbortController优雅取消请求 在React应用开发中数据请求是必不可少的部分但随之而来的 取消请求 问题常常困扰UI组件上一篇3步解决文档识别难题智能OCR工具完全指南下一篇从闲置电视盒子到高性能服务器Armbian技术重构之路创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考