How to use promises (ES6) and .then method in order to this code will work?
getGif: function (searchingText, callback) {
var url = GIPHY_API_URL + '/v1/gifs/random?api_key=' + GIPHY_PUB_KEY + '&tag=' + searchingText;
var xhr = new XMLHttpRequest();
xhr.open('GET', url);
xhr.onload = function () {
if (xhr.status === 200) {
var data = JSON.parse(xhr.responseText).data;
var gif = {
url: data.fixed_width_downsampled_url,
sourceUrl: data.url
};
callback(gif);
}
};
xhr.send();
},
Using Promise-Based XHR your code looks like:
getGif = function (searchingText) {
return new Promise((resolve, reject)=>{
var url = GIPHY_API_URL + '/v1/gifs/random?api_key=' + GIPHY_PUB_KEY + '&tag=' + searchingText;
var xhr = new XMLHttpRequest();
// Setup our listener to process compeleted requests
xhr.onreadystatechange = function () {
// Only run if the request is complete
if (xhr.readyState !== 4) return;
// Process the response
if (xhr.status >= 200 && xhr.status < 300) {
// If successful
var data = JSON.parse(xhr.responseText).data;
var gif = {
url: data.fixed_width_downsampled_url,
sourceUrl: data.url
};
resolve(gif);
} else {
// If failed
reject({
status: request.status,
statusText: request.statusText
});
}
};
xhr.open('GET', url);
xhr.send();
});
}
Need to invoke method depends on signature of function.
getGif(searchText).then((response)=>{
console.log(response);
}, (error)=> {
console.log(error);
})
Related
I have the following methods.
async getuserdevicesIDs() {
return await new Promise( (resolve, reject) => {
let timesDone = 0;
// tslint:disable-next-line: no-var-keyword
const viewDevicesLink = '/user/devices/view/'; // parameter: email
const xhr = new XMLHttpRequest();
// xhr.open('POST', this.AUTH_SERVER_ADDRESS + '/user/devices/view/', true);
xhr.open('POST', this.AUTH_SERVER_ADDRESS + viewDevicesLink, true);
xhr.setRequestHeader('Content-type', 'application/JSON;charset=UTF-8');
console.log(this.auth.getUserID());
const email = this.auth.getUserID().toString();
const us = new User();
us.name = '';
us.email = 'richard#gmail.com';
us.password = '';
xhr.send(JSON.stringify(us));
xhr.addEventListener('readystatechange', processRequest, false);
xhr.onreadystatechange = processRequest;
function processRequest(e) {
// tslint:disable-next-line: triple-equals
if (xhr.readyState == 4 && xhr.status == 200) {
// tslint:disable-next-line: triple-equals
if (timesDone == 0) {
// tslint:disable-next-line: prefer-const
const response = xhr.response;
timesDone++;
alert(response);
resolve(response);
}
// tslint:disable-next-line: triple-equals
} else if (xhr.readyState == 4) {
alert('server error: ' + xhr.status + ', response is: ' + xhr.responseText);
timesDone++;
return null;
}
}
});
}
This method ask the server for certain values and The server will return an arrya of values but I do not know how to resolve the response as an arry for later use in this method.
this.getuserdevicesIDs().then(response => {
alert(this.IDs); })
.catch(err => {});
If anyone knows how i can store the response i get from server into an array that would help me out a great deal. Thank you
When receiving data from a web server, the data is always a string.
Parse the data with JSON.parse(), and the data becomes a JavaScript object.
resolve(JSON.parse(response));
I have the following method.
async getuserdevicesIDs() {
let timesDone = 0;
// tslint:disable-next-line: no-var-keyword
const viewDevicesLink = '/user/devices/view/'; // parameter: email
const xhr = new XMLHttpRequest();
// xhr.open('POST', this.AUTH_SERVER_ADDRESS + '/user/devices/view/', true);
xhr.open('POST', this.AUTH_SERVER_ADDRESS + viewDevicesLink, true);
xhr.setRequestHeader('Content-type', 'application/JSON;charset=UTF-8');
console.log(this.auth.getUserID());
const email = this.auth.getUserID().toString();
const us = new User();
us.name = '';
us.email = 'richard#gmail.com';
us.password = '';
xhr.send(JSON.stringify(us));
xhr.addEventListener('readystatechange', processRequest, false);
xhr.onreadystatechange = processRequest;
function processRequest(e) {
// tslint:disable-next-line: triple-equals
if (xhr.readyState == 4 && xhr.status == 200) {
// tslint:disable-next-line: triple-equals
if (timesDone == 0) {
// tslint:disable-next-line: prefer-const
const response = xhr.response;
timesDone++;
return response;
}
// tslint:disable-next-line: triple-equals
} else if (xhr.readyState == 4) {
alert('server error: ' + xhr.status + ', response is: ' + xhr.responseText);
timesDone++;
return null;
}
}
}
that is working fine but when i call the method like this
var IDs = await this.getuserdevicesIDs();
alert(IDs[0]);
then the alert fires before the getuserdevicesIDs() method has completed even if I await it. Any idee on how i can force the alert to wait for the method to finish? Thanks for any help
Try returning a Promise inside getuserdevicesIDs() function like this
async getuserdevicesIDs() {
return await new Promise((resolve, reject) => {
//your code here ...
resolve(value); // when you want to return a value in promise
}
}
When you want to call the method
this.getuserdevicesIDs().then(response => {}).catch(err => {});
I have an ajax GET request here
Get('https://www.ratemyprofessors.com/ShowRatings.jsp?tid=282380', function(err, data){
});
function Get(url, callback) {
var xhr = new XMLHttpRequest();
xhr.responseType = 'json';
xhr.onload = function() {
var status = xhr.status;
if (status === 200) {
callback(null, xhr.response);
} else {
callback(status, xhr.response);
}
};
xhr.open('GET', url, true);
xhr.send();
};
And I want to grab the first 3 elements of the class name "grade" and grab their inner text. How can I do this within the first Get function in the above code?
Your response type is a text, not a json. Below you can see work example.
Get('https://www.ratemyprofessors.com/ShowRatings.jsp?tid=282380', function(err, data) {
let dom = document.createElement('html');
dom.innerHTML = data;
let elements = Array.from(dom.getElementsByClassName('grade'));
elements.length = 3; // if you're need only 3 first elements.
console.log(elements);
});
function Get(url, callback, responseType = 'text') { // you can manually set type.
var xhr = new XMLHttpRequest();
xhr.responseType = 'text';
xhr.onload = function() {
var status = xhr.status;
if (status === 200) {
callback(null, xhr.response);
} else {
callback(status, xhr.response);
}
};
xhr.open('GET', url, true);
xhr.send();
};
let httpRequest = new XMLHttpRequest();
let FHIRserverAddress = '192.168.200.139:3012';
let url = 'http://' + FHIRserverAddress + '/model?starttime=' + startTime + '&endtime=' + endTime;
httpRequest.open('GET', url);
httpRequest.send();
httpRequest.onreadystatechange = function () {
if (httpRequest.readyState == 4 && httpRequest.status == 200) {
let currentModel = JSON.parse(httpRequest.responseText);
console.log('returning a valid model');
return callback(null, currentModel);
} else if (httpRequest.status != 200) {
console.log('get model call failed');
}
};
I can see the network call in Chrome dev tools and response status coming back is 200. The above call always get a 0 for the request status.
Anyone see what I am doing incorrectly?
I have following code, which highlights (fadein/out) the replied comment (its a div element).
I show only 10 last comments on the page
If the comment is found, then I highlight it (working fine), otherwise I load all comments and then try to highlight necessary one. But after loadAllComments function in the else clause the hide() method is not working - I wonder why.
function showReply(reply){
var p = getElement(reply);
if (p) {
$("#" + reply).animate({
opacity: 0.5
}, 200, function () {
});
setTimeout(function () {
$("#" + reply).animate({
opacity: 1
}, 200, function () {
});
}, 1000);
}
else{
loadAllComments(); //load all elements. working fine
$("#"+reply).hide(); //nothing happens. :-(
}
function loadAllComments() {
deleteComments();
$('.show-more-button').hide();
var xhr = new XMLHttpRequest();
xhr.open('GET', api_url + 'video_comments/?video=' + video_id, true);
xhr.withCredentials = true;
xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
xhr.setRequestHeader("X-CSRFToken", $.cookie('csrftoken'));
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
if (xhr.status != 200) {
alert(xhr.responseText);
}
else {
var comments = JSON.parse(xhr.responseText);
for (var i = comments.results.length - 1 ; i >= 0 ; i--){
$('.comment-content-box').append(showComment(comments.results[i]));
}
}
}
};
xhr.send();
}
function deleteComments(){
var comments_count = $('.comment-content-box').children('div').length;
for (var i=0; i < comments_count; i++){
$('.comment-render-box').remove();
}
}
function showComment(comment) {
return "<div>" // example, there is plenty of code, but it's just a return function
}
You're performing an XHR which is asynchronous. Supply a callback function to loadAllComments to be executed after your XHR completes:
function loadAllComments(callback) {
deleteComments();
$('.show-more-button').hide();
var xhr = new XMLHttpRequest();
xhr.open('GET', api_url + 'video_comments/?video=' + video_id, true);
xhr.withCredentials = true;
xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
xhr.setRequestHeader("X-CSRFToken", $.cookie('csrftoken'));
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
if (xhr.status != 200) {
alert(xhr.responseText);
}
else {
var comments = JSON.parse(xhr.responseText);
for (var i = comments.results.length - 1 ; i >= 0 ; i--){
$('.comment-content-box').append(showComment(comments.results[i]));
}
// xhr is complete and comments are now in DOM
callback();
}
}
};
xhr.send();
}
...
// usage
loadAllComments(function() {
$('#' + reply).hide();
});