diff --git a/CHANGELOG.md b/CHANGELOG.md index 918e17c1..f5e56f7a 100644 --- 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 index 7569ed31..e3090a5a 100644 --- 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 index 4019f9be..9f15a764 100644 --- 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 index c9678eb9..b4192475 100644 --- 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 index feca0bf6..afd3b22b 100644 --- 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 index 0004ac5a..4c61d21d 100644 --- 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 implements ProxyHandler { public resp: Response; diff --git a/src/network/helper.ts b/src/network/helper.ts index 55bcd515..1d11a586 100644 --- 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 index 1830dab4..59dfb9d6 100644 --- 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 implements ProxyHandler { public XMLReq: XMLHttpRequest; @@ -68,7 +68,7 @@ export class XHRProxyHandler implements ProxyHandler implements ProxyHandler