feat(fetch): schedule macroTask when fetch (#1075)

Author: JiaLiPassion

file-size-limit.json

@@ -3,7 +3,7 @@
  {
 "path": "dist/zone.min.js",
 "checkTarget": true,
-"limit": 40144
+"limit": 41500
  }
  ]
-}
+}

lib/browser/browser.ts

@@ -199,8 +199,16 @@ Zone.__load_patch('XHR', (global: any, Zone: ZoneType) => {
 });
 
 constXMLHTTPREQUEST_SOURCE='XMLHttpRequest.send';
-constsendNative=
+constfetchTaskAborting=zoneSymbol('fetchTaskAborting');
+constfetchTaskScheduling=zoneSymbol('fetchTaskScheduling');
+constsendNative: Function|null=
 patchMethod(XMLHttpRequestPrototype,'send',()=>function(self: any,args: any[]){
+if((Zone.currentasany)[fetchTaskScheduling]===true){
+// a fetch is scheduling, so we are using xhr to polyfill fetch
+// and because we already schedule macroTask for fetch, we should
+// not schedule a macroTask for xhr again
+returnsendNative!.apply(self,args);
+}
 if(self[XHR_SYNC]){
 // if the XHR is sync there is no task to schedule, just execute the code.
 returnsendNative!.apply(self,args);
@@ -212,22 +220,26 @@ Zone.__load_patch('XHR', (global: any, Zone: ZoneType) => {
 }
 });
 
-constabortNative=patchMethod(XMLHttpRequestPrototype,'abort',()=>function(self: any){
-consttask: Task=findPendingTask(self);
-if(task&&typeoftask.type=='string'){
-// If the XHR has already completed, do nothing.
-// If the XHR has already been aborted, do nothing.
-// Fix #569, call abort multiple times before done will cause
-// macroTask task count be negative number
-if(task.cancelFn==null||(task.data&&(<XHROptions>task.data).aborted)){
-return;
-}
-task.zone.cancelTask(task);
-}
-// Otherwise, we are trying to abort an XHR which has not yet been sent, so there is no
-// task
-// to cancel. Do nothing.
-});
+constabortNative=
+patchMethod(XMLHttpRequestPrototype,'abort',()=>function(self: any,args: any[]){
+consttask: Task=findPendingTask(self);
+if(task&&typeoftask.type=='string'){
+// If the XHR has already completed, do nothing.
+// If the XHR has already been aborted, do nothing.
+// Fix #569, call abort multiple times before done will cause
+// macroTask task count be negative number
+if(task.cancelFn==null||(task.data&&(<XHROptions>task.data).aborted)){
+return;
+}
+task.zone.cancelTask(task);
+}elseif((Zone.currentasany)[fetchTaskAborting]===true){
+// the abort is called from fetch polyfill, we need to call native abort of XHR.
+returnabortNative!.apply(self,args);
+}
+// Otherwise, we are trying to abort an XHR which has not yet been sent, so there is no
+// task
+// to cancel. Do nothing.
+});
 }
 });
 

lib/browser/rollup-main.ts

@@ -8,5 +8,6 @@
 
 import'../zone';
 import'../common/promise';
+import'../common/fetch';
 import'../common/to-string';
 import'./browser';

lib/common/fetch.ts

@@ -0,0 +1,100 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+Zone.__load_patch('fetch',(global: any,Zone: ZoneType,api: _ZonePrivate)=>{
+constfetch=global['fetch'];
+constZoneAwarePromise=global.Promise;
+constsymbolThenPatched=api.symbol('thenPatched');
+constfetchTaskScheduling=api.symbol('fetchTaskScheduling');
+constfetchTaskAborting=api.symbol('fetchTaskAborting');
+if(typeoffetch!=='function'){
+return;
+}
+constOriginalAbortController=global['AbortController'];
+constsupportAbort=typeofOriginalAbortController==='function';
+letabortNative: Function|null=null;
+if(supportAbort){
+global['AbortController']=function(){
+constabortController=newOriginalAbortController();
+constsignal=abortController.signal;
+signal.abortController=abortController;
+returnabortController;
+};
+abortNative=api.patchMethod(
+OriginalAbortController.prototype,'abort',
+(delegate: Function)=>(self: any,args: any)=>{
+if(self.task){
+returnself.task.zone.cancelTask(self.task);
+}
+returndelegate.apply(self,args);
+});
+}
+constplaceholder=function(){};
+global['fetch']=function(){
+constargs=Array.prototype.slice.call(arguments);
+constoptions=args.length>1 ? args[1] : null;
+constsignal=options&&options.signal;
+returnnewPromise((res,rej)=>{
+consttask=Zone.current.scheduleMacroTask(
+'fetch',placeholder,args,
+()=>{
+letfetchPromise;
+letzone=Zone.current;
+try{
+(zoneasany)[fetchTaskScheduling]=true;
+fetchPromise=fetch.apply(this,args);
+}catch(error){
+rej(error);
+return;
+}finally{
+(zoneasany)[fetchTaskScheduling]=false;
+}
+
+if(!(fetchPromiseinstanceofZoneAwarePromise)){
+letctor=fetchPromise.constructor;
+if(!ctor[symbolThenPatched]){
+api.patchThen(ctor);
+}
+}
+fetchPromise.then(
+(resource: any)=>{
+if(task.state!=='notScheduled'){
+task.invoke();
+}
+res(resource);
+},
+(error: any)=>{
+if(task.state!=='notScheduled'){
+task.invoke();
+}
+rej(error);
+});
+},
+()=>{
+if(!supportAbort){
+rej('No AbortController supported, can not cancel fetch');
+return;
+}
+if(signal&&signal.abortController&&!signal.aborted&&
+typeofsignal.abortController.abort==='function'&&abortNative){
+try{
+(Zone.currentasany)[fetchTaskAborting]=true;
+abortNative.call(signal.abortController);
+}finally{
+(Zone.currentasany)[fetchTaskAborting]=false;
+}
+}else{
+rej('cancel fetch need a AbortController.signal');
+}
+});
+if(signal&&signal.abortController){
+signal.abortController.task=task;
+}
+});
+};
+});

lib/common/promise.ts

@@ -458,6 +458,8 @@ Zone.__load_patch('ZoneAwarePromise', (global: any, Zone: ZoneType, api: _ZonePr
 (Ctorasany)[symbolThenPatched]=true;
 }
 
+api.patchThen=patchThen;
+
 functionzoneify(fn: Function){
 returnfunction(){
 letresultPromise=fn.apply(this,arguments);
@@ -475,10 +477,10 @@ Zone.__load_patch('ZoneAwarePromise', (global: any, Zone: ZoneType, api: _ZonePr
 if(NativePromise){
 patchThen(NativePromise);
 
-letfetch=global['fetch'];
+/*let fetch = global['fetch'];
  if (typeof fetch == 'function') {
  global['fetch'] = zoneify(fetch);
-}
+ }*/
 }
 
 // This is not part of public API, but it is useful for tests, so we expose it.

lib/zone.ts

@@ -322,6 +322,7 @@ interface _ZonePrivate {
 showUncaughtError: ()=>boolean;
 patchEventTarget: (global: any,apis: any[],options?: any)=>boolean[];
 patchOnProperties: (obj: any,properties: string[]|null)=>void;
+patchThen: (ctro: Function)=>void;
 setNativePromise: (nativePromise: any)=>void;
 patchMethod:
 (target: any,name: string,
@@ -1326,7 +1327,8 @@ const Zone: ZoneType = (function(global: any) {
 patchEventTarget: ()=>[],
 patchOnProperties: noop,
 patchMethod: ()=>noop,
-bindArguments: ()=>(nullasany),
+bindArguments: ()=>[],
+patchThen: ()=>noop,
 setNativePromise: (NativePromise: any)=>{
 // sometimes NativePromise.resolve static function
 // is not ready yet, (such as core-js/es6.promise)

test/browser-zone-setup.ts

@@ -11,6 +11,7 @@ if (typeof window !== 'undefined') {
 }
 import'../lib/common/to-string';
 import'../lib/browser/browser';
+import'../lib/common/fetch';
 import'../lib/browser/webapis-user-media';
 import'../lib/browser/webapis-media-query';
 import'../lib/testing/zone-testing';

test/common/Promise.spec.ts

@@ -549,76 +549,4 @@ describe(
 testPromiseSubClass();
 });
 });
-
-describe('fetch',ifEnvSupports('fetch',function(){
-it('should work for text response',function(done){
-testZone.run(function(){
-global['fetch']('/base/test/assets/sample.json').then(function(response: any){
-constfetchZone=Zone.current;
-expect(fetchZone).toBe(testZone);
-
-response.text().then(function(text: string){
-expect(Zone.current).toBe(fetchZone);
-expect(text.trim()).toEqual('{"hello": "world"}');
-done();
-});
-});
-});
-});
-
-it('should work for json response',function(done){
-testZone.run(function(){
-global['fetch']('/base/test/assets/sample.json').then(function(response: any){
-constfetchZone=Zone.current;
-expect(fetchZone).toBe(testZone);
-
-response.json().then(function(obj: any){
-expect(Zone.current).toBe(fetchZone);
-expect(obj.hello).toEqual('world');
-done();
-});
-});
-});
-});
-
-it('should work for blob response',function(done){
-testZone.run(function(){
-global['fetch']('/base/test/assets/sample.json').then(function(response: any){
-constfetchZone=Zone.current;
-expect(fetchZone).toBe(testZone);
-
-// Android 4.3- doesn't support response.blob()
-if(response.blob){
-response.blob().then(function(blob: any){
-expect(Zone.current).toBe(fetchZone);
-expect(blobinstanceofBlob).toEqual(true);
-done();
-});
-}else{
-done();
-}
-});
-});
-});
-
-it('should work for arrayBuffer response',function(done){
-testZone.run(function(){
-global['fetch']('/base/test/assets/sample.json').then(function(response: any){
-constfetchZone=Zone.current;
-expect(fetchZone).toBe(testZone);
-
-// Android 4.3- doesn't support response.arrayBuffer()
-if(response.arrayBuffer){
-response.arrayBuffer().then(function(blob: any){
-expect(Zone.current).toBe(fetchZone);
-expect(blobinstanceofArrayBuffer).toEqual(true);
-done();
-});
-}else{
-done();
-}
-});
-});
-});
-}));
 }));