The callback function inside the .then block of a Promise.all never gets

Question

The callback function inside the .then block of a Promise.all never gets

I'm currently attempting to utilize Promise.all and map in place of the forEach loop to make the task asynchronous. All promises within the Promise.all array are executed and resolved. Here is the code snippet:

loadDistances() {
    //return new Promise((resolve, reject) => {
      let rrr;
      let arr = [];
      this.geolocation.getCurrentPosition().then((resp) => {            
          // resp.coords.latitude
          rrr = resp;
          console.log(rrr + "              rrrrrrrrrrrrrrrrrrrrrrrrrr");

          setTimeout(() => {
            this.distancelist = this.af.list('/profiles/stylists');

            let x = 0;
            this.subscription6 = this.distancelist.subscribe(items => {

              let mapped = items.map((item) => {
                return new Promise(resolve => {
                  let rr;
                  //console.log(JSON.stringify(item) + "               *((*&*&*&*&^&*&*&*(&*(&*&*(&(&(&*(              :::" + x);
                  if(item.address == "") {
                    /*if(!item.picURL) {
                      item.picURL = 'assets/blankprof.png';
                    }*/
                  }
                  else {
                    console.log(item.address + " is the address empty??????");
                    this.nativeGeocoder.forwardGeocode(item.address)
                      .then((coordinates: NativeGeocoderForwardResult) => {
                        console.log("I AM IN THE GEOCODING ***&&*&*&*&*");
                          rr = this.round(this.distance(coordinates.latitude, coordinates.longitude, rrr.coords.latitude, rrr.coords.longitude, "M"), 1);
                          if(!item.picURL) {
                            item.picURL = 'assets/blankprof.png';
                          }
                          arr.push({'pic':item.picURL, 'salon':item.username, 'distance':rr});
                          console.log("push to the array of results");
                          resolve();
                        }).catch(e => {
                          console.log(e.message + " caught this error");
                          resolve();
                        })
                  }

                })
              });

              let results = Promise.all(mapped);
              results.then(() => {
                console.log(JSON.stringify(arr) + " :FOSIEJO:SFJ::EFIJSEFIJS:EFJS:IO THIS IODIOSJ:FDSIJ :DIS");
                arr.sort(function(a,b) {
                  return a.distance - b.distance;
                });

                this.distances = arr.slice();
              })

            });//);
          }, 1500)




      /*}).catch((error) => {
        this.diagnostic.switchToLocationSettings();
        console.log('Error getting location', error.message);
        resolve();
      });*/

    });


  }

The output on the console displays:

[12:38:27]  console.log: I AM IN THE GEOCODING ***&&*&*&*&* 
[12:38:27]  console.log: push to the array of results 
... (repeated messages) ...
[12:38:29]  console.log: push to the array of results

Despite the alternating messages suggesting success with all promises being resolved, the line

console.log(JSON.stringify(arr) + " :FOSIEJO:SFJ::EFIJSEFIJS:EFJS:IO THIS IODIOSJ:FDSIJ :DIS");

never appears in the console. As a result, the then block of the results from Promise.all is not reached.

javascript typescript promise

Answer 1

Answer №1

Your code contains unresolved paths, for example:

if(item.address == "") {
  /*if(!item.picURL) {
    item.picURL = 'assets/blankprof.png';
  }*/
  //arr.push({'pic':item.picURL, 'salon':item.username, 'distance':"No Address"});
  //x++;
}

Answer 2

Your code contains unresolved paths, for example:

if(item.address == "") {
  /*if(!item.picURL) {
    item.picURL = 'assets/blankprof.png';
  }*/
  //arr.push({'pic':item.picURL, 'salon':item.username, 'distance':"No Address"});
  //x++;
}

Answer 3

Answer №2

Deadlocks can easily occur as @andy-gaskell mentioned when creating new Promises. To prevent this, consider implementing one of the following methods; Any of these may result in an error or return 1.

function promiseWithTryCatch() {
  return new Promise((resolve, reject) => {
    try {
      let result;
      // your code

      resolve(result);
    }
    catch(ex) {
      reject(ex);
    }
  })
}

function promiseWithResolve() {
  return Promise.resolve()
    .then(() => {
      let result;
      // your code

      return result; 
    })
}

async function promiseWithAsync() {
  let result;
  // your code

  return result;
}

Replace the comment with your code and store the final result in the variable "result". If your code involves async operations, it's recommended to create a new function following the same pattern and return that as the result, for example: result = [promise method]

The riskiest approach is using "new Promise", as any unresolved or unrejected code will lead to a deadlock. Therefore, make sure to have proper try/catch blocks.
If you utilize Promise.resolve(), errors within .then will be captured but avoid placing any code outside .then. In case there are exceptions, catch them and return Promise.reject(new Error())
The most secure option is using async functions, where any "throw" statement will result in a Promise.reject, while "return" will lead to a Promise.resolve

Experiment with the given example, although async/await has been commented out due to limitations of this snippet tool not supporting ES2016.

function nestedPromise(num) {
  return Promise.resolve(' myNestedValue is ' + num);
}

function promiseWithTryCatch() {
  return new Promise((resolve, reject) => {
    try {
      let mynumber = 2 + 5;

      nestedPromise(mynumber)
        .then((answer) => {
          resolve(answer.trim());
        })
        .catch(ex => {
          // error handling for async-code
          reject(ex);
        })
    }
    catch(ex) {
      // error handling for sync-code
      reject(ex);
    }
  })
}

function promiseWithResolve() {
  return Promise.resolve()
    .then(() => {
      let mynumber = 2 + 5;

      return nestedPromise(mynumber);
    })
    .then((answer) => {
      // do something with the answer
      return answer.trim();
    })
}

/*
async function promiseWithAsync() {
  let mynumber = 2 + 5;
  let answer = await nestedPromise(mynumber);
  
  return answer.trim();
}
*/

promiseWithTryCatch()
  .then(answer => console.log('promiseWithTryCatch result is ' + answer))
   .catch(err => console.log('promiseWithAsync error is ' + err.message));
   
promiseWithResolve()
  .then(answer => console.log('promiseWithResolve result is ' + answer))
  .catch(err => console.log('promiseWithResolve error is ' + err.message));

/*
promiseWithAsync()
  .then(answer => console.log('promiseWithAsync result is' + answer))
  .catch(err => console.log('promiseWithAsync error is ' + err.message));
*/

Answer 4

Deadlocks can easily occur as @andy-gaskell mentioned when creating new Promises. To prevent this, consider implementing one of the following methods; Any of these may result in an error or return 1.

function promiseWithTryCatch() {
  return new Promise((resolve, reject) => {
    try {
      let result;
      // your code

      resolve(result);
    }
    catch(ex) {
      reject(ex);
    }
  })
}

function promiseWithResolve() {
  return Promise.resolve()
    .then(() => {
      let result;
      // your code

      return result; 
    })
}

async function promiseWithAsync() {
  let result;
  // your code

  return result;
}

Replace the comment with your code and store the final result in the variable "result". If your code involves async operations, it's recommended to create a new function following the same pattern and return that as the result, for example: result = [promise method]

The riskiest approach is using "new Promise", as any unresolved or unrejected code will lead to a deadlock. Therefore, make sure to have proper try/catch blocks.
If you utilize Promise.resolve(), errors within .then will be captured but avoid placing any code outside .then. In case there are exceptions, catch them and return Promise.reject(new Error())
The most secure option is using async functions, where any "throw" statement will result in a Promise.reject, while "return" will lead to a Promise.resolve

Experiment with the given example, although async/await has been commented out due to limitations of this snippet tool not supporting ES2016.

function nestedPromise(num) {
  return Promise.resolve(' myNestedValue is ' + num);
}

function promiseWithTryCatch() {
  return new Promise((resolve, reject) => {
    try {
      let mynumber = 2 + 5;

      nestedPromise(mynumber)
        .then((answer) => {
          resolve(answer.trim());
        })
        .catch(ex => {
          // error handling for async-code
          reject(ex);
        })
    }
    catch(ex) {
      // error handling for sync-code
      reject(ex);
    }
  })
}

function promiseWithResolve() {
  return Promise.resolve()
    .then(() => {
      let mynumber = 2 + 5;

      return nestedPromise(mynumber);
    })
    .then((answer) => {
      // do something with the answer
      return answer.trim();
    })
}

/*
async function promiseWithAsync() {
  let mynumber = 2 + 5;
  let answer = await nestedPromise(mynumber);
  
  return answer.trim();
}
*/

promiseWithTryCatch()
  .then(answer => console.log('promiseWithTryCatch result is ' + answer))
   .catch(err => console.log('promiseWithAsync error is ' + err.message));
   
promiseWithResolve()
  .then(answer => console.log('promiseWithResolve result is ' + answer))
  .catch(err => console.log('promiseWithResolve error is ' + err.message));

/*
promiseWithAsync()
  .then(answer => console.log('promiseWithAsync result is' + answer))
  .catch(err => console.log('promiseWithAsync error is ' + err.message));
*/

The callback function inside the .then block of a Promise.all never gets

Answer №1

Answer №2

Similar questions

Using Node.js to retrieve table data from a URL

What should be included in the types field of package.json for TypeScript libraries?

Automatically adjust padding in nested lists with ReactJS and MaterialUI v1

Tips for fetching a response after sending an ajax request using XMLHttpRequest

How can I delay the execution of code until a promise is fulfilled?

The issue of transform scale not functioning properly in conjunction with background clip and gradients in CSS

Observable subscription does not result in updating the value

Showing HTML element when the model count is zero - ASP.NET MVC View

How to anticipate an error being thrown by an observable in RxJS

Tips on creating animations for elements that are triggered when scrolling and become visible

Adjust google maps to fill the entire vertical space available

Handling multiple Ajax requests while refreshing events in fullcalendar.io

Implementing real-time time updates using php ajax technology

Obtain both the key and value from an Object using Angular 2 or later

Issues with Angular's router outlet link functionality not performing as expected

Efficiently managing repeated records in NodeJS using loops

The JQuery duplication process did not function as anticipated

"Utilize JavaScript to extract data from JSON and dynamically generate a

Type-constrained generic key access for enhanced security

Is there a way to selectively import specific functions from a file in NextJs/React rather than importing the entire file?