AngularJS: multiple $http request and .then promises returns undefined

Question

I don't get the response from my second http request after trying to make two http requests in a row with AngularJS.

I have this code:

        createBucket: function (bucketKey, policyKey) {

            // get token from json file
            return $http({
                url: tokenUrl
            })
            .then(function (response) {
                token = response.data;
                console.log('refreshing access token');
                console.log(token);
            })
            .then(function (response) {

                // use token to create new bucket
                $http({
                    method: 'POST',
                    headers: {
                        "Authorization": token.token_type + " " + token.access_token
                    },
                    url: "https://developer.api.autodesk.com/oss/v2/buckets",
                    data: {
                        "bucketKey": bucketKey,
                        "policyKey": policyKey
                    }

                });

            }).then(processResponse);
        },

First I do one http request getting a json file. Then using the information in this json file, I do another http request, the result of this request I want to return. In this final code:

    // Send the data part of the response
    function processResponse(response) {
        console.log('response:');
        console.log(response);
        return response.data;
    }

the response here is undefined.. I don't know why...

You need to return the second promise before chaining to the processResponse function. — georgeawg
– georgeawg, Commented Dec 15, 2015 at 17:41

georgeawg · Accepted Answer · 2015-12-15 11:44:23Z

You need to return values for chaining

createBucket: function (bucketKey, policyKey) {

    // get token from json file
    return $http({
        url: tokenUrl
    })
    .then(function (response) {
        var token = response.data;
        console.log('refreshing access token');
        console.log(token);
        //return token for chaining
        return token;
    })
    .then(function (token) {
        //save 2nd httpPromise for chaining
        var p1 = $http({
            method: 'POST',
            headers: {
                      "Authorization": token.token_type + " " + 
                      token.access_token
                      },
            url: "https://developer.api.autodesk.com/oss/v2/buckets",
            data: {
                "bucketKey": bucketKey,
                "policyKey": policyKey
            }
        //return httpPromise for chaining
        return p1;
        });

    }).then(processResponse);
},

Yaron Schwimmer · Accepted Answer · 2015-12-15 11:39:59Z

You have too many thens... When you chain then statements, make sure that each of them returns a promise for the next one. Try:

createBucket: function (bucketKey, policyKey) {

    // get token from json file
    $http({
        url: tokenUrl
    })
    .then(function (response) {
        token = response.data;
        console.log('refreshing access token');
        console.log(token);
        return $http({
            method: 'POST',
            headers: {
                "Authorization": token.token_type + " " + token.access_token
            },
            url: "https://developer.api.autodesk.com/oss/v2/buckets",
            data: {
                "bucketKey": bucketKey,
                "policyKey": policyKey
            }
        });
    })
    .then(processResponse);
}

Deblaton Jean-Philippe · Accepted Answer · 2015-12-15 09:55:46Z

0

Each of your .then needs to return something :

    createBucket: function (bucketKey, policyKey) {

        // get token from json file
        return $http({
            url: tokenUrl
        })
        .then(function (response) {
            token = response.data;
            console.log('refreshing access token');
            console.log(token);
            return response;
        })
        .then(function (response) { // Response was already undefined here. The reason why token had something is because you surely have defined it in a parent javascript scope.

            // use token to create new bucket
            $http({
                method: 'POST',
                headers: {
                    "Authorization": token.token_type + " " + token.access_token
                },
                url: "https://developer.api.autodesk.com/oss/v2/buckets",
                data: {
                    "bucketKey": bucketKey,
                    "policyKey": policyKey
                }
            });
            return response;

        }).then(processResponse);
    },

answered Dec 15, 2015 at 9:55

Deblaton Jean-Philippe

11.4k4 gold badges53 silver badges68 bronze badges

1 Comment

ganjan Over a year ago

thanks, but the processResponse method is still not executed even if the second http request is...

ashr · Accepted Answer · 2015-12-15 10:04:49Z

0

When chaining promises, you need to return a new promise from each .then step to be executed for each of your subsequent steps.

answered Dec 15, 2015 at 10:04

ashr

2996 silver badges13 bronze badges

1 Comment

ganjan Over a year ago

the second http request is executed now too, problem is that I don't get the result from the second http request. I can see that I do a second http request in my console. But the processResponse method is never executed or is undefined.

ganjan · Accepted Answer · 2015-12-17 11:29:24Z

In the end I choose to do it like this:

        createBucket: function (bucketKey, policyKey) {

            // get access token from json file
            return $http({
                url: tokenUrl
            })
            .then(function (response) {
                return response.data;
            })
            .then(function (token) {

                // use response.data / access token to create new bucket
                return $http({
                    method: 'POST',
                    headers: {
                        "Authorization": token.token_type + " " + token.access_token
                    },
                    url: "https://developer.api.autodesk.com/oss/v2/buckets",
                    data: {
                        "bucketKey": bucketKey,
                        "policyKey": policyKey
                    }

                })
                .then(successCallback, function errorCallback(response) {
                    displayError(response);
                });

            });
        },

Collectives™ on Stack Overflow

AngularJS: multiple $http request and .then promises returns undefined

5 Answers 5

Comments

Comments

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related