Merge pull request #1140 from DougReeder/wireclient-fetch

WireClient uses fetch() if available, instead of XHR

Author: Sebastian Kippe

src/util.js

@@ -35,10 +35,10 @@ var util = {
     }
   },
 
-  globalContext: (typeof(window) !== 'undefined' ? window : global),
+  globalContext: (typeof(window) !== 'undefined' ? window : (typeof self === 'object' ? self : global)),
 
   getGlobalContext () {
-    return (typeof(window) !== 'undefined' ? window : global);
+    return (typeof(window) !== 'undefined' ? window : (typeof self === 'object' ? self : global));
   },
 
   extend (target) {

src/wireclient.js

@@ -7,7 +7,7 @@ const Authorize = require('./authorize');
 const config = require('./config');
 
 /**
- * This file exposes a get/put/delete interface on top of XMLHttpRequest.
+ * This file exposes a get/put/delete interface on top of fetch() or XMLHttpRequest.
  * It requires to be configured with parameters about the remotestorage server to
  * connect to.
  * Each instance of WireClient is always associated with a single remotestorage
@@ -486,8 +486,80 @@ WireClient.prototype = {
 WireClient.isArrayBufferView = isArrayBufferView;
 
 // Shared request function used by WireClient, GoogleDrive and Dropbox.
-// TODO: Should we use fetch ?
 WireClient.request = function (method, url, options) {
+  if (typeof fetch === 'function') {
+    return WireClient._fetchRequest(method, url, options);
+  } else if (typeof XMLHttpRequest === 'function') {
+    return WireClient._xhrRequest(method, url, options);
+  } else {
+    log('[WireClient] add a polyfill for fetch or XMLHttpRequest');
+    return Promise.reject('[WireClient] add a polyfill for fetch or XMLHttpRequest');
+  }
+};
+
+/** options includes body, headers and responseType */
+WireClient._fetchRequest = function (method, url, options) {
+  var syntheticXhr;
+  var responseHeaders = {};
+  var abortController;
+  if (typeof AbortController === 'function') {
+    abortController = new AbortController();
+  }
+  var networkPromise = fetch(url, {
+    method: method,
+    headers: options.headers,
+    body: options.body,
+    signal: abortController ? abortController.signal : undefined
+  }).then(function (response) {
+    log('[WireClient fetch]', response);
+
+    response.headers.forEach(function (value, headerName) {
+      responseHeaders[headerName.toUpperCase()] = value;
+    });
+
+    syntheticXhr = {
+      readyState: 4,
+      status: response.status,
+      statusText: response.statusText,
+      response: undefined,
+      getResponseHeader: function (headerName) {
+        return responseHeaders[headerName.toUpperCase()] || null;
+      },
+      // responseText: 'foo',
+      responseType: options.responseType,
+      responseURL: url,
+    };
+    switch (options.responseType) {
+      case 'arraybuffer':
+        return response.arrayBuffer();
+      case 'blob':
+        return response.blob();
+      case 'json':
+        return response.json();
+      case '':
+      case 'text':
+        return response.text();
+      default:   // document
+        throw new Error("responseType 'document' is not currently supported using fetch");
+    }
+  }).then(function (processedBody) {
+    syntheticXhr.response = processedBody;
+    return syntheticXhr;
+  });
+
+  var timeoutPromise = new Promise(function (resolve, reject) {
+    setTimeout(function () {
+      reject('timeout');
+      if (abortController) {
+        abortController.abort();
+      }
+    }, config.requestTimeout);
+  });
+
+  return Promise.race([networkPromise, timeoutPromise]);
+};
+
+WireClient._xhrRequest = function (method, url, options) {
   return new Promise ((resolve, reject) => {
 
     log('[WireClient]', method, url);
@@ -550,7 +622,7 @@ WireClient._rs_init = function (remoteStorage) {
 };
 
 WireClient._rs_supported = function () {
-  return !! XMLHttpRequest;
+  return typeof fetch === 'function' || typeof XMLHttpRequest === 'function';
 };
 
 WireClient._rs_cleanup = function () {