Use AbortController when available

packages/@orbit/jsonapi/src/jsonapi-source.ts

@@ -22,19 +22,10 @@ import { QueryOperator, QueryOperators } from "./lib/query-operators";
 
 const { assert, deprecate } = Orbit;
 
-export interface FetchSettings {
-  headers?: object;
-  method?: string;
+export interface FetchSettings extends RequestInit {
   json?: object;
-  body?: string;
   params?: any;
   timeout?: number;
-  credentials?: string;
-  cache?: string;
-  redirect?: string;
-  referrer?: string;
-  referrerPolicy?: string;
-  integrity?: string;
 }
 
 export interface JSONAPISourceSettings extends SourceSettings {
@@ -108,7 +99,7 @@ export default class JSONAPISource extends Source implements Pullable, Pushable,
 
   set defaultFetchHeaders(headers: object) {
     deprecate('JSONAPISource: Access `defaultFetchSettings.headers` instead of `defaultFetchHeaders`');
-    this.defaultFetchSettings.headers = headers;
+    this.defaultFetchSettings.headers = headers as HeadersInit;
   }
 
   get defaultFetchTimeout() {
@@ -181,49 +172,62 @@ export default class JSONAPISource extends Source implements Pullable, Pushable,
   /////////////////////////////////////////////////////////////////////////////
 
   fetch(url: string, customSettings?: FetchSettings): Promise<any> {
-    let settings = this.initFetchSettings(customSettings);
-    let fullUrl = this.appendQueryParams(url, settings);
-
-    let fetchFn = (Orbit as any).fetch || Orbit.globals.fetch;
-
-    // console.log('fetch', fullUrl, settings, 'polyfill', fetchFn.polyfill);
-
-    if (settings.timeout) {
-      let timeout = settings.timeout;
-      delete settings.timeout;
+    const settings = this.initFetchSettings(customSettings);
+    const urlWithQueryParams = this.appendQueryParams(url, settings);
+    const AbortController = (Orbit as any).AbortController || Orbit.globals.AbortController;
+    const timeout = settings.timeout;
+    delete settings.timeout;
+
+    if (timeout && !AbortController) {
+      return this.polyfillFetchWithTimeout(urlWithQueryParams, settings, timeout);
+    } else {
+      const fetch = (Orbit as any).fetch || Orbit.globals.fetch;
 
-      return new Promise((resolve, reject) => {
-        let timedOut: boolean;
+      if (timeout && AbortController) {
+        const controller = new AbortController();
+        settings.signal = controller.signal;
 
-        let timer = Orbit.globals.setTimeout(() => {
-          timedOut = true;
-          reject(new NetworkError(`No fetch response within ${timeout}ms.`));
+        Orbit.globals.setTimeout(() => {
+          controller.abort();
         }, timeout);
+      }
 
-        fetchFn(fullUrl, settings)
-          .catch((e: Error) => {
-            Orbit.globals.clearTimeout(timer);
-
-            if (!timedOut) {
-              return this.handleFetchError(e);
-            }
-          })
-          .then((response: any) => {
-            Orbit.globals.clearTimeout(timer);
-
-            if (!timedOut) {
-              return this.handleFetchResponse(response);
-            }
-          })
-          .then(resolve, reject);
-      });
-    } else {
-      return fetchFn(fullUrl, settings)
+      return fetch(urlWithQueryParams, settings)
         .catch((e: Error) => this.handleFetchError(e))
         .then((response: any) => this.handleFetchResponse(response));
     }
   }
 
+  polyfillFetchWithTimeout(url: string, settings: FetchSettings, timeout: number) {
+    const fetch = (Orbit as any).fetch || Orbit.globals.fetch;
+
+    return new Promise((resolve, reject) => {
+      let timedOut: boolean;
+
+      let timer = Orbit.globals.setTimeout(() => {
+        timedOut = true;
+        reject(new NetworkError(`No fetch response within ${timeout}ms.`));
+      }, timeout);
+
+      fetch(url, settings)
+        .catch((e: Error) => {
+          Orbit.globals.clearTimeout(timer);
+
+          if (!timedOut) {
+            return this.handleFetchError(e);
+          }
+        })
+        .then((response: any) => {
+          Orbit.globals.clearTimeout(timer);
+
+          if (!timedOut) {
+            return this.handleFetchResponse(response);
+          }
+        })
+        .then(resolve, reject);
+    });
+  }
+
   initFetchSettings(customSettings: FetchSettings = {}): FetchSettings {
     let settings: FetchSettings = deepMerge({}, this.defaultFetchSettings, customSettings);