Question

我有一个服务异步连续两次调用API。

我希望应用程序在继续之前等待两者都得到解决，并且由于可能会或可能不会进行其中一个调用，我相信$watch是针对嵌套或链式回调的方法。

    var response_complete = {call1:false, call2:false};

    $http.post("myapi.com/slug", data, header).then(function(res){ 

        /* ... */

        response_complete.call1 = true;

    }); 

    if(make_this_call==true){

        $http.post("myapi.com/anotherslug", data, header).then(function(res){ 

            /*...*/

            response_complete.call2 = true;

        }); 

    } else response_complete.call2 = true;

    $scope.$watch("response_complete",function(){

        if(response_complete.call1==true && response_complete.call2==true){

            console.log("DONE!");
        }

    });

因此，我们的想法是创建一个全局变量，并在两个调用完成时观察它。第二个调用是有条件的，如果没有被调用，它会立即将它的响应变量设置为true。

但是$watch回调只被触发一次，其中的条件（call1＆amp; call2 == true）永远不会被满足。

Answer 1

您的手表不起作用，因为响应完成不是$scope变量|属性：

 // replace this with $scope property declaration
 //var response_complete = {call1:false, call2:false};
 $scope.response_complete = {call1:false, call2:false};

然后在您的后续代码中使用$scope.response_complete修改其值，以便在$watch更改后触发$scope.response_complete。

更好的解决方案：

正如其他人指定的那样，使用$broadcast比使用$watch更好，因此改为查看变量throw事件并在$scope内捕获这些事件。

$http.post("myapi.com/slug", data, header).then(function() {
    // stuff
    $scope.$broadcast("POST_SLUG_COMPLETE");
});

$http.post("myapi.com/anotherslug", data, header).then(function() {
    // stuff
    $scope.$broadcast("POST_ANOTHERSLUG_COMPLETE");
});

// then in your $scope

$scope.$on("POST_SLUG_COMPLETE", function () {
    // stuff
});

$scope.$on("POST_ANOTHERSLUG_COMPLETE", function () {
    // stuff
});

希望有所帮助

Answer 2

如果你需要当前范围的“全局”变量，你可以这样做：

$scope.complete = false; 
$http.post("myapi.com/slug", data, header).then(function(res) { 
    $http.post("myapi.com/anotherslug", data, header).then(function(res) { 
        $scope.complete = true;
        console.log("DONE!");
    });
});

您也可以使用$ rootScope获取更“全局”的值。其他替代方案是广播或服务内的财产。

但更重要的是确保您如何使用异步调用。如果你想要两者都被解决，那么把第二个调用放在第一个调用中。您提供的示例将无法正常工作，因为response_complete.call1 = true位于异步线程内，并且在您尝试验证时始终为false

在Angular JS中使用$ watch设置监听器

2 个答案: