Refactor(Network): Optimize code structure.

Tencent · Mar 24, 2022 · 442b243 · 442b243
1 parent f7b913a
commit 442b243
Show file tree

Hide file tree

Showing 4 changed files with 74 additions and 74 deletions.
diff --git a/src/network/beacon.proxy.ts b/src/network/beacon.proxy.ts
@@ -1,8 +1,7 @@
 
 import * as Helper from './helper';
 import { VConsoleNetworkRequestItem } from './requestItem';
-
-type IOnUpdateCallback = (item: VConsoleNetworkRequestItem) => void;
+import type { IOnUpdateCallback } from './helper';
 
 // https://fetch.spec.whatwg.org/#concept-bodyinit-extract
 const getContentType = (data?: BodyInit) => {

diff --git a/src/network/fetch.proxy.ts b/src/network/fetch.proxy.ts
@@ -2,8 +2,7 @@ import * as tool from '../lib/tool';
 import * as Helper from './helper';
 import { VConsoleNetworkRequestItem } from './requestItem';
 import type { VConsoleRequestMethod } from './requestItem';
-
-type IOnUpdateCallback = (item: VConsoleNetworkRequestItem) => void;
+import type { IOnUpdateCallback } from './helper';
 
 export class ResponseProxyHandler<T extends Response> implements ProxyHandler<T> {
   public resp: Response;

diff --git a/src/network/helper.ts b/src/network/helper.ts
@@ -1,6 +1,8 @@
 import * as tool from '../lib/tool';
 import type { VConsoleNetworkRequestItem } from './requestItem';
 
+export type IOnUpdateCallback = (item: VConsoleNetworkRequestItem) => void;
+
 /**
  * Generate `getData` by url. 
  */
@@ -65,73 +67,6 @@ export const genResonseByResponseType = (responseType: string, response: any) =>
   return ret;
 };
 
-/**
- * Update item's properties according to readyState.
- */
-export const updateItemByReadyState = (item: VConsoleNetworkRequestItem, XMLReq: XMLHttpRequest) => {
-  switch (XMLReq.readyState) {
-    case 0: // UNSENT
-      item.status = 0;
-      item.statusText = 'Pending';
-      if (!item.startTime) {
-        item.startTime = (+new Date());
-      }
-      break;
-
-    case 1: // OPENED
-      item.status = 0;
-      item.statusText = 'Pending';
-      if (!item.startTime) {
-        item.startTime = (+new Date());
-      }
-      break;
-
-    case 2: // HEADERS_RECEIVED
-      item.status = XMLReq.status;
-      item.statusText = 'Loading';
-      item.header = {};
-      const header = XMLReq.getAllResponseHeaders() || '',
-            headerArr = header.split('\n');
-      // extract plain text to key-value format
-      for (let i = 0; i < headerArr.length; i++) {
-        const line = headerArr[i];
-        if (!line) { continue; }
-        const arr = line.split(': ');
-        const key = arr[0],
-              value = arr.slice(1).join(': ');
-        item.header[key] = value;
-      }
-      break;
-
-    case 3: // LOADING
-      item.status = XMLReq.status;
-      item.statusText = 'Loading';
-      if (typeof XMLReq.response === 'object' && XMLReq.response.length) {
-        item.responseSize = XMLReq.response.length;
-        item.responseSizeText = tool.getBytesText(item.responseSize);
-      }
-      break;
-
-    case 4: // DONE
-      // `XMLReq.abort()` will change `status` from 200 to 0, so use previous value in this case
-      item.status = XMLReq.status || item.status || 0;
-      item.statusText = String(item.status); // show status code when request completed
-      item.endTime = Date.now(),
-      item.costTime = item.endTime - (item.startTime || item.endTime);
-      item.response = XMLReq.response;
-      if (typeof XMLReq.response === 'object' && XMLReq.response.length) {
-        item.responseSize = XMLReq.response.length;
-        item.responseSizeText = tool.getBytesText(item.responseSize);
-      }
-      break;
-
-    default:
-      item.status = XMLReq.status;
-      item.statusText = 'Unknown';
-      break;
-  }
-};
-
 /**
  * Generate formatted response body by XMLHttpRequestBodyInit.
  */

diff --git a/src/network/xhr.proxy.ts b/src/network/xhr.proxy.ts
@@ -1,7 +1,7 @@
+import { getBytesText } from '../lib/tool';
 import * as Helper from './helper';
 import { VConsoleNetworkRequestItem } from './requestItem';
-
-type IOnUpdateCallback = (item: VConsoleNetworkRequestItem) => void;
+import type { IOnUpdateCallback } from './helper';
 
 export class XHRProxyHandler<T extends XMLHttpRequest> implements ProxyHandler<T> {
   public XMLReq: XMLHttpRequest;
@@ -68,7 +68,7 @@ export class XHRProxyHandler<T extends XMLHttpRequest> implements ProxyHandler<T
     this.item.costTime = this.item.endTime - this.item.startTime;
 
     // update data by readyState
-    Helper.updateItemByReadyState(this.item, this.XMLReq);
+    this.updateItemByReadyState();
 
     // update response by responseType
     this.item.response = Helper.genResonseByResponseType(this.item.responseType, this.item.response);
@@ -139,6 +139,73 @@ export class XHRProxyHandler<T extends XMLHttpRequest> implements ProxyHandler<T
       value.apply(target, args);
     });
   }
+
+  /**
+   * Update item's properties according to readyState.
+   */
+  protected updateItemByReadyState() {
+    switch (this.XMLReq.readyState) {
+      case 0: // UNSENT
+        this.item.status = 0;
+        this.item.statusText = 'Pending';
+        if (!this.item.startTime) {
+          this.item.startTime = Date.now();
+        }
+        break;
+
+      case 1: // OPENED
+        this.item.status = 0;
+        this.item.statusText = 'Pending';
+        if (!this.item.startTime) {
+          this.item.startTime = Date.now();
+        }
+        break;
+
+      case 2: // HEADERS_RECEIVED
+        this.item.status = this.XMLReq.status;
+        this.item.statusText = 'Loading';
+        this.item.header = {};
+        const header = this.XMLReq.getAllResponseHeaders() || '',
+              headerArr = header.split('\n');
+        // extract plain text to key-value format
+        for (let i = 0; i < headerArr.length; i++) {
+          const line = headerArr[i];
+          if (!line) { continue; }
+          const arr = line.split(': ');
+          const key = arr[0];
+          const value = arr.slice(1).join(': ');
+          this.item.header[key] = value;
+        }
+        break;
+
+      case 3: // LOADING
+        this.item.status = this.XMLReq.status;
+        this.item.statusText = 'Loading';
+        if (typeof this.XMLReq.response === 'object' && this.XMLReq.response.length) {
+          this.item.responseSize = this.XMLReq.response.length;
+          this.item.responseSizeText = getBytesText(this.item.responseSize);
+        }
+        break;
+
+      case 4: // DONE
+        // `XMLReq.abort()` will change `status` from 200 to 0, so use previous value in this case
+        this.item.status = this.XMLReq.status || this.item.status || 0;
+        this.item.statusText = String(this.item.status); // show status code when request completed
+        this.item.endTime = Date.now(),
+        this.item.costTime = this.item.endTime - (this.item.startTime || this.item.endTime);
+        this.item.response = this.XMLReq.response;
+        if (typeof this.XMLReq.response === 'object' && this.XMLReq.response.length) {
+          this.item.responseSize = this.XMLReq.response.length;
+          this.item.responseSizeText = getBytesText(this.item.responseSize);
+        }
+        break;
+
+      default:
+        this.item.status = this.XMLReq.status;
+        this.item.statusText = 'Unknown';
+        break;
+    }
+  }
 }
 
 export class XHRProxy {