Fix(Network): Do not proxy response body reader when response is done.

Maizify · Maizify · commit b0787df6cbbc · 2022-04-02T14:31:01.000+08:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,6 +5,7 @@ English | [简体中文](./CHANGELOG_CN.md)
 - `Fix(Core)` Fix unexpected error when init vConsole twice in short time. (issue #525)
 - `Fix(Log)` Fix bug that `console.time | console.timeEnd` do not output log. (issue #523)
 - `Fix(Element)` Fix `undefined is not an object` error when updating attributes. (issue #526)
+- `Fix(Network)` Do not proxy response body reader when response is done.
 
 
 ## 3.14.4 (2022-03-31)
diff --git a/CHANGELOG_CN.md b/CHANGELOG_CN.md
@@ -5,6 +5,7 @@
 - `Fix(Core)` 修复极短时间内重复初始化 vConsole 导致的报错。 (issue #525)
 - `Fix(Log)` 修复 `console.time | console.timeEnd` 不输出日志的问题。 (issue #523)
 - `Fix(Element)` 修复更新 attributes 时引起的 `undefined is not an object` 错误。 (issue #526)
+- `Fix(Network)` 当请求完成后，不再代理 response body reader。
 
 
 ## 3.14.4 (2022-03-31)
diff --git a/dev/network.html b/dev/network.html
@@ -9,6 +9,7 @@
 
   <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
   <script src="https://unpkg.com/zepto/dist/zepto.min.js"></script>
+  <script src="https://unpkg.com/wavesurfer.js"></script>
   <script src="../dist/vconsole.min.js"></script>
 </head>
 <body ontouchstart>
@@ -49,6 +50,7 @@
       <a onclick="zeptoRequest('POST')" href="javascript:;" class="weui_btn weui_btn_default">Zepto: POST</a>
       <a onclick="scrolling()" href="javascript:;" class="weui_btn weui_btn_default">Scrolling</a>
       <a onclick="crossDomain()" href="javascript:;" class="weui_btn weui_btn_default">Cross Domain</a>
+      <a onclick="testWavesurfer()" href="javascript:;" class="weui_btn weui_btn_default">Wavesurfer.js</a>
     </div>
 
     <div class="section">
@@ -176,7 +178,7 @@
 }
 
 function getFetchSimple() {
-  window.fetch('./data/large.json?type=fetchGet&id=' + Math.random()).then((data) => {
+  window.fetch('./data/massive.json?type=fetchGet&id=' + Math.random()).then((data) => {
     return data.json();
   }).then((data) => {
     console.log('getFetchSimple Response:', data);
@@ -439,6 +441,19 @@
   console.info('optionsFetch() End');
 }
 
+function testWavesurfer() {
+  showPanel();
+  const div = document.createElement('DIV');
+  div.id = 'waveform';
+  document.body.append(div);
+  var wavesurfer = WaveSurfer.create({
+    container: '#waveform',
+    waveColor: 'violet',
+    progressColor: 'purple'
+  });
+  wavesurfer.load('./data/a.wav?method=fetch');
+}
+
 function scrolling() {
   vConsole.setOption('maxNetworkNumber', 60);
   let n = 0
diff --git a/src/network/fetch.proxy.ts b/src/network/fetch.proxy.ts
@@ -23,7 +23,8 @@ export class ResponseProxyHandler<T extends Response> implements ProxyHandler<T>
   }
 
   public get(target: T, key: string) {
-    // if (typeof key === 'string') { console.log('Proxy get:', key) }
+    // if (typeof key === 'string') { console.log('[Fetch.proxy] get:', key) }
+    const value = Reflect.get(target, key);
     switch (key) {
       case 'arrayBuffer':
       case 'blob':
@@ -32,33 +33,41 @@ export class ResponseProxyHandler<T extends Response> implements ProxyHandler<T>
       case 'text':
         return () => {
           this.item.responseType = <any>key.toLowerCase();
-          return target[key]().then((resp) => {
+          return value.apply(target).then((resp) => {
             this.item.response = Helper.genResonseByResponseType(this.item.responseType, resp);
             this.onUpdateCallback(this.item);
             return resp;
           });
         };
     }
-    if (typeof target[key] === 'function') {
-      return (...args) => {
-        return target[key].apply(target, args);
-      };
+    if (typeof value === 'function') {
+      return value.bind(target);
     } else {
-      return Reflect.get(target, key);
+      return value;
     }
   }
 
   protected mockReader() {
     let readerReceivedValue: Uint8Array;
     const _getReader = this.resp.body.getReader;
     this.resp.body.getReader = () => {
+      // console.log('[Fetch.proxy] getReader');
       const reader = <ReturnType<typeof _getReader>>_getReader.apply(this.resp.body);
+
+      // when readyState is already 4,
+      // it's not a chunked stream, or it had already been read.
+      // so should not update status.
+      if (this.item.readyState === 4) {
+        return reader;
+      }
+
       const _read = reader.read;
       const _cancel = reader.cancel;
       this.item.responseType = 'arraybuffer';
 
       reader.read = () => {
         return (<ReturnType<typeof _read>>_read.apply(reader)).then((result) => {
+          // console.log('[Fetch.proxy] read', result.done);
           if (!readerReceivedValue) {
             readerReceivedValue = new Uint8Array(result.value);
           } else {
@@ -142,7 +151,7 @@ export class FetchProxyHandler<T extends typeof fetch> implements ProxyHandler<T
     item.statusText = 'Pending';
     item.readyState = 1;
     if (!item.startTime) { // UNSENT
-      item.startTime = (+new Date());
+      item.startTime = Date.now();
     }
 
     if (Object.prototype.toString.call(requestHeader) === '[object Headers]') {
@@ -183,6 +192,7 @@ export class FetchProxyHandler<T extends typeof fetch> implements ProxyHandler<T
         item.header[key] = value;
         isChunked = value.toLowerCase().indexOf('chunked') > -1 ? true : isChunked;
       }
+      // console.log('[Fetch.proxy] afterFetch', 'isChunked:', isChunked, resp.status);
       
       if (isChunked) {
         // when `transfer-encoding` is chunked, the response is a stream which is under loading,
diff --git a/webpack.serve.config.js b/webpack.serve.config.js
@@ -25,11 +25,15 @@ module.exports = (env, argv) => {
       ],
       onBeforeSetupMiddleware(devServer) {
         devServer.app.all('*', (req, res) => {
+          const contentType = {
+            'flv': 'video/x-flv',
+            'wav': 'audio/x-wav',
+          };
           const fileType = req.path.split('.').pop();
           // console.log('Req:::', fileType, req.path, req.query);
           if (fileType === 'flv') {
             res.set({
-              'Content-Type': 'video/x-flv',
+              'Content-Type': contentType[fileType],
               // 'Content-Type', 'application/octet-stream',
               'Transfer-Encoding': 'chunked',
               'Connection': 'keep-alive',
