Skip to content

Commit 8991654

Browse files
MaizifyMaizify
authored
Merge pull request #520 from Tencent/dev
v3.14.1
2 parents 802b35f + 442b243 commit 8991654

8 files changed

Lines changed: 86 additions & 74 deletions

File tree

‎CHANGELOG.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
11
English | [简体中文](./CHANGELOG_CN.md)
22

3+
## 3.14.1 (2022-03-24)
4+
5+
- `Fix(Network)` Fix `responseSize` error when `readyState === 3`.
6+
7+
38
## 3.14.0 (2022-03-23)
49

510
- `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).

‎CHANGELOG_CN.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
11
[English](./CHANGELOG.md) | 简体中文
22

3+
## 3.14.1 (2022-03-24)
4+
5+
- `Fix(Network)` 修复当 `readyState === 3` 时的 `responseSize` 错误。
6+
7+
38
## 3.14.0 (2022-03-23)
49

510
- `Feat(Core)` 新增配置项 `pluginOrder` 来调整插件面板的排序，见 [公共属性及方法](./doc/public_properties_methods_CN.md)。

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ See [Tutorial](./doc/tutorial.md) for more usage details.
3838

3939
For installation, there are 2 primary ways of adding vConsole to a project:
4040

41-
#### Method 1: Using npm (Recommanded)
41+
#### Method 1: Using npm (Suggested)
4242

4343
```bash
4444
$ npm install vconsole

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "vconsole",
3-
"version": "3.14.0",
3+
"version": "3.14.1",
44
"description": "A lightweight, extendable front-end developer tool for mobile web page.",
55
"homepage": "https://github.com/Tencent/vConsole",
66
"files": [

‎src/network/beacon.proxy.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11

22
import * as Helper from './helper';
33
import { VConsoleNetworkRequestItem } from './requestItem';
4-
5-
type IOnUpdateCallback = (item: VConsoleNetworkRequestItem) => void;
4+
import type { IOnUpdateCallback } from './helper';
65

76
// https://fetch.spec.whatwg.org/#concept-bodyinit-extract
87
const getContentType = (data?: BodyInit) => {

‎src/network/fetch.proxy.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,7 @@ import * as tool from '../lib/tool';
22
import * as Helper from './helper';
33
import { VConsoleNetworkRequestItem } from './requestItem';
44
import type { VConsoleRequestMethod } from './requestItem';
5-
6-
type IOnUpdateCallback = (item: VConsoleNetworkRequestItem) => void;
5+
import type { IOnUpdateCallback } from './helper';
76

87
export class ResponseProxyHandler<T extends Response> implements ProxyHandler<T> {
98
public resp: Response;

‎src/network/helper.ts‎

Lines changed: 2 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import * as tool from '../lib/tool';
22
import type { VConsoleNetworkRequestItem } from './requestItem';
33

4+
export type IOnUpdateCallback = (item: VConsoleNetworkRequestItem) => void;
5+
46
/**
57
* Generate `getData` by url.
68
*/
@@ -65,71 +67,6 @@ export const genResonseByResponseType = (responseType: string, response: any) =>
6567
return ret;
6668
};
6769

68-
/**
69-
* Update item's properties according to readyState.
70-
*/
71-
export const updateItemByReadyState = (item: VConsoleNetworkRequestItem, XMLReq: XMLHttpRequest) => {
72-
switch (XMLReq.readyState) {
73-
case 0: // UNSENT
74-
item.status = 0;
75-
item.statusText = 'Pending';
76-
if (!item.startTime) {
77-
item.startTime = (+new Date());
78-
}
79-
break;
80-
81-
case 1: // OPENED
82-
item.status = 0;
83-
item.statusText = 'Pending';
84-
if (!item.startTime) {
85-
item.startTime = (+new Date());
86-
}
87-
break;
88-
89-
case 2: // HEADERS_RECEIVED
90-
item.status = XMLReq.status;
91-
item.statusText = 'Loading';
92-
item.header = {};
93-
const header = XMLReq.getAllResponseHeaders() || '',
94-
headerArr = header.split('\n');
95-
// extract plain text to key-value format
96-
for (let i = 0; i < headerArr.length; i++) {
97-
const line = headerArr[i];
98-
if (!line) { continue; }
99-
const arr = line.split(': ');
100-
const key = arr[0],
101-
value = arr.slice(1).join(': ');
102-
item.header[key] = value;
103-
}
104-
break;
105-
106-
case 3: // LOADING
107-
item.status = XMLReq.status;
108-
item.statusText = 'Loading';
109-
item.responseSize = XMLReq.response.length;
110-
item.responseSizeText = tool.getBytesText(item.responseSize);
111-
break;
112-
113-
case 4: // DONE
114-
// `XMLReq.abort()` will change `status` from 200 to 0, so use previous value in this case
115-
item.status = XMLReq.status || item.status || 0;
116-
item.statusText = String(item.status); // show status code when request completed
117-
item.endTime = Date.now(),
118-
item.costTime = item.endTime - (item.startTime || item.endTime);
119-
item.response = XMLReq.response;
120-
if (XMLReq.response.length) {
121-
item.responseSize = XMLReq.response.length;
122-
item.responseSizeText = tool.getBytesText(item.responseSize);
123-
}
124-
break;
125-
126-
default:
127-
item.status = XMLReq.status;
128-
item.statusText = 'Unknown';
129-
break;
130-
}
131-
};
132-
13370
/**
13471
* Generate formatted response body by XMLHttpRequestBodyInit.
13572
*/

‎src/network/xhr.proxy.ts‎

Lines changed: 70 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1+
import { getBytesText } from '../lib/tool';
12
import * as Helper from './helper';
23
import { VConsoleNetworkRequestItem } from './requestItem';
3-
4-
type IOnUpdateCallback = (item: VConsoleNetworkRequestItem) => void;
4+
import type { IOnUpdateCallback } from './helper';
55

66
export class XHRProxyHandler<T extends XMLHttpRequest> implements ProxyHandler<T> {
77
public XMLReq: XMLHttpRequest;
@@ -68,7 +68,7 @@ export class XHRProxyHandler<T extends XMLHttpRequest> implements ProxyHandler<T
6868
this.item.costTime = this.item.endTime - this.item.startTime;
6969

7070
// update data by readyState
71-
Helper.updateItemByReadyState(this.item, this.XMLReq);
71+
this.updateItemByReadyState();
7272

7373
// update response by responseType
7474
this.item.response = Helper.genResonseByResponseType(this.item.responseType, this.item.response);
@@ -139,6 +139,73 @@ export class XHRProxyHandler<T extends XMLHttpRequest> implements ProxyHandler<T
139139
value.apply(target, args);
140140
});
141141
}
142+
143+
/**
144+
* Update item's properties according to readyState.
145+
*/
146+
protected updateItemByReadyState() {
147+
switch (this.XMLReq.readyState) {
148+
case 0: // UNSENT
149+
this.item.status = 0;
150+
this.item.statusText = 'Pending';
151+
if (!this.item.startTime) {
152+
this.item.startTime = Date.now();
153+
}
154+
break;
155+
156+
case 1: // OPENED
157+
this.item.status = 0;
158+
this.item.statusText = 'Pending';
159+
if (!this.item.startTime) {
160+
this.item.startTime = Date.now();
161+
}
162+
break;
163+
164+
case 2: // HEADERS_RECEIVED
165+
this.item.status = this.XMLReq.status;
166+
this.item.statusText = 'Loading';
167+
this.item.header = {};
168+
const header = this.XMLReq.getAllResponseHeaders() || '',
169+
headerArr = header.split('\n');
170+
// extract plain text to key-value format
171+
for (let i = 0; i < headerArr.length; i++) {
172+
const line = headerArr[i];
173+
if (!line) { continue; }
174+
const arr = line.split(': ');
175+
const key = arr[0];
176+
const value = arr.slice(1).join(': ');
177+
this.item.header[key] = value;
178+
}
179+
break;
180+
181+
case 3: // LOADING
182+
this.item.status = this.XMLReq.status;
183+
this.item.statusText = 'Loading';
184+
if (typeof this.XMLReq.response === 'object' && this.XMLReq.response.length) {
185+
this.item.responseSize = this.XMLReq.response.length;
186+
this.item.responseSizeText = getBytesText(this.item.responseSize);
187+
}
188+
break;
189+
190+
case 4: // DONE
191+
// `XMLReq.abort()` will change `status` from 200 to 0, so use previous value in this case
192+
this.item.status = this.XMLReq.status || this.item.status || 0;
193+
this.item.statusText = String(this.item.status); // show status code when request completed
194+
this.item.endTime = Date.now(),
195+
this.item.costTime = this.item.endTime - (this.item.startTime || this.item.endTime);
196+
this.item.response = this.XMLReq.response;
197+
if (typeof this.XMLReq.response === 'object' && this.XMLReq.response.length) {
198+
this.item.responseSize = this.XMLReq.response.length;
199+
this.item.responseSizeText = getBytesText(this.item.responseSize);
200+
}
201+
break;
202+
203+
default:
204+
this.item.status = this.XMLReq.status;
205+
this.item.statusText = 'Unknown';
206+
break;
207+
}
208+
}
142209
}
143210

144211
export class XHRProxy {

0 commit comments

Comments
 (0)