Merge pull request #241 from galacean/feat/support-request-stats

Fix Cancel request auto hook
galacean · Dec 14, 2023 · 6f4df38 · 6f4df38
2 parents 23f1438 + e7f541e
commit 6f4df38
Showing 1 changed file with 55 additions and 49 deletions.
diff --git a/packages/stats/src/hooks/RequestHook.ts b/packages/stats/src/hooks/RequestHook.ts
@@ -1,58 +1,63 @@
+
 let requestSize = 0;
 
-let originalSend = XMLHttpRequest.prototype.send;
+function hookRequest() {
 
-const cacheMap = new Map<string, number>();
-function addRequestSize(url: string, size: number) {
-  if (cacheMap.get(url) == undefined) {
-    cacheMap.set(url, size);
-    console.log(`request(${size}): ${url}`);
-    requestSize += size;
+  let originalSend = XMLHttpRequest.prototype.send;
+
+  const cacheMap = new Map<string, number>();
+  function addRequestSize(url: string, size: number) {
+    if (cacheMap.get(url) == undefined) {
+      cacheMap.set(url, size);
+      console.log(`request(${size}): ${url}`);
+      requestSize += size;
+    }
   }
+
+  XMLHttpRequest.prototype.send = function (body) {
+    this.addEventListener(
+      "load",
+      function () {
+        let size = 0;
+        if (this.responseType === "" || this.responseType === "text") {
+          size = new Blob([JSON.stringify(this.responseText)]).size;
+        } else if (this.response instanceof Blob) {
+          size = this.response.size;
+        } else if (this.response instanceof ArrayBuffer) {
+          size = this.response.byteLength;
+        } else if (this.responseType === "json") {
+          size = new Blob([JSON.stringify(this.response)]).size;
+        }
+
+        addRequestSize((this as XMLHttpRequest).responseURL, size);
+      },
+      false
+    );
+
+    originalSend.call(this, body);
+
+    var originalImageSrc = Object.getOwnPropertyDescriptor(
+      Image.prototype,
+      "src"
+    ).set;
+
+    this.originalImageSrc = originalImageSrc;
+
+    Object.defineProperty(Image.prototype, "src", {
+      set: function (value) {
+        fetch(value).then((response) => {
+          if (response.ok) {
+            response.blob().then((blob) => {
+              addRequestSize((this as XMLHttpRequest).responseURL, blob.size);
+            });
+          }
+        });
+        originalImageSrc.call(this, value);
+      },
+    });
+  };
 }
 
-XMLHttpRequest.prototype.send = function (body) {
-  this.addEventListener(
-    "load",
-    function () {
-      let size = 0;
-      if (this.responseType === "" || this.responseType === "text") {
-        size = new Blob([JSON.stringify(this.responseText)]).size;
-      } else if (this.response instanceof Blob) {
-        size = this.response.size;
-      } else if (this.response instanceof ArrayBuffer) {
-        size = this.response.byteLength;
-      } else if (this.responseType === "json") {
-        size = new Blob([JSON.stringify(this.response)]).size;
-      }
-
-      addRequestSize((this as XMLHttpRequest).responseURL, size);
-    },
-    false
-  );
-
-  originalSend.call(this, body);
-
-  var originalImageSrc = Object.getOwnPropertyDescriptor(
-    Image.prototype,
-    "src"
-  ).set;
-
-  this.originalImageSrc = originalImageSrc;
-
-  Object.defineProperty(Image.prototype, "src", {
-    set: function (value) {
-      fetch(value).then((response) => {
-        if (response.ok) {
-          response.blob().then((blob) => {
-            addRequestSize((this as XMLHttpRequest).responseURL, blob.size);
-          });
-        }
-      });
-      originalImageSrc.call(this, value);
-    },
-  });
-};
 
 export class RequestHook {
   private _originalSend;
@@ -64,6 +69,7 @@ export class RequestHook {
 
   constructor() {
     this._hooked = true;
+    hookRequest();
   }
 
   public reset(): void {