From 4b8ec6a851acc10f52d0b8c303d1213a0c685a0b Mon Sep 17 00:00:00 2001
From: weiqian93 <540518665@qq.com>
Date: Fri, 3 Jan 2020 22:52:41 +0800
Subject: [PATCH] feat: support fetch network
---
dev/data.json | 1 +
dev/index.html | 12 ++++++++
dev/index.js | 15 ++++++++++
package.json | 8 +++--
src/network/network.js | 68 ++++++++++++++++++++++++++++++++++++++++++
webpack.dev.config.js | 26 ++++++++++++++++
6 files changed, 128 insertions(+), 2 deletions(-)
create mode 100644 dev/data.json
create mode 100644 dev/index.html
create mode 100644 dev/index.js
create mode 100644 webpack.dev.config.js
diff --git a/dev/data.json b/dev/data.json
new file mode 100644
index 00000000..d1830d39
--- /dev/null
+++ b/dev/data.json
@@ -0,0 +1 @@
+{"brand":{"name":"品牌","subItems":[{"count":116,"id":-1,"name":"全部"},{"count":5,"id":24595,"name":"博纳国际影城"},{"count":3,"id":23745,"name":"中影国际影城"},{"count":2,"id":1711742,"name":"万象影城"},{"count":2,"id":24472,"name":"保利国际影城"},{"count":2,"id":292030,"name":"卢米埃影城"},{"count":1,"id":384262,"name":"大地影院"},{"count":1,"id":26214,"name":"华夏太古国际影城"},{"count":1,"id":24745,"name":"橙天嘉禾影城"},{"count":1,"id":2233611,"name":"英皇UA电影城"},{"count":1,"id":1094685,"name":"银兴电影城"},{"count":1,"id":935939,"name":"聚星国际影城"},{"count":1,"id":30032,"name":"星美国际影城"},{"count":1,"id":26417,"name":"嘉年华国际影城"},{"count":1,"id":27892,"name":"南国影城"},{"count":1,"id":602769,"name":"金球影城"},{"count":1,"id":24377,"name":"百老汇影城"},{"count":1,"id":30012,"name":"星光影城"},{"count":1,"id":26045,"name":"横店电影城"},{"count":1,"id":141951,"name":"中影UL城市影院"},{"count":1,"id":30910,"name":"中影星河电影城"},{"count":87,"id":0,"name":"其他"}]},"district":{"name":"行政区","subItems":[{"count":116,"id":-1,"name":"全部","subItems":[]},{"count":29,"id":33,"name":"龙岗区","subItems":[{"count":29,"id":-1,"name":"全部","subItems":[]},{"count":4,"id":19457,"name":"布吉街/东站/天虹","subItems":[]},{"count":4,"id":18069,"name":"大芬/南岭","subItems":[]},{"count":4,"id":37501,"name":"龙岗中心城","subItems":[]},{"count":2,"id":7663,"name":"南联","subItems":[]},{"count":2,"id":26297,"name":"天虹/坂田/杨美","subItems":[]},{"count":2,"id":26298,"name":"岗头/万科/雪象","subItems":[]},{"count":2,"id":6601,"name":"平湖","subItems":[]},{"count":1,"id":7656,"name":"横岗","subItems":[]},{"count":1,"id":13361,"name":"万科广场/世贸","subItems":[]},{"count":1,"id":9013,"name":"李朗聚星商城","subItems":[]},{"count":1,"id":8472,"name":"大运","subItems":[]},{"count":1,"id":13412,"name":"华南城/奥特莱斯","subItems":[]},{"count":1,"id":18228,"name":"双龙","subItems":[]},{"count":1,"id":753,"name":"罗岗/求水山","subItems":[]},{"count":1,"id":19456,"name":"慢城/三联","subItems":[]},{"count":1,"id":6600,"name":"五和/民营市场","subItems":[]}]},{"count":22,"id":30,"name":"南山区","subItems":[{"count":22,"id":-1,"name":"全部","subItems":[]},{"count":5,"id":1059,"name":"西丽","subItems":[]},{"count":4,"id":4811,"name":"南山中心区","subItems":[]},{"count":2,"id":6591,"name":"海岸城/保利","subItems":[]},{"count":2,"id":751,"name":"南头","subItems":[]},{"count":2,"id":1058,"name":"科技园","subItems":[]},{"count":1,"id":749,"name":"蛇口","subItems":[]},{"count":1,"id":7599,"name":"花园城","subItems":[]},{"count":1,"id":23117,"name":"世界之窗","subItems":[]},{"count":1,"id":13109,"name":"海上世界","subItems":[]},{"count":1,"id":1057,"name":"南油","subItems":[]},{"count":1,"id":6594,"name":"欢乐海岸","subItems":[]},{"count":1,"id":6592,"name":"前海","subItems":[]}]},{"count":21,"id":32,"name":"宝安区","subItems":[{"count":21,"id":-1,"name":"全部","subItems":[]},{"count":5,"id":6588,"name":"沙井","subItems":[]},{"count":3,"id":6587,"name":"西乡","subItems":[]},{"count":2,"id":6585,"name":"石岩","subItems":[]},{"count":2,"id":4653,"name":"港隆城","subItems":[]},{"count":2,"id":7684,"name":"松岗","subItems":[]},{"count":2,"id":36634,"name":"宝安机场","subItems":[]},{"count":1,"id":6589,"name":"福永","subItems":[]},{"count":1,"id":14404,"name":"时代城","subItems":[]},{"count":1,"id":752,"name":"宝安中心区","subItems":[]},{"count":1,"id":7735,"name":"固戍","subItems":[]}]},{"count":16,"id":28,"name":"福田区","subItems":[{"count":16,"id":-1,"name":"全部","subItems":[]},{"count":5,"id":7993,"name":"会展中心","subItems":[]},{"count":3,"id":741,"name":"华强北","subItems":[]},{"count":2,"id":6597,"name":"新洲/石厦","subItems":[]},{"count":1,"id":6974,"name":"竹子林","subItems":[]},{"count":1,"id":6975,"name":"市民中心","subItems":[]},{"count":1,"id":742,"name":"八卦岭/园岭","subItems":[]},{"count":1,"id":1055,"name":"上沙/下沙","subItems":[]},{"count":1,"id":756,"name":"新城市广场","subItems":[]},{"count":1,"id":6595,"name":"车公庙","subItems":[]}]},{"count":12,"id":29,"name":"罗湖区","subItems":[{"count":12,"id":-1,"name":"全部","subItems":[]},{"count":5,"id":745,"name":"东门","subItems":[]},{"count":1,"id":14095,"name":"KK mall","subItems":[]},{"count":1,"id":746,"name":"宝安南路沿线","subItems":[]},{"count":1,"id":6976,"name":"国贸","subItems":[]},{"count":1,"id":8469,"name":"黄贝岭","subItems":[]},{"count":1,"id":8471,"name":"布心/太白路","subItems":[]},{"count":1,"id":758,"name":"莲塘","subItems":[]},{"count":1,"id":6598,"name":"万象城","subItems":[]}]},{"count":10,"id":9553,"name":"龙华区","subItems":[{"count":10,"id":-1,"name":"全部","subItems":[]},{"count":4,"id":6584,"name":"民治","subItems":[]},{"count":3,"id":1061,"name":"龙华","subItems":[]},{"count":2,"id":7722,"name":"大浪","subItems":[]},{"count":1,"id":9326,"name":"梅林关","subItems":[]}]},{"count":4,"id":40033,"name":"光明区","subItems":[{"count":4,"id":-1,"name":"全部","subItems":[]},{"count":3,"id":7685,"name":"公明","subItems":[]},{"count":1,"id":17092,"name":"田寮/长圳","subItems":[]}]},{"count":2,"id":23420,"name":"坪山区","subItems":[{"count":2,"id":-1,"name":"全部","subItems":[]},{"count":2,"id":6602,"name":"坪山","subItems":[]}]}]},"hallType":{"name":"特殊厅","subItems":[{"count":0,"id":-1,"name":"全部"},{"count":0,"id":2,"name":"IMAX厅"},{"count":0,"id":3,"name":"CGS中国巨幕厅"},{"count":0,"id":9,"name":"杜比全景声厅"},{"count":0,"id":22,"name":"Dolby Cinema厅"},{"count":0,"id":10,"name":"RealD厅"},{"count":0,"id":11,"name":"RealD 6FL厅"},{"count":0,"id":5,"name":"LUXE巨幕厅"},{"count":0,"id":4,"name":"4DX厅"},{"count":0,"id":25,"name":"DTS:X 临境音厅"},{"count":0,"id":8,"name":"4K厅"},{"count":0,"id":7,"name":"4D厅"},{"count":0,"id":14,"name":"60帧厅"},{"count":0,"id":16,"name":"120帧/4K厅"},{"count":0,"id":6,"name":"巨幕厅"},{"count":0,"id":27,"name":"CINITY厅"}]},"service":{"name":"服务","subItems":[{"count":116,"id":-1,"name":"全部"},{"count":101,"id":3,"name":"可改签"},{"count":72,"id":2,"name":"可退票"}]},"showType":null,"subway":{"name":"地铁","subItems":[{"count":116,"id":-1,"name":"全部","subItems":[]},{"count":54,"id":42,"name":"1号线","subItems":[{"count":54,"id":-1,"name":"全部","subItems":[]},{"count":8,"id":717,"name":"老街","subItems":[]},{"count":6,"id":716,"name":"国贸","subItems":[]},{"count":4,"id":718,"name":"大剧院","subItems":[]},{"count":4,"id":734,"name":"大新","subItems":[]},{"count":4,"id":722,"name":"会展中心","subItems":[]},{"count":3,"id":720,"name":"华强路","subItems":[]},{"count":3,"id":721,"name":"岗厦","subItems":[]},{"count":3,"id":723,"name":"购物公园","subItems":[]},{"count":2,"id":741,"name":"西乡","subItems":[]},{"count":2,"id":740,"name":"坪洲","subItems":[]},{"count":1,"id":739,"name":"宝体","subItems":[]},{"count":1,"id":738,"name":"宝安中心","subItems":[]},{"count":1,"id":736,"name":"前海湾","subItems":[]},{"count":1,"id":743,"name":"后瑞","subItems":[]},{"count":1,"id":742,"name":"固戍","subItems":[]},{"count":1,"id":715,"name":"罗湖","subItems":[]},{"count":1,"id":719,"name":"科学馆","subItems":[]},{"count":1,"id":729,"name":"世界之窗","subItems":[]},{"count":1,"id":730,"name":"白石洲","subItems":[]},{"count":1,"id":731,"name":"高新园","subItems":[]},{"count":1,"id":732,"name":"深大","subItems":[]},{"count":1,"id":733,"name":"桃园","subItems":[]},{"count":1,"id":735,"name":"鲤鱼门","subItems":[]},{"count":1,"id":725,"name":"车公庙","subItems":[]},{"count":1,"id":726,"name":"竹子林","subItems":[]}]},{"count":33,"id":43,"name":"2号线","subItems":[{"count":33,"id":-1,"name":"全部","subItems":[]},{"count":6,"id":771,"name":"湖贝","subItems":[]},{"count":4,"id":770,"name":"大剧院","subItems":[]},{"count":3,"id":768,"name":"华强北","subItems":[]},{"count":3,"id":766,"name":"市民中心","subItems":[]},{"count":3,"id":765,"name":"福田","subItems":[]},{"count":2,"id":769,"name":"燕南","subItems":[]},{"count":2,"id":752,"name":"登良","subItems":[]},{"count":1,"id":772,"name":"黄贝岭","subItems":[]},{"count":1,"id":747,"name":"海上世界","subItems":[]},{"count":1,"id":751,"name":"海月","subItems":[]},{"count":1,"id":748,"name":"水湾","subItems":[]},{"count":1,"id":760,"name":"侨香","subItems":[]},{"count":1,"id":767,"name":"岗厦北","subItems":[]},{"count":1,"id":764,"name":"莲花西","subItems":[]},{"count":1,"id":753,"name":"后海","subItems":[]},{"count":1,"id":759,"name":"安托山","subItems":[]},{"count":1,"id":756,"name":"世界之窗","subItems":[]}]},{"count":48,"id":45,"name":"3号线","subItems":[{"count":48,"id":-1,"name":"全部","subItems":[]},{"count":7,"id":798,"name":"老街","subItems":[]},{"count":5,"id":799,"name":"晒布","subItems":[]},{"count":3,"id":805,"name":"木棉湾","subItems":[]},{"count":3,"id":791,"name":"购物公园","subItems":[]},{"count":3,"id":797,"name":"红岭","subItems":[]},{"count":3,"id":795,"name":"华新","subItems":[]},{"count":3,"id":792,"name":"福田","subItems":[]},{"count":2,"id":817,"name":"南联","subItems":[]},{"count":2,"id":804,"name":"布吉","subItems":[]},{"count":2,"id":806,"name":"大芬","subItems":[]},{"count":2,"id":790,"name":"石厦","subItems":[]},{"count":2,"id":789,"name":"益田","subItems":[]},{"count":1,"id":816,"name":"龙城广场","subItems":[]},{"count":1,"id":818,"name":"双龙","subItems":[]},{"count":1,"id":807,"name":"丹竹头","subItems":[]},{"count":1,"id":801,"name":"田贝","subItems":[]},{"count":1,"id":802,"name":"水贝","subItems":[]},{"count":1,"id":813,"name":"大运","subItems":[]},{"count":1,"id":814,"name":"爱联","subItems":[]},{"count":1,"id":815,"name":"吉祥","subItems":[]},{"count":1,"id":810,"name":"横岗","subItems":[]},{"count":1,"id":794,"name":"莲花村","subItems":[]},{"count":1,"id":793,"name":"少年宫","subItems":[]}]},{"count":16,"id":44,"name":"4号线","subItems":[{"count":16,"id":-1,"name":"全部","subItems":[]},{"count":4,"id":776,"name":"会展中心","subItems":[]},{"count":3,"id":781,"name":"民乐","subItems":[]},{"count":3,"id":777,"name":"市民中心","subItems":[]},{"count":2,"id":782,"name":"白石龙","subItems":[]},{"count":1,"id":788,"name":"清湖","subItems":[]},{"count":1,"id":787,"name":"龙华","subItems":[]},{"count":1,"id":775,"name":"福民","subItems":[]},{"count":1,"id":778,"name":"少年宫","subItems":[]}]},{"count":23,"id":150,"name":"7号线","subItems":[{"count":23,"id":-1,"name":"全部","subItems":[]},{"count":3,"id":4096,"name":"华强北","subItems":[]},{"count":3,"id":4110,"name":"华新","subItems":[]},{"count":2,"id":4094,"name":"石厦","subItems":[]},{"count":2,"id":4108,"name":"华强南","subItems":[]},{"count":1,"id":4092,"name":"沙尾","subItems":[]},{"count":1,"id":4093,"name":"黄木岗","subItems":[]},{"count":1,"id":4095,"name":"车公庙","subItems":[]},{"count":1,"id":4097,"name":"田贝","subItems":[]},{"count":1,"id":4099,"name":"洪湖","subItems":[]},{"count":1,"id":4104,"name":"西丽","subItems":[]},{"count":1,"id":4106,"name":"上沙","subItems":[]},{"count":1,"id":4111,"name":"红岭北","subItems":[]},{"count":1,"id":4112,"name":"福民","subItems":[]},{"count":1,"id":4113,"name":"农林","subItems":[]},{"count":1,"id":4114,"name":"龙井","subItems":[]},{"count":1,"id":4116,"name":"安托山","subItems":[]},{"count":1,"id":4119,"name":"皇岗村","subItems":[]}]},{"count":21,"id":151,"name":"9号线","subItems":[{"count":21,"id":-1,"name":"全部","subItems":[]},{"count":3,"id":4130,"name":"向西村","subItems":[]},{"count":3,"id":4135,"name":"人民南","subItems":[]},{"count":3,"id":4136,"name":"红岭南","subItems":[]},{"count":3,"id":4121,"name":"红岭","subItems":[]},{"count":2,"id":4128,"name":"园岭","subItems":[]},{"count":2,"id":4125,"name":"鹿丹村","subItems":[]},{"count":1,"id":4129,"name":"下沙","subItems":[]},{"count":1,"id":4139,"name":"文锦","subItems":[]},{"count":1,"id":4137,"name":"车公庙","subItems":[]},{"count":1,"id":4120,"name":"深圳湾公园","subItems":[]},{"count":1,"id":4126,"name":"红岭北","subItems":[]}]},{"count":15,"id":152,"name":"11号线","subItems":[{"count":15,"id":-1,"name":"全部","subItems":[]},{"count":4,"id":4147,"name":"福田","subItems":[]},{"count":2,"id":4142,"name":"碧海湾","subItems":[]},{"count":2,"id":4149,"name":"南山","subItems":[]},{"count":2,"id":4156,"name":"沙井","subItems":[]},{"count":1,"id":4146,"name":"福永","subItems":[]},{"count":1,"id":4144,"name":"前海湾","subItems":[]},{"count":1,"id":4150,"name":"松岗","subItems":[]},{"count":1,"id":4158,"name":"后海","subItems":[]},{"count":1,"id":4157,"name":"车公庙","subItems":[]}]},{"count":18,"id":41,"name":"环中线","subItems":[{"count":18,"id":-1,"name":"全部","subItems":[]},{"count":2,"id":703,"name":"五和","subItems":[]},{"count":2,"id":696,"name":"留仙洞","subItems":[]},{"count":2,"id":709,"name":"布吉","subItems":[]},{"count":1,"id":702,"name":"民治","subItems":[]},{"count":1,"id":698,"name":"大学城","subItems":[]},{"count":1,"id":699,"name":"塘朗","subItems":[]},{"count":1,"id":697,"name":"西丽","subItems":[]},{"count":1,"id":692,"name":"翻身","subItems":[]},{"count":1,"id":691,"name":"宝安中心","subItems":[]},{"count":1,"id":688,"name":"前海湾","subItems":[]},{"count":1,"id":713,"name":"怡景","subItems":[]},{"count":1,"id":714,"name":"黄贝岭","subItems":[]},{"count":1,"id":707,"name":"下水径","subItems":[]},{"count":1,"id":706,"name":"上水径","subItems":[]},{"count":1,"id":710,"name":"百鸽笼","subItems":[]}]}]},"timeRanges":{"name":"时段","subItems":[{"count":0,"id":100000000,"name":"不限时段"},{"count":0,"id":100000900,"name":"9点以前"},{"count":0,"id":109001100,"name":"9-11点"},{"count":0,"id":111001300,"name":"11-13点"},{"count":0,"id":113001500,"name":"13-15点"},{"count":0,"id":115001700,"name":"15-17点"},{"count":0,"id":117001900,"name":"17-19点"},{"count":0,"id":119002100,"name":"19-21点"},{"count":0,"id":121002300,"name":"21-23点"},{"count":0,"id":123002359,"name":"23点以后"}]}}
\ No newline at end of file
diff --git a/dev/index.html b/dev/index.html
new file mode 100644
index 00000000..b3d1dc43
--- /dev/null
+++ b/dev/index.html
@@ -0,0 +1,12 @@
+
+
+
+
+
+
+ Document
+
+
+ vconsole development mode
+
+
\ No newline at end of file
diff --git a/dev/index.js b/dev/index.js
new file mode 100644
index 00000000..d51fcd89
--- /dev/null
+++ b/dev/index.js
@@ -0,0 +1,15 @@
+// index.js
+const VConsole = require('../src/vconsole')
+
+const vc = new VConsole()
+
+console.log(vc)
+console.log('start test mock vconsole')
+
+window.fetch('http://localhost:8080/dev/data.json?fetch=test',{method:'GET'}).then(data => {
+ console.log('use fetch response data: ', data)
+})
+
+const xhr = new XMLHttpRequest()
+xhr.open('get','http://localhost:8080/dev/data.json?xhr=ajax')
+xhr.send()
\ No newline at end of file
diff --git a/package.json b/package.json
index 38395507..596c921d 100644
--- a/package.json
+++ b/package.json
@@ -7,7 +7,8 @@
"typings": "dist/vconsole.min.d.ts",
"scripts": {
"test": "mocha",
- "build": "webpack"
+ "build": "webpack",
+ "dev": "webpack-dev-server --config webpack.dev.config"
},
"keywords": [
"console",
@@ -34,6 +35,7 @@
"copy-webpack-plugin": "^5.0.4",
"css-loader": "^3.2.0",
"html-loader": "^0.5.5",
+ "html-webpack-plugin": "^3.2.0",
"jsdom": "^15.1.1",
"json-loader": "^0.5.7",
"less": "^3.10.3",
@@ -41,7 +43,9 @@
"mocha": "^5.2.0",
"style-loader": "^1.0.0",
"webpack": "^4.41.0",
- "webpack-cli": "^3.3.9"
+ "webpack-cli": "^3.3.9",
+ "webpack-dev-server": "^3.10.1",
+ "webpack-merge": "^4.2.2"
},
"author": "Tencent",
"license": "MIT"
diff --git a/src/network/network.js b/src/network/network.js
index ea1ce1e4..f2488489 100644
--- a/src/network/network.js
+++ b/src/network/network.js
@@ -36,6 +36,7 @@ class VConsoleNetworkTab extends VConsolePlugin {
this._send = undefined;
this.mockAjax();
+ this.mockFetch();
}
onRenderTab(callback) {
@@ -397,6 +398,73 @@ class VConsoleNetworkTab extends VConsolePlugin {
};
};
+
+ /**
+ * mock fetch request
+ * @private
+ */
+ mockFetch() {
+ let _fetch = window.fetch;
+ if(!_fetch){ return; }
+ let that = this;
+
+ let prevFetch = (url,init) => {
+ let id = that.getUniqueID()
+ that.reqList[id] = {}
+ let item = that.reqList[id] || {};
+ let query = url.split('?');
+ item.id = id;
+ item.method = init.method||'GET';
+ item.url = query.shift();
+
+ if (query.length > 0) {
+ item.getData = {};
+ query = query.join('?'); // => 'b=c&d=?e'
+ query = query.split('&'); // => ['b=c', 'd=?e']
+ for (let q of query) {
+ q = q.split('=');
+ item.getData[ q[0] ] = q[1];
+ }
+ }
+
+ if (item.method == 'POST') {
+ // save POST data
+ if (tool.isString(data)) {
+ let arr = data.split('&');
+ item.postData = {};
+ for (let q of arr) {
+ q = q.split('=');
+ item.postData[ q[0] ] = q[1];
+ }
+ } else if (tool.isPlainObject(data)) {
+ item.postData = data;
+ }
+ }
+ // UNSENT
+ if (!item.startTime) {
+ item.startTime = (+new Date());
+ }
+ return _fetch(url,init).then(response => {
+ response.clone().json().then(json => {
+ item.endTime = +new Date(),
+ item.costTime = item.endTime - (item.startTime || item.endTime);
+ item.status = response.status;
+ item.header = {}
+ for (let pair of response.headers.entries()) {
+ item.header[pair[0]] = pair[1]
+ }
+ item.response = json;
+ item.readyState = 4
+ const contentType = response.headers.get('content-type')
+ item.responseType = contentType.includes('application/json')? 'json' : contentType.includes('text/html') ? 'text': ''
+ return json
+ })
+ that.updateRequest(id, item)
+ return response
+ })
+ }
+ window.fetch = prevFetch
+ }
/**
* generate an unique id string (32)
diff --git a/webpack.dev.config.js b/webpack.dev.config.js
new file mode 100644
index 00000000..0c6342bf
--- /dev/null
+++ b/webpack.dev.config.js
@@ -0,0 +1,26 @@
+var webpack = require('webpack')
+var merge = require('webpack-merge')
+var HtmlWebpackPlugin = require('html-webpack-plugin')
+var baseConfig = require('./webpack.config.js')
+
+module.exports = merge(baseConfig, {
+ mode: 'development',
+ entry: './dev/index.js',
+ devServer: {
+ historyApiFallback: true,
+ noInfo: true,
+ overlay: true,
+ open: true,
+ hot: true,
+ inline: true
+ },
+ devtool: '#eval-source-map',
+ plugins: [
+ new HtmlWebpackPlugin({
+ template: './dev/index.html',
+ filename: 'index.html',
+ inject: true
+ }),
+ new webpack.HotModuleReplacementPlugin()
+ ]
+})
\ No newline at end of file