比较 angularJS 中两个 API 调用的最佳方法？答案

【问题标题】：Best way to compare two API calls in angularJS?比较 angularJS 中两个 API 调用的最佳方法？
【发布时间】：2017-06-23 15:36:36
【问题描述】：

我的基于 API 的应用程序有一个 AngularJS 前端。有些服务会进行 API 调用，如下所示。我想比较每个调用的变量：

获取用户数据：

this.getUserData = function () {
var apiCall = $http({
  method: 'GET',
  url: 'http://example.com/api/userdata',
    headers: {
      'Authorization': 'Bearer ' + localStorage.getItem('token'),
      'Access-Control-Allow-Origin': 'Any'
    }
 });
return apiCall;
};

获取页面数据：

 this.getPageData = function(slug){
     var apiCall = $http.get('http://example.com/api/public/page?slug=' + slug, {
      headers: { 'Authorization': 'Bearer ' + localStorage.getItem('token') }
    }
  )
  return apiCall;
};

在我的控制器中，我希望比较每个调用的 var，如下所示：

    if (apiService.getUserData.likes.page_id == apiService.getPageData.page_id){ // do stuff }

考虑到 API 调用可能需要一段时间，执行此操作的最有效方法是什么。我不必每次想从 API 访问变量时都进行 API 调用，对吗？请记住，这些 API 调用通常会在不同的控制器中进行，因此结果存储在不同的范围内。

基本上，我很困惑那部分逻辑应该放在控制器、服务本身还是其他地方。任何建议表示赞赏。谢谢。

【问题讨论】：

标签： angularjs service api-design

【解决方案1】：

如果您在控制器中比较它们，您可以轻松地调用一个然后再进行比较。由于您说您有一个“基于 API 的应用程序”并使用来自 localStorage 的身份验证令牌，因此您应该在您拥有的每个不同控制器中调用 API，以防您的身份验证令牌过期或发生其他情况。

我很可能会创建这样的服务（将其刷新到更多以显示所有部分）：

angular.module('app').service('CompareService', CompareService);

CompareService.$inject = ['apiService', '$q'];

function CompareService(apiService, $q) {
     return {
         arePageIdsEqual: apie
     };        

     function apie() {
         var deferred = $q.defer();

         apiService.getUserData().$promise.then(function(userData) {
             apiService.getPageData().$promise.then(function(pageData) {
                 deferred.resolve(userData.likes.page_id === pageData.page_id);
             }, function(err) {
                 deferred.reject(err);
             });
        }, function(err) {
             deferred.reject(err);
        });     

        return deferred.promise;
    }
}

在你的控制器中注入它并调用它：

CompareService.arePageIdsEqual(function(yes) {
    if(yes) {
        // do something
    }
}, function(err) {
    // err making the calls
});

【讨论】：

非常好！为了清楚起见，这意味着在我的应用程序中多次调用每个 API 路由 - 一次是为了获取控制器所需的 API 数据，每次我需要比较变量时再一次。这是可取的吗？
这取决于您的应用程序。如果您已经需要控制器中的数据，您应该调用 getUserData 和 getPageData 然后一旦它们都回来进行比较。如果您只需要比较中的真/假，请使用这样的服务。第三个选项是在您的服务器端，您可以在 userData 上设置一个标志，例如 userData.hasLikedPage，然后您不必在 UI 上进行比较

【解决方案2】：

您应该使用 Promise.all 来实现它。

function doCompare(userData,pageData){
   if (userData.likes.page_id == pageData.page_id){ 
    // do stuff 
   }
}

var promises = [apiService.getUserData,apiService.getPageData]
$q.all(promises).then(doCompare);

【讨论】：