Promise not waiting for my async code to execute

Question

I'm just discovering Promises and I'm trying to wrap my head around them. The W3C website has a page dedicated to it, featuring the following code :

let myPromise = new Promise(function(myResolve, myReject) {
  let x = 0;

// The producing code (this may take some time)

  if (x == 0) {
    myResolve("OK");
  } else {
    myReject("Error");
  }
});

myPromise.then(
  function(value) {myDisplayer(value);},
  function(error) {myDisplayer(error);}
);

I tried to make my own try at it, with the following code :

let p = new Promise(function test(resolve, reject){

    // here is supposed to be where the async code takes place, according to the 
    // article.

    let a = 0;

    setTimeout(() => {a = Math.floor(Math.random()*6)}, "1000")

    // ...however the condition triggers before the setTimeout takes place.

    if(a >= 0) {
        resolve(`Success ! a = ${a}`);
    } else {
        reject(`Failure ! a = ${a}`);
    }
});

p.then(function logResult(result){
    console.log(result);
})

So I figured that this should work :

let q = new Promise(function test(resolve, reject){

    let a = 0;

    setTimeout(() => {
        a = Math.floor(Math.random()*6);

        if(a >= 4) {
            resolve(`Success ! a = ${a}`);
        } else {
            reject(`Failure ! a = ${a}`);
        }
    }, "1000")
});

q.then(function logResult(result){
    console.log(result);
})

And it does work, but it's the setTimeout callbacks that handles everything, not the promise itself, and doing it without the promise works just as fine :

let a = 0;

setTimeout(() => {
    a = Math.floor(Math.random() * 6);

    if (a >= 4) {
        console.log(`Success ! a = ${a}`);
    } else {
        console.log(`Failure ! a = ${a}`);
    }
}, "1000")

So there's definitely something I don't understand about how Promises are supposed to handle async code or why they're useful altogether. I wish someone would explain it to me.

Answer 1

The whole point of promises is to allow some other code to be executed while waiting for a promise to resolve or reject.

In your code, however, no action takes time; therefore, you can do the same without promises.

The most common scenario for promises is something like this:

1. Show the user a progress dialog
2. Request some data from the backend
3. Once data is retrieved, process it
4. After data is processed, show it to a user

There will be a delay between steps 2 and 3 because an HTTP request will take some time naturally. Also, step 3 may take some time to process, and we don't want to block our code execution while waiting for it to complete. In this case, we wrap step 2 in a promise and use then to execute steps 3 and 4.

Please let me know if this helps.

Answer 2

Promises are used to handle operations which take longer than others. For example fetching something from a server. Since JavaScript is single-threaded, promises and callbacks are the answer for problems with long executing operations. If you would fetch something from a server synchronously (without a promise or callback), you wouldn't be capable to interact with your app in any other way (Click handlers wouldn't work.). It would block the main thread for the time when it fetches the data. Promises and callbacks are executing when there is nothing left to execute. Using promise to wrap callback function might be used to utilize async/await and .then() with it. It's in addition to prevent what's called - callback hell (a lot of callbacks nested in each other).