feat: add abort

hans000 · hans000 · commit 42de1e055ffd · 2024-08-29T22:44:14.000+08:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,44 +1,45 @@
 ## v1.18.0
-- 重构了xhr逻辑
-- 移除了fake模式，支持规则内配置，粒度更小了，使用`faked`字段
+- 重构了 xhr 逻辑
+- 移除了 fake 模式，支持规则内配置，粒度更小了，使用`faked`字段
 - 添加新的模式，代理模式
-- 规则中新增blocked、faked字段
+- 规则中新增 blocked、faked 字段
 - 新增onBlocking hook
 - 新增支持event-source-stream，配套的字段（chunks, chunkInterval, chunkTemplate）
 - 支持更细粒度的修改headers
+- 完善功能支持 abort 操作
 
 ## v1.17.0
-- 支持whiteList配置
+- 支持 whiteList 配置
 - 修复了xhr fake模式下不生效的问题
 
 ## v1.16.1
-- 支持font类型资源的拦截
+- 支持 font 类型资源的拦截
 
 ## v1.16.0
-- 更新icon
-- vite更新到5.0，antd更新到5.0
+- 更新 icon
+- vite 更新到 5.0，antd 更新到5.0
 - 添加禁用类型，可设置禁用 xhr 或 fetch
-- 添加插件拦截时机，可设置start end delay trigger override
-- 修复fake不生效的问题
+- 添加插件拦截时机，可设置 start end delay trigger override
+- 修复 fake 不生效的问题
 
 ## v1.15.0
-- 添加run at功能
+- 添加 run at 功能
 
 ## v1.14.4
 - 修复页面刷新时，工作空间没有数据没有更新的问题
-- 更改license
+- 更改 license
 
 ## v1.14.3
-- 添加onRedirect、onResponseHeaders、 onRequestHeaders钩子
-- 支持拦截重定向css js类型的资源
+- 添加 onRedirect、onResponseHeaders、 onRequestHeaders 钩子
+- 支持拦截重定向 css js 类型的资源
 - 优化列表信息展示
 
 ## v1.14.0
-- 添加groupId字段，支持工作空间
+- 添加 groupId 字段，支持工作空间
 
 ## v1.13.0
-- 优化injected script的运行逻辑
-- 修改code面板的处理逻辑，增加ts提示逻辑
+- 优化 injected script 的运行逻辑
+- 修改 code 面板的处理逻辑，增加 ts 提示逻辑
 - 添加配置面板
 - 优化暗色模式
 
@@ -49,56 +50,56 @@
 - 拦截开关
 
 ## v.1.11.0
-- 迁移到react18
-- 配置规则中添加params的判断
-- 添加description选项
-- 修复搜索bug
+- 迁移到 react 18
+- 配置规则中添加 params 的判断
+- 添加 description 选项
+- 修复搜索 bug
 - 添加多语言
 
 ## v.1.10.3
-- 调整type选项，缺省时自动匹配
+- 调整 type 选项，缺省时自动匹配
 
 ## v.1.10.2
-- 添加type型列
+- 添加 type 型列
 
 ## v.1.10.1
-- 添加了test, type选项
+- 添加了 test, type 选项
 
 ## v.1.10.0
-- 添加了fetch
+- 添加了 fetch
 
 ## v1.8.0
-- 添加了redirectUrl
+- 添加了 redirectUrl
 
 ## v1.7.2
 
-- 替换minimatch
+- 替换 minimatch
 
 ## v1.7.1
 
-- 重写fakeXhr setResponseHeaders
-- 添加patch类型
+- 重写 fakeXhr setResponseHeaders
+- 添加 patch 类型
 
 ## v1.7.0
 
-- 添加faked选项，用于适应不同的使用场景
+- 添加 faked 选项，用于适应不同的使用场景
 
 ## v1.6.3
 
-- 修复编辑器json校验问题
+- 修复编辑器 json 校验问题
 
 ## v1.6.2
 
-- 添加local版本
+- 添加 local 版本
 
 ## v1.6.1
 
-- 实现require机制，通过cdn引入minimatch
+- 实现 require 机制，通过 cdn 引入 minimatch
 - 修复筛选bug
 
 ## v1.6
 
-- 使用glob规则匹配url，移除正则匹配
+- 使用 glob 规则匹配 url，移除正则匹配
 - 扁平数据管理，支持过滤字段
 - 支持修改响应头
-- 使用cdn，大幅度缩减安装包
+- 使用 cdn，大幅度缩减安装包
diff --git a/src/injected/proxy/fetch.ts b/src/injected/proxy/fetch.ts
@@ -6,6 +6,7 @@ import { asyncGenerator, createRunFunc, delayAsync, formatChunk, parseHeaderKey
 import { log } from "../../tools/log";
 import { parseUrl } from "../../tools";
 import { Options, __global__, getPageFetch } from "./globalVar";
+import { createBlockException } from "../../tools/exception";
 
 let unproxied = true
 
@@ -68,7 +69,7 @@ export function proxyFetch(options: Options) {
                         url: url.origin + url.pathname,
                     }) || matchItem.blocked
                     if (blocked) {
-                        throw new Error('net::ERR_BLOCKED_BY_CLIENT')
+                        throw createBlockException()
                     }
                 }
 
@@ -79,19 +80,32 @@ export function proxyFetch(options: Options) {
                     : await realFetch.call(thisArg, input, init)
                 const response = await onFetchIntercept!(matchItem)(realResponse)
 
+                const abortController = new AbortController()
+
+                init.signal?.addEventListener('abort', () => {
+                    abortController.abort()
+                    return
+                })
+
                 return delayAsync(async () => {
                     let res: Response = response || realResponse
                     
                     if (isEventSource) {
+                        let outterController: ReadableStreamDefaultController
                         res = new Response(new ReadableStream({
                             async start(controller) {
+                                outterController = controller
                                 for await (const value of asyncGenerator(chunks, matchItem.chunkInterval)) {
                                     const str = formatChunk(value, matchItem.chunkTemplate)
                                     controller.enqueue(new TextEncoder().encode(str));
                                 }
                                 controller.close();
                             },
                         }), init)
+                        init.signal?.addEventListener('abort', (event: any) => {
+                            outterController.close()
+                            throw new Error(event.target.reason)
+                        })
                     }
 
                     if (loggable) {
@@ -106,7 +120,7 @@ export function proxyFetch(options: Options) {
                     }
 
                     return res
-                }, matchItem.delay)
+                }, matchItem.delay, abortController.signal)
             }
 
             const response = __global__.PageFetch
diff --git a/src/injected/proxy/handle.ts b/src/injected/proxy/handle.ts
@@ -9,6 +9,8 @@ import { log } from "../../tools/log"
 import { parseUrl, stringifyHeaders } from "../../tools"
 import { HttpStatusCodes } from "./constants"
 import { Options, __global__, getPageXhr } from "./globalVar"
+import { ExtensionName } from "../../tools/constants"
+import { createBlockException } from "../../tools/exception"
 
 export interface ProxyXMLHttpRequest extends XMLHttpRequest {
     _async: boolean
@@ -71,11 +73,14 @@ function dispatchCustomEvent(this: ProxyXMLHttpRequest, type: string) {
 export function proxyFakeXhrInstance(this: ProxyXMLHttpRequest, options: Options) {
     const originOpen = this.open
     const originSend = this.send
+    const originAbort = this.abort
     const originSetRequestHeader = this.setRequestHeader
     const originGetResponseHeader = this.getResponseHeader
     const originGetAllResponseHeaders = this.getAllResponseHeaders
     const originOverrideMimeType = this.overrideMimeType
 
+    const controller = new AbortController()
+
     this.open = (method: string, url: string | URL, async: boolean = true) => {
         this._async = async
         this._url = url
@@ -124,16 +129,16 @@ export function proxyFakeXhrInstance(this: ProxyXMLHttpRequest, options: Options
                         url: this._url,
                     }) || matchItem.blocked
                     if (blocked) {
-                        reject(new Error('net::ERR_BLOCKED_BY_CLIENT'))
+                        reject(createBlockException())
                     } else {
-                        delayAsync(resolve, matchItem.delay)
+                        delayAsync(() => resolve(undefined), matchItem.delay, controller.signal)
                     }
                 } else {
                     const innerXhr = new PageXhr()
                     innerXhr.open(this._method, this._url, this._async)
-                    delayAsync(() => innerXhr.send(body), matchItem.delay)
+                    delayAsync(() => innerXhr.send(body), matchItem.delay, controller.signal)
                     innerXhr.onload = () => resolve(innerXhr)
-                    innerXhr.onerror = () => reject()
+                    innerXhr.onerror = reject
                 }
             })
         }
@@ -250,6 +255,15 @@ export function proxyFakeXhrInstance(this: ProxyXMLHttpRequest, options: Options
         }
         this._forceMimeType = toTitleCase(mimeType)
     }
+    this.abort = () => {
+        if (! this._matchItem) {
+            originAbort.call(this)
+            return 
+        }
+        if (this._async !== false) {
+            controller.abort()
+        }
+    }
 
     return this
 }
diff --git a/src/tools/exception.ts b/src/tools/exception.ts
@@ -0,0 +1,5 @@
+import { ExtensionName } from "./constants";
+
+export function createBlockException() {
+    return new Error('Error blocked by ' + ExtensionName)
+}
diff --git a/src/tools/index.ts b/src/tools/index.ts
@@ -10,7 +10,7 @@ export function formatChunk(chunk: string, tpl = 'data: $1\n\n') {
     return tpl.replace('$1', chunk)
 }
 
-export async function* asyncGenerator(data: unknown[], delay = 1000) {
+export async function* asyncGenerator(data: unknown[], delay = 1000, signal?: AbortSignal) {
     const list = data.map(item => typeof item !== 'string' ? JSON.stringify(item) : item)
     for (const item of list) {
         await new Promise(resolve => setTimeout(resolve, delay))
@@ -250,10 +250,20 @@ export function trimUrlParams(url: string) {
     return url.replace(/\?(.*)/, '')
 }
 
-export function delayAsync<T extends (...args: any[]) => any>(fn: T, delay: number | undefined) {
-    return new Promise<Awaited<ReturnType<T>>>(resolve => {
+export function delayAsync<T extends (signal: AbortSignal) => any>(fn: T, delay: number | undefined, signal?: AbortSignal) {
+    const controller = new AbortController()
+    const mergedSignal = signal || controller.signal
+    return new Promise<Awaited<ReturnType<T>>>((resolve, reject) => {
+        mergedSignal.addEventListener('abort', (event: any) => {
+            reject(event.target.reason)
+            return
+        })
+
         setTimeout(() => {
-            resolve(fn())
+            if (mergedSignal.aborted) {
+                return
+            }
+            resolve(fn(mergedSignal))
         }, delay)
     })
 }
