feat: support fetch network

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点以后"}]}}

dev/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>Document</title>
+</head>
+<body>
+   <h1>vconsole development mode</h1>
+</body>
+</html>

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()

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,14 +35,17 @@
     "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",
     "less-loader": "^5.0.0",
     "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"

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)

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()
+  ]
+})