Replace xmlhttprequest with fetch
fixes https://github.com/lbryio/lbry-app/issues/650 add fetch and es6-Promise polyfills update webpack config accordingly
This commit is contained in:
thujeevan
Jeremy Kauffman
parent
2fa5cdcfbb
commit
6d45b7c1c3
3 changed files with 135 additions and 152 deletions
|
|
@ -133,30 +133,27 @@ export function doDownloadLanguages() {
|
|||
fs.mkdirSync(app.i18n.directory);
|
||||
}
|
||||
|
||||
const xhr = new XMLHttpRequest();
|
||||
xhr.onreadystatechange = () => {
|
||||
if (xhr.readyState === XMLHttpRequest.DONE) {
|
||||
if (xhr.status === 200) {
|
||||
try {
|
||||
const files = JSON.parse(xhr.responseText);
|
||||
const actions = [];
|
||||
files.forEach(file => {
|
||||
actions.push(doDownloadLanguage(file));
|
||||
});
|
||||
|
||||
dispatch(batchActions(...actions));
|
||||
} catch (err) {
|
||||
throw err;
|
||||
}
|
||||
function checkStatus(response) {
|
||||
if (response.status >= 200 && response.status < 300) {
|
||||
return response;
|
||||
} 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));
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
|
|
|
|||
112
ui/js/jsonrpc.js
112
ui/js/jsonrpc.js
|
|
@ -9,29 +9,62 @@ jsonrpc.call = function(
|
|||
connectFailedCallback,
|
||||
timeout
|
||||
) {
|
||||
var xhr = new XMLHttpRequest();
|
||||
if (typeof connectFailedCallback !== "undefined") {
|
||||
if (timeout) {
|
||||
xhr.timeout = timeout;
|
||||
}
|
||||
|
||||
xhr.addEventListener("error", function(e) {
|
||||
connectFailedCallback(e);
|
||||
});
|
||||
xhr.addEventListener("timeout", function() {
|
||||
connectFailedCallback(
|
||||
new Error(__("XMLHttpRequest connection timed out"))
|
||||
);
|
||||
});
|
||||
}
|
||||
xhr.addEventListener("load", function() {
|
||||
var response = JSON.parse(xhr.responseText);
|
||||
|
||||
let error = response.error || (response.result && response.result.error);
|
||||
if (error) {
|
||||
if (errorCallback) {
|
||||
errorCallback(error);
|
||||
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 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);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const counter = parseInt(sessionStorage.getItem("JSONRPCCounter") || 0);
|
||||
const url = connectionString;
|
||||
const options = {
|
||||
method: "POST",
|
||||
body: JSON.stringify({
|
||||
jsonrpc: "2.0",
|
||||
method: method,
|
||||
params: params,
|
||||
id: counter,
|
||||
}),
|
||||
};
|
||||
|
||||
sessionStorage.setItem("JSONRPCCounter", counter + 1);
|
||||
|
||||
return fetch(url, options)
|
||||
.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);
|
||||
}
|
||||
|
||||
var errorEvent = new CustomEvent("unhandledError", {
|
||||
detail: {
|
||||
connectionString: connectionString,
|
||||
|
|
@ -43,46 +76,23 @@ jsonrpc.call = function(
|
|||
},
|
||||
});
|
||||
document.dispatchEvent(errorEvent);
|
||||
}
|
||||
} else if (callback) {
|
||||
callback(response.result);
|
||||
}
|
||||
});
|
||||
|
||||
})
|
||||
.catch(e => {
|
||||
if (connectFailedCallback) {
|
||||
xhr.addEventListener("error", function(event) {
|
||||
connectFailedCallback(event);
|
||||
});
|
||||
} else {
|
||||
xhr.addEventListener("error", function(event) {
|
||||
return connectFailedCallback(e);
|
||||
}
|
||||
|
||||
var errorEvent = new CustomEvent("unhandledError", {
|
||||
detail: {
|
||||
connectionString: connectionString,
|
||||
method: method,
|
||||
params: params,
|
||||
code: xhr.status,
|
||||
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;
|
||||
|
|
|
|||
100
ui/js/lbryio.js
100
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")) {
|
||||
console.log(__("Internal API disabled"));
|
||||
reject(new Error(__("LBRY internal API is disabled")));
|
||||
return;
|
||||
return Promise.reject(new Error(__("LBRY internal API is disabled")));
|
||||
}
|
||||
|
||||
const xhr = new XMLHttpRequest();
|
||||
if (!(method == "get" || method == "post")) {
|
||||
return Promise.reject(new Error(__("Invalid method")));
|
||||
}
|
||||
|
||||
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);
|
||||
function checkStatus(response) {
|
||||
if (response.status >= 200 && response.status < 300) {
|
||||
return response;
|
||||
} else {
|
||||
document.dispatchEvent(
|
||||
new CustomEvent("unhandledError", {
|
||||
detail: {
|
||||
connectionString: connectionString,
|
||||
method: action,
|
||||
params: params,
|
||||
message: response.error.message,
|
||||
...(response.error.data ? { data: response.error.data } : {}),
|
||||
},
|
||||
})
|
||||
);
|
||||
var error = new Error(response.statusText);
|
||||
error.response = response;
|
||||
throw error;
|
||||
}
|
||||
} else {
|
||||
resolve(response.data);
|
||||
}
|
||||
});
|
||||
|
||||
lbryio
|
||||
.getAuthToken()
|
||||
.then(token => {
|
||||
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}`;
|
||||
|
||||
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")));
|
||||
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}`;
|
||||
}
|
||||
})
|
||||
.catch(reject);
|
||||
|
||||
return makeRequest(url, options).then(response => response.data);
|
||||
});
|
||||
};
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue