The chaining of Angular async promises is not working properly, causing the 1st call to not return in time for the 2nd call to

Question

The chaining of Angular async promises is not working properly, causing the 1st call to not return in time for the 2nd call to

Before making a second service call, I need to retrieve a zipcode. My initial plan was to obtain the zipcode before calling the 2nd service by wrapping it in a promise, so that I could access the promise later. However, chaining promises in this way is proving to be difficult.

Angular factory is invoked and within the factory method:

var userGeoPromise = userService.getGeoposition().then(function (geoposition) {
    vm.geoposition = geoposition;
            return addressService.reverseGeocode(geoposition.coords);
    }).then(function (data) {
            vm.currentLocation = googleService.googleAddressComponentsToAddress(data.results[0]);
            zipCodeCurrent = vm.currentLocation.zip;
    });

A couple of points to note from the code above:

I stored the promise in var userGeoPromise
zipCodeCurrent is populated with the obtained zipcode

Testing the Promise works as expected:

userGeoPromise.then( function() {
      console.log('should always display', zipCodeCurrent);
});

2nd service call:

userGeoPromise.then( function() {
     var serviceBase = "http://localhost:2295/api/getservicezip/"+ zipCodeCurrent;
     var serviceZipPromise = $http.get(serviceBase);
     return serviceZipPromise.then(function (results) {
          console.log('serviceZipPromise', results);
          return results.data;
     });
});

However, upon including the serviceZipPromise.then within the other promise, the website modal simply keeps spinning without progress.

javascript angularjs asynchronous promise angular-promise

Answer 1

Answer №1

When working within a then callback, it is important to remember to return the result value instead of assigning it directly to a variable like zipCodeCurrent. While the first then callback in your code follows this principle correctly, the second one should also adhere to it:

var userGeoPromise = userService.getGeoposition().then(function (geoposition) {
    vm.geoposition = geoposition;
    return addressService.reverseGeocode(geoposition.coords);
}).then(function (data) {
    vm.currentLocation = googleService.googleAddressComponentsToAddress(data.results[0]);
    return vm.currentLocation.zip; // *** make sure to return it
});

It's worth noting that I have left the assignments to the properties of vm, but ideally you should avoid mutating variables that seem to exist outside the scope of these callback functions.

The Promise test can be structured as follows:

userGeoPromise.then( function(zipCodeCurrent) { // *** ensure to include the argument
    console.log('should always display', zipCodeCurrent);
});

The second service features a nested then call, which is generally considered best practice to avoid. Instead of nesting promises, it is recommended to return the promise and apply the then on the main chain:

userGeoPromise.then( function(zipCodeCurrent) { // *** include the argument for consistency
    var serviceBase = "http://localhost:2295/api/getservicezip/"+ zipCodeCurrent;
    return $http.get(serviceBase); // *** return the promise instead
}).then( function (results) { // *** move the then-callback to the outer chain
    console.log('serviceZipPromise', results);
    return results.data;
}).catch( function (error) { // *** handle errors at the end of the chain
    console.log('an error occurred:', error);
});

Notice how the nesting level never goes beyond 1 for better code readability and organization.

Answer 2

When working within a then callback, it is important to remember to return the result value instead of assigning it directly to a variable like zipCodeCurrent. While the first then callback in your code follows this principle correctly, the second one should also adhere to it:

var userGeoPromise = userService.getGeoposition().then(function (geoposition) {
    vm.geoposition = geoposition;
    return addressService.reverseGeocode(geoposition.coords);
}).then(function (data) {
    vm.currentLocation = googleService.googleAddressComponentsToAddress(data.results[0]);
    return vm.currentLocation.zip; // *** make sure to return it
});

It's worth noting that I have left the assignments to the properties of vm, but ideally you should avoid mutating variables that seem to exist outside the scope of these callback functions.

The Promise test can be structured as follows:

userGeoPromise.then( function(zipCodeCurrent) { // *** ensure to include the argument
    console.log('should always display', zipCodeCurrent);
});

The second service features a nested then call, which is generally considered best practice to avoid. Instead of nesting promises, it is recommended to return the promise and apply the then on the main chain:

userGeoPromise.then( function(zipCodeCurrent) { // *** include the argument for consistency
    var serviceBase = "http://localhost:2295/api/getservicezip/"+ zipCodeCurrent;
    return $http.get(serviceBase); // *** return the promise instead
}).then( function (results) { // *** move the then-callback to the outer chain
    console.log('serviceZipPromise', results);
    return results.data;
}).catch( function (error) { // *** handle errors at the end of the chain
    console.log('an error occurred:', error);
});

Notice how the nesting level never goes beyond 1 for better code readability and organization.

Answer 3

Answer №2

Modify the sequence and include 2 separate error handlers (which is considered a good practice, by the way)

var serviceZipPromise = $http.get(serviceBase); // invoke
        return serviceZipPromise.then(function(results) {
            console.log('should always show', zipCodeCurrent);
            userGeoPromise.then(function() {
                //console.log('serviceZipPromise', results);
                console.log('inside servicezip ', zipCodeCurrent);

            }, function(err) { // handle error from userGeoPromise
                console.log(err);
            });

            return results.data; // THIS will return the data
        }, function(err) { // handle outer error, this was swapped 
            console.log(err);

        });

This section should not produce an error. However, to ensure that your actual serviceBase utilizes the zip code correctly, you may need to delay its execution slightly.

UPDATE answer provided for you

// initialize part of the api call
var xserviceBase = "http://localhost:2295"; // seems like your base

return userGeoPromise.then(function(){
       return $http.get(xserviceBase + '/api/getserviceablezip/' + zipCodeCurrent).then(function(results){
             return results.data;
       })
  });

I realize that having 3 return statements might seem messy, but it should function as intended

Answer 4

Modify the sequence and include 2 separate error handlers (which is considered a good practice, by the way)

var serviceZipPromise = $http.get(serviceBase); // invoke
        return serviceZipPromise.then(function(results) {
            console.log('should always show', zipCodeCurrent);
            userGeoPromise.then(function() {
                //console.log('serviceZipPromise', results);
                console.log('inside servicezip ', zipCodeCurrent);

            }, function(err) { // handle error from userGeoPromise
                console.log(err);
            });

            return results.data; // THIS will return the data
        }, function(err) { // handle outer error, this was swapped 
            console.log(err);

        });

This section should not produce an error. However, to ensure that your actual serviceBase utilizes the zip code correctly, you may need to delay its execution slightly.

UPDATE answer provided for you

// initialize part of the api call
var xserviceBase = "http://localhost:2295"; // seems like your base

return userGeoPromise.then(function(){
       return $http.get(xserviceBase + '/api/getserviceablezip/' + zipCodeCurrent).then(function(results){
             return results.data;
       })
  });

I realize that having 3 return statements might seem messy, but it should function as intended

The chaining of Angular async promises is not working properly, causing the 1st call to not return in time for the 2nd call to

Answer №1

Answer №2

Similar questions

Comparing ngrx and redux for managing state in stateless components

What is the best way to structure a web server along with a socket.io server?

Incrementing pages, starting with page1.html and continuing to page2.html, page3.html, and beyond, for use with the window

Unable to execute the new firebase on node server

I'm curious about the process by which custom hooks retrieve data and the detailed pathway that custom hooks follow

Transferring data from an Express server to a React frontend perspective

Is it possible to authorize all requests for a file's content with cross-domain AJAX calls?

Tips for excluding the mention of the final index within a for loop when passing the index as a parameter for a function

What is the process for obtaining an AccessToken from LinkedIn's API for Access Token retrieval?

Nuxt Vuex global state update does not cause v-for loop components to re-render

Changing the value of a JavaScript variable within the .Net Codebehind

Adjusting or cropping strokes in a JavaScript canvas

Issues with Angular route links not functioning correctly when using an Array of objects

The impact of scope on XMLHttpRequest

Does JavaScript run before Liquid processing in Shopify?

Strategies for managing a sizable td Input element in a Table that undergoes re-rendering whenever there is a change in state in React

Filtering rows in JQgrid is made easy after the addition of a new record

Activate event starting from parent and ascending through child nodes

The React-loadable alert indicated a discrepancy in the text content

Conceal an element upon clicking anywhere but within it