How to set Timeout in Promise.race()?

Issue

I ma trying to use promise.race function in my angular component and I am having issues with timeout. Even though I have defined my timeout to be 1 second inside promise.race, the response wait for 15 second to execute? Here is my code:

let statusFind = this.getStatus(); //This takes 15 seconds
let statusTimeout = new Promise((resolve, reject) => { // This resolved in 1 second
    let wait = setTimeout(() => {
      clearTimeout(wait);
      let status = {connection : 0 , online : -3,  isPrintable : false };
      resolve (status);
    }, 1000)
});
      
Promise.race([ statusFind, statusTimeout]).then((statusResponse: any) => {
// Here I am getting my status response back in 15 second even if my timeout promise gets resolved first. 
//Though I am getting the value here as my timeout value but why it is waiting for my 15 second first promise to finish?

});

Please help.

Solution

AngularJS modifies the normal JavaScript flow by providing its own event processing loop. This splits the JavaScript into classical and AngularJS execution context. Only operations which are applied in the AngularJS execution context will benefit from AngularJS data-binding, exception handling, property watching, etc.

ES6 promises are not integrated with the AngularJS framework and its digest cycle.

Instead use promises created by the AngularJS $q service:

̶P̶r̶o̶m̶i̶s̶e̶.̶r̶a̶c̶e̶(̶[̶ ̶s̶t̶a̶t̶u̶s̶F̶i̶n̶d̶,̶ ̶s̶t̶a̶t̶u̶s̶T̶i̶m̶e̶o̶u̶t̶]̶)̶.̶t̶h̶e̶n̶(̶(̶s̶t̶a̶t̶u̶s̶R̶e̶s̶p̶o̶n̶s̶e̶:̶ ̶a̶n̶y̶)̶ ̶=̶>̶ ̶{̶
$q.race([ statusFind, statusTimeout]).then((statusResponse: any) => {

    // Here I am getting my status response back in 15 second even if my timeout promise gets resolved first. 
    //Though I am getting the value here as my timeout value but why it is waiting for my 15 second first promise to finish?

});

For more information, see

• AngularJS $q Service API Reference

Answered By - georgeawg