Merge pull request #520 from Tencent/dev

v3.14.1
Tencent · Mar 24, 2022 · 8991654 · 8991654
2 parents 802b35f + 442b243
commit 8991654
Show file tree

Hide file tree

Showing 8 changed files with 86 additions and 74 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,10 @@
 English | [简体中文](./CHANGELOG_CN.md)
 
+## 3.14.1 (2022-03-24)
+
+- `Fix(Network)` Fix `responseSize` error when `readyState === 3`.
+
+
 ## 3.14.0 (2022-03-23)
 
 - `Feat(Core)` Add new option `pluginOrder` to adjust the order of built-in and custom plugins, see [Public Properties & Methods](./doc/public_properties_methods.md).

diff --git a/CHANGELOG_CN.md b/CHANGELOG_CN.md
@@ -1,5 +1,10 @@
 [English](./CHANGELOG.md) | 简体中文
 
+## 3.14.1 (2022-03-24)
+
+- `Fix(Network)` 修复当 `readyState === 3` 时的 `responseSize` 错误。
+
+
 ## 3.14.0 (2022-03-23)
 
 - `Feat(Core)` 新增配置项 `pluginOrder` 来调整插件面板的排序，见 [公共属性及方法](./doc/public_properties_methods_CN.md)。

diff --git a/README.md b/README.md
@@ -38,7 +38,7 @@ See [Tutorial](./doc/tutorial.md) for more usage details.
 
 For installation, there are 2 primary ways of adding vConsole to a project:
 
-#### Method 1: Using npm (Recommanded)
+#### Method 1: Using npm (Suggested)
 
 ```bash
 $ npm install vconsole

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vconsole",
-  "version": "3.14.0",
+  "version": "3.14.1",
   "description": "A lightweight, extendable front-end developer tool for mobile web page.",
   "homepage": "https://github.com/Tencent/vConsole",
   "files": [

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,71 +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';
-      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 (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 {