AngularJS：多个 $http 请求和 .then 承诺返回未定义答案

【问题标题】：AngularJS: multiple $http request and .then promises returns undefinedAngularJS：多个 $http 请求和 .then 承诺返回未定义
【发布时间】：2016-03-21 01:08:23
【问题描述】：

在尝试使用 AngularJS 连续发出两个 http 请求后，我没有得到第二个 http 请求的响应。

我有这个代码：

        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);
        },

首先我做了一个 http 请求来获取一个 json 文件。然后使用这个json文件中的信息，我又做了一个http请求，这个请求的结果我想返回。在这个最终代码中：

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

这里的响应是undefined..我不知道为什么...

【问题讨论】：

在链接到processResponse 函数之前，您需要返回第二个promise。

标签： javascript angularjs json http promise

【解决方案1】：

您的每个.then 都需要返回一些东西：

    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);
    },

【讨论】：

谢谢，但是即使第二个http请求是……还是没有执行processResponse方法……

【解决方案2】：

在链接承诺时，您需要从每个 .then 步骤返回一个新的承诺，以便为后续的每个步骤执行。

【讨论】：

第二个http请求现在也执行了，问题是我没有从第二个http请求中得到结果。我可以看到我在控制台中做了第二个 http 请求。但是 processResponse 方法永远不会执行或未定义。

【解决方案3】：

你有太多的thens...当你链接then 语句时，确保它们中的每一个都为下一个返回一个承诺。试试：

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);
}

【讨论】：

【解决方案4】：

您需要返回值以进行链接

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);
},

【讨论】：

【解决方案5】：

最后我选择这样做：

        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);
                });

            });
        },

【讨论】：