CODEWITHSUNDEEP
javascriptpromise
DrDoom
DrDoom

Reputation: 325

Understanding parts of JS code - Promise, resolve, reject, status

I have cobbled together some JavaScript code from various sources, edited them and made it work.

The problem is, that I don't understand parts of the code, and I would like some help understanding those parts.

Basically what the code does is send the username and password to the hotspot, it waits 0,5 sec and sends the user input mail to the webserver.

What I have trouble understanding is resolve("fast");. Is fast inside reslove just becouse resolve needs an "argument/parameter", as it is never displayed?

Also, at some point my code got to...

                reject({
                    status: this.status,
                    statusText: xhr.statusText
                });

... and I got an error. Needless to say, I don't understand what and where exactly status and statusText should display.

Alot of the code I got from Stack Overflow and Developer.Mozilla.Org.

Thank you for the help.

JS code

document.getElementById("submit_ok").addEventListener("click", sendAjax);

function resolveAfter05Second() {
  console.log("starting fast promise")
  return new Promise(resolve => {
    setTimeout(function() {
      resolve("fast")
      console.log("fast promise is done")
    }, 500)
  })
}

async function sendAjax() {
    let ax1 = await Ajax1 ("POST", "http://router/login")
    let fast = await resolveAfter05Second()
    let ax2 = await Ajax2 ("POST", "http://webserver/anti-xss.php")
}

function Ajax1 (method, url){
    return new Promise (function (resolve,  reject){
        let xhr = new XMLHttpRequest();
        xhr.open('POST', 'http://router/login', true);
        xhr.onload = function(){
            if(this.status >= 200 && this.status < 300){
                resolve(xhr.response);
                console.log("Success!");
                console.log("You'r logged in.");
                console.log("XHR1 " + xhr.readyState);
                console.log("XHR1 " + xhr.status);
            }else{
                reject({
                    status: this.status,
                    statusText: xhr.statusText
                });
            }
        };
        xhr.onerror = function (){
            reject({
                status: this.status,
                statusText: xhr.statusText
            });
        };
        xhr.send("username=HSuser&password=SimpleUserPassword");
    });
}

function Ajax2 (method, url){
    return new Promise (function (resolve, reject){
        let xhr2 = new XMLHttpRequest();
        xhr2.open('POST', 'http://webserver/anti-xss.php', true);
        xhr2.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        xhr2.onload = function(){
            if(this.status >= 200 && this.status < 300){
                resolve(xhr2.response);
                console.log("Success!");
                console.log("You'r email is " + useremail + ".");
                console.log("XHR2 " + xhr2.readyState);
                console.log("XHR2 " + xhr2.status);
            }else{
                reject({
                    status: this.status,
                    statusText: xhr2.statusText
                });
            }
        };
        xhr2.onerror = function (){
            reject({
                status: this.status,
                statusText: this.statusText
            });
        };
        let useremail = document.getElementById("email").value;                 
        xhr2.send("Email="+encodeURIComponent(useremail));
    });
}

Upvotes: 0

Views: 78

Answers (1)

Santgurlal Singh
Santgurlal Singh

Reputation: 167

You need to read some articles about callbacks in node.js and how to handle them. A promise will basically give you ability to handle the code written in it asynchronously.There are multiple ways to handle the callbacks.

You can write it like

Promise.then((data)=>{
    //this will be executed if and when promise resolves and will give you the data that you passed while resolving the promise
})
.catch((err)=>{
    //this will be executed if and when promise gets rejected and will give you the error that you passed while rejecting the promise
});

this is good for standing how promises works but is not a good approach in practice due to callback hell. I suggest that you study about callbacks and promises first and then use async/await after you understand the working of it.

See: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

Upvotes: 1

Related Questions