Use XHR instead of fetch requests

This commit is contained in:
Omar Roth 2018-08-04 14:39:41 -05:00
parent 9ed72a8dad
commit 0685d3c7c2

View File

@ -205,15 +205,6 @@ function toggle_comments(target) {
} }
} }
function timeout(ms, promise) {
return new Promise(function(resolve, reject) {
setTimeout(function() {
reject(new Error('timeout'));
}, ms);
promise.then(resolve, reject);
});
}
function load_comments(target) { function load_comments(target) {
var continuation = target.getAttribute('data-continuation'); var continuation = target.getAttribute('data-continuation');
@ -222,66 +213,74 @@ function load_comments(target) {
body.innerHTML = body.innerHTML =
'<h3><center class="loading"><i class="icon ion-ios-refresh"></i></center></h3>'; '<h3><center class="loading"><i class="icon ion-ios-refresh"></i></center></h3>';
var url = var url = '/api/v1/comments/<%= video.id %>?format=html&continuation=' + continuation;
'/api/v1/comments/<%= video.id %>?format=html&continuation=' + continuation; var xhr = new XMLHttpRequest();
timeout(5000, fetch(url)) xhr.responseType = 'json';
.then(function(response) { xhr.timeout = 10000;
return response.json(); xhr.open("GET", url, true);
}) xhr.send();
.then(
function(jsonResponse) { xhr.onreadystatechange = function() {
body.innerHTML = jsonResponse.content_html; if(xhr.readyState == 4 && xhr.status == 200) {
}, body.innerHTML = xhr.response.content_html;
function(error) { } else {
body.innerHTML = fallback;
console.log(response);
}
)
.catch(function(error) {
body.innerHTML = fallback; body.innerHTML = fallback;
console.log(error); }
}); }
xhr.ontimeout = function() {
body.innerHTML = fallback;
}
} }
function get_reddit_comments() { function get_reddit_comments() {
fetch('/api/v1/comments/<%= video.id %>?source=reddit') var url = '/api/v1/comments/<%= video.id %>?source=reddit';
.then(function(response) { var xhr = new XMLHttpRequest();
return response.json(); xhr.responseType = 'json';
}) xhr.timeout = 10000;
.then( xhr.open("GET", url, true);
function(jsonResponse) { xhr.send();
comments = document.getElementById('comments');
comments.innerHTML = `
<div>
<h3>
<a href="javascript:void(0)" onclick="toggle_comments(this)">[ - ]</a>
{title}
</h3>
<b>
<a target="_blank" href="https://reddit.com{permalink}">View more comments on Reddit</a>
</b>
</div>
<div>{content_html}</div>
<hr style="margin-left:1em; margin-right:1em;">`.supplant({ xhr.onreadystatechange = function() {
title: jsonResponse.title, if(xhr.readyState == 4 && xhr.status == 200) {
permalink: jsonResponse.permalink, comments = document.getElementById('comments');
content_html: jsonResponse.content_html comments.innerHTML = `
}); <div>
}, <h3>
function(response) { <a href="javascript:void(0)" onclick="toggle_comments(this)">[ - ]</a>
get_youtube_comments(); {title}
} </h3>
); <b>
<a target="_blank" href="https://reddit.com{permalink}">View more comments on Reddit</a>
</b>
</div>
<div>{content_html}</div>
<hr style="margin-left:1em; margin-right:1em;">`.supplant({
title: xhr.response.title,
permalink: xhr.response.permalink,
content_html: xhr.response.content_html
});
} else {
get_youtube_comments();
}
};
xhr.ontimeout = function() {
get_reddit_comments();
}
} }
function get_youtube_comments() { function get_youtube_comments() {
fetch('/api/v1/comments/<%= video.id %>?format=html') var url = '/api/v1/comments/<%= video.id %>?format=html';
.then(function(response) { var xhr = new XMLHttpRequest();
return response.json(); xhr.responseType = 'json';
}) xhr.timeout = 10000;
.then( xhr.open("GET", url, true);
function(jsonResponse) { xhr.send();
xhr.onreadystatechange = function() {
if(xhr.readyState == 4 && xhr.status == 200) {
comments = document.getElementById('comments'); comments = document.getElementById('comments');
comments.innerHTML = ` comments.innerHTML = `
<div> <div>
@ -292,13 +291,17 @@ function get_youtube_comments() {
</div> </div>
<div>{content_html}</div> <div>{content_html}</div>
<hr style="margin-left:1em; margin-right:1em;">`.supplant({ <hr style="margin-left:1em; margin-right:1em;">`.supplant({
content_html: jsonResponse.content_html content_html: xhr.response.content_html
}); });
}, } else {
function(response) { comments = document.getElementById('comments');
comments.innerHTML = ''; comments.innerHTML = '';
} }
); }
xhr.ontimeout = function () {
get_youtube_comments();
}
} }
String.prototype.supplant = function(o) { String.prototype.supplant = function(o) {