Replace xmlhttprequest with fetch

fixes https://github.com/lbryio/lbry-app/issues/650
add fetch and es6-Promise polyfills
update webpack config accordingly

ui/js/actions/settings.js

@@ -133,30 +133,27 @@ export function doDownloadLanguages() {
       fs.mkdirSync(app.i18n.directory);
     }
 
-    const xhr = new XMLHttpRequest();
+    function checkStatus(response) {
-    xhr.onreadystatechange = () => {
+      if (response.status >= 200 && response.status < 300) {
-      if (xhr.readyState === XMLHttpRequest.DONE) {
+        return response;
-        if (xhr.status === 200) {
+      } else {
-          try {
+        throw new Error(
-            const files = JSON.parse(xhr.responseText);
+          __("The list of available languages could not be retrieved.")
-            const actions = [];
+        );
-            files.forEach(file => {
-              actions.push(doDownloadLanguage(file));
-            });
-
-            dispatch(batchActions(...actions));
-          } catch (err) {
-            throw err;
-          }
-        } else {
-          throw new Error(
-            __("The list of available languages could not be retrieved.")
-          );
-        }
       }
-    };
+    }
-    xhr.open("get", "http://i18n.lbry.io");
+
-    xhr.send();
+    function parseJSON(response) {
+      return response.json();
+    }
+
+    return fetch("http://i18n.lbry.io")
+      .then(checkStatus)
+      .then(parseJSON)
+      .then(files => {
+        const actions = files.map(doDownloadLanguage);
+        dispatch(batchActions(...actions));
+      });
   };
 }
 

ui/js/jsonrpc.js

@@ -9,80 +9,90 @@ jsonrpc.call = function(
   connectFailedCallback,
   timeout
 ) {
-  var xhr = new XMLHttpRequest();
+  function checkStatus(response) {
-  if (typeof connectFailedCallback !== "undefined") {
+    if (response.status >= 200 && response.status < 300) {
-    if (timeout) {
+      return response;
-      xhr.timeout = timeout;
+    } else {
+      var error = new Error(response.statusText);
+      error.response = response;
+      throw error;
     }
+  }
 
-    xhr.addEventListener("error", function(e) {
+  function parseJSON(response) {
-      connectFailedCallback(e);
+    return response.json();
-    });
+  }
-    xhr.addEventListener("timeout", function() {
+
-      connectFailedCallback(
+  function makeRequest(url, options) {
-        new Error(__("XMLHttpRequest connection timed out"))
+    return new Promise((resolve, reject) => {
-      );
+      fetch(url, options).then(resolve).catch(reject);
+
+      if (timeout) {
+        const e = new Error(__("XMLHttpRequest connection timed out"));
+        setTimeout(() => {
+          return reject(e);
+        }, timeout);
+      }
     });
   }
-  xhr.addEventListener("load", function() {
-    var response = JSON.parse(xhr.responseText);
 
-    let error = response.error || (response.result && response.result.error);
+  const counter = parseInt(sessionStorage.getItem("JSONRPCCounter") || 0);
-    if (error) {
+  const url = connectionString;
-      if (errorCallback) {
+  const options = {
-        errorCallback(error);
+    method: "POST",
-      } else {
+    body: JSON.stringify({
-        var errorEvent = new CustomEvent("unhandledError", {
+      jsonrpc: "2.0",
-          detail: {
+      method: method,
-            connectionString: connectionString,
+      params: params,
-            method: method,
+      id: counter,
-            params: params,
+    }),
-            code: error.code,
+  };
-            message: error.message || error,
+
-            data: error.data,
+  sessionStorage.setItem("JSONRPCCounter", counter + 1);
-          },
+
-        });
+  return fetch(url, options)
-        document.dispatchEvent(errorEvent);
+    .then(checkStatus)
+    .then(parseJSON)
+    .then(response => {
+      const error =
+        response.error || (response.result && response.result.error);
+
+      if (!error && typeof callback === "function") {
+        return callback(response.result);
+      }
+
+      if (error && typeof errorCallback === "function") {
+        return errorCallback(error);
       }
-    } else if (callback) {
-      callback(response.result);
-    }
-  });
 
-  if (connectFailedCallback) {
-    xhr.addEventListener("error", function(event) {
-      connectFailedCallback(event);
-    });
-  } else {
-    xhr.addEventListener("error", function(event) {
       var errorEvent = new CustomEvent("unhandledError", {
         detail: {
           connectionString: connectionString,
           method: method,
           params: params,
-          code: xhr.status,
+          code: error.code,
+          message: error.message || error,
+          data: error.data,
+        },
+      });
+      document.dispatchEvent(errorEvent);
+    })
+    .catch(e => {
+      if (connectFailedCallback) {
+        return connectFailedCallback(e);
+      }
+
+      var errorEvent = new CustomEvent("unhandledError", {
+        detail: {
+          connectionString: connectionString,
+          method: method,
+          params: params,
+          code: e.response && e.response.status,
           message: __("Connection to API server failed"),
         },
       });
       document.dispatchEvent(errorEvent);
     });
-  }
-
-  const counter = parseInt(sessionStorage.getItem("JSONRPCCounter") || 0);
-
-  xhr.open("POST", connectionString, true);
-  xhr.send(
-    JSON.stringify({
-      jsonrpc: "2.0",
-      method: method,
-      params: params,
-      id: counter,
-    })
-  );
-
-  sessionStorage.setItem("JSONRPCCounter", counter + 1);
-
-  return xhr;
 };
 
 export default jsonrpc;

ui/js/lbryio.js

@@ -36,80 +36,56 @@ lbryio.getExchangeRates = function() {
 };
 
 lbryio.call = function(resource, action, params = {}, method = "get") {
-  return new Promise((resolve, reject) => {
+  if (!lbryio.enabled && (resource != "discover" || action != "list")) {
-    if (!lbryio.enabled && (resource != "discover" || action != "list")) {
+    console.log(__("Internal API disabled"));
-      console.log(__("Internal API disabled"));
+    return Promise.reject(new Error(__("LBRY internal API is disabled")));
-      reject(new Error(__("LBRY internal API is disabled")));
+  }
-      return;
+
+  if (!(method == "get" || method == "post")) {
+    return Promise.reject(new Error(__("Invalid method")));
+  }
+
+  function checkStatus(response) {
+    if (response.status >= 200 && response.status < 300) {
+      return response;
+    } else {
+      var error = new Error(response.statusText);
+      error.response = response;
+      throw error;
+    }
+  }
+
+  function parseJSON(response) {
+    return response.json();
+  }
+
+  function makeRequest(url, options) {
+    return fetch(url, options).then(checkStatus).then(parseJSON).catch(e => {
+      throw new Error(__("Something went wrong making an internal API call."));
+    });
+  }
+
+  return lbryio.getAuthToken().then(token => {
+    const fullParams = { auth_token: token, ...params };
+    const qs = querystring.stringify(fullParams);
+    let url = `${CONNECTION_STRING}${resource}/${action}?${qs}`;
+
+    let options = {
+      method: "GET",
+    };
+
+    if (method == "post") {
+      options = {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/x-www-form-urlencoded",
+        },
+        body: qs,
+      };
+      url = `${CONNECTION_STRING}${resource}/${action}`;
     }
 
-    const xhr = new XMLHttpRequest();
+    return makeRequest(url, options).then(response => response.data);
-
-    xhr.addEventListener("error", function(event) {
-      reject(
-        new Error(__("Something went wrong making an internal API call."))
-      );
-    });
-
-    xhr.addEventListener("timeout", function() {
-      reject(new Error(__("XMLHttpRequest connection timed out")));
-    });
-
-    xhr.addEventListener("load", function() {
-      const response = JSON.parse(xhr.responseText);
-
-      if (!response.success) {
-        if (reject) {
-          const error = new Error(response.error);
-          error.xhr = xhr;
-          reject(error);
-        } else {
-          document.dispatchEvent(
-            new CustomEvent("unhandledError", {
-              detail: {
-                connectionString: connectionString,
-                method: action,
-                params: params,
-                message: response.error.message,
-                ...(response.error.data ? { data: response.error.data } : {}),
-              },
-            })
-          );
-        }
-      } else {
-        resolve(response.data);
-      }
-    });
-
-    lbryio
-      .getAuthToken()
-      .then(token => {
-        const fullParams = { auth_token: token, ...params };
-
-        if (method == "get") {
-          xhr.open(
-            "get",
-            CONNECTION_STRING +
-              resource +
-              "/" +
-              action +
-              "?" +
-              querystring.stringify(fullParams),
-            true
-          );
-          xhr.send();
-        } else if (method == "post") {
-          xhr.open("post", CONNECTION_STRING + resource + "/" + action, true);
-          xhr.setRequestHeader(
-            "Content-type",
-            "application/x-www-form-urlencoded"
-          );
-          xhr.send(querystring.stringify(fullParams));
-        } else {
-          reject(new Error(__("Invalid method")));
-        }
-      })
-      .catch(reject);
   });
 };