angularjs - 带有进度/通知的服务器异步请求

Question

我在设置将执行异步 http 请求的服务时遇到问题。

背景

我有一个后端端点 /cars.json 当你第一次点击这个端点时，将启动获取所有汽车信息的后台作业。然后服务器返回状态为 200 的响应:

{"status":"started", "percentage_completion":0, "data":null, "error":null}

对该端点的连续请求将继续返回状态 200 并更新 percentage_completion

{"status":"started", "percentage_completion":45, "data":null, "error":null}
{"status":"started", "percentage_completion":90, "data":null, "error":null}

最终对端点的请求会返回:

{"status":"finished", "percentage_completion":100, "data": {...}, "error":null}

我有一个数据，我可以将它添加到 $scope 中。

但我很难理解 promise 和做事的 Angular ......

我加了这样的东西:

   var dashboard = angular.module('dashboard', [                                                                                       
      'templates'                                                                                                                     
    ]);                                                                                                                                 

   dashboard.controller('dashboardController', ['carsService', '$scope',                                                          
        function(carsService, $scope){                                                                                             
          $scope.test = "Loading...";                                                                                                   
          carsService.get()                                                                                                        
            .then(function(response){                                                                                                   
              $scope.test = response.data;                                                                                              
            });                                                                                                                         
        }]                                                                                                                              
   );                                                                                                                                  

    dashboard.factory('carsService', ['$http', function($http){                                                                    
      var get = function(){                                                                                                             
        return $http.get('/cars.json');                                                                                            
      };                                                                                                                                
      return {                                                                                                                          
        get: get                                                                                                                        
      };                                                                                                                                
    }]);

它向服务器发送一个请求，并使用第一个响应说明作业已启动来更新作用域上的测试。几秒钟后刷新页面时，我会使用正确的数据和完成状态更新测试。

什么是最好的方式， Angular 方式:) promise 和东西让服务和 Controller 自动完成。

我想到的第一件事是使用 $interval 或类似的东西，并定期从 .then(success) 重新发送请求，但也许有更好的方法。

Angular 文档说明了有关进度/通知 promise 的内容，但目前我不知道如何将其连接起来。

显然我目前还没有完全理解 Promise，我只是被介绍给他们 - 你能分享一些关于如何使用 Angular 处理异步请求的技巧/资源吗？

Answer 1

我不确定我是否完全理解您的问题，但如果您希望在进度更新返回时获得更新，Angular 会在其 promise 服务中内置一个进度回调(正如您所提到的)。 .then() 中的第一个回调是你的成功回调，第二个是你的错误回调，第三个是你的进度回调。

因此，当您将回调链接到 Promise 时，您可以使用以下语法来更新进度指示器:

carsService.get()                                                                                                        
    .then(function(response){
        // success                                                                                                  
        $scope.test = response.data;
        $scope.$apply();  // or wrapped in $timeout                                      
    }, function(error){
        // error
    }, function(percentComplete){
        // progress
        $scope.progress = percentComplete;
        $scope.$apply();  // or wrapped in $timeout
    });

关于在编写和链接你的 Promise 时使用的最佳语法，John Papa 有一个很棒(而且非常深入)的风格指南，它将帮助你更好地组织你的 Angular 代码。你可以找到这个here .

这是一个示例 jsfiddle演示此通知/进度回调的实际操作。它使用超时来模拟异步调用，但很好地展示了总体思路。

还请记住，当您进行这些异步调用时，您可能需要运行 $scope.$apply()或将代码包装在回调中，您可以在 $timeout(function(){ //update data }); 中更新范围数据为了再次运行 Angular 摘要循环(异步调用会在 Angular 的内置观察程序之外更新您的数据)。这将导致您的 View 也更新，而无需重新加载页面。如果您以前从未遇到过这种行为，则可以使用很多关于此的博客文章和 SO 问题。这里是 one这很好地涵盖了它。