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

Is Cognito redirect causing issues with Angular router responsiveness?

Bootstrap form validation solution

There seems to be an issue with the next-sitemap image location showing as undefined in the sitemap

JavaScript: A timer that relies solely on the concept of TIME

toggle visibility of a div using AngularJS

The ng-controller directive fails to function on the content of Kendo tabstrip tabs

Whenever I use NextJS's <Link> component, I always end up getting redirected to a

Enhance your website's performance by optimizing Javascript page loading time when using

Updating the content with HTML and JavaScript

Using jQuery and Flask-WTF to achieve live word count in a TextAreaField - a step-by-step guide!

Display or conceal certain HTML form elements based on the selection made in the previous form element

Currently troubleshooting an issue with the CSS that is affecting the table header alignment

The property 'x' cannot be found on the data type 'true | Point'

JavaScript Age Calculator - Counting Days

The lack of a defined theme in the makeStyles for @mui/styles sets it apart from @material-ui/core

Using Three.js to showcase 3 different slices of heatmaps within a 3D environment

Converting Buffers to Binary with JavaScript Node.js

Is there a way to make the primary button on the previous page function correctly again, just like it did before it was clicked?

Is it possible to implement PortalVue in multiple Vue.js single file components?

Having trouble with VueJS ref not preventing the default form action on submit?