如何正确使用回调来使用AngularJS中的API

Question

我的问题是从API中消耗数据并在将其发送到控制器之前进行有效建模。我有一个从API获取用户数据的工厂。这个给我特别麻烦的函数是provideAllUserData函数。

这里是我的services.js

.factory('userDataService', function ($resource, settings){ 

     var dataService = {}; 

     var baseUrl = settings.baseUrl; 

     dataService.getUsers = function() { 
      return $resource(baseUrl + 'user').query(); 
     }; 

     dataService.getUserById = function (user) { 
      return $resource(baseUrl + 'user/:id').get(
       { 
        id : user 
       } 
      ) 
     } 

     dataService.provideAllUserData = function (user) { 

      dataService.userData = {}; 
      var userData = dataService.userData; 

      var updateUserData = function(callback){ 

       dataService.getUserById(user).$promise.then(function (res) { 
        var fetchUserData = res; 
        userData['id'] = fetchUserData.id; 
        userData['name'] = fetchUserData.name; 
        userData['quizzes'] = fetchUserData.quizzes; 
        dataService.userData = userData; 
        callback(); 

       }); 
      } 

      var returnData = function() { 
       //console.log(dataService.userData); 
       console.log(dataService.userData) 

      } 
      updateUserData(returnData); 
     } 

    return dataService; 

    }) 

看起来这应该是工作，如果我CONSOLE.LOG回调，它返回我想要的对象。但是，当我尝试将其记录在控制器中时，它将返回一个未定义的值。

下面是我的控制器中的相关行。

console.log(userDataService.provideAllUserData(1)); 

请让我知道如果我这样做完全错误，或者你会做不同的事情。我之前没有使用过Angular，所以它是一种学习即兴的情况。

Answer 1

您希望异步代码以同步方式运行。

console.log(userDataService.provideAllUserData(1)); 

这是行不通的。 Asynchnonicity是contageous，它也会影响调用代码。

首先，降你的那个回调，并且只使用承诺

dataService.provideAllUserData = function (user) { 

    dataService.userData = {}; 
    var userData = dataService.userData; 

    // "then" returns a promise. Meaning, multiple thens can be chained. 
    return dataService.getUserById(user).then(function (res) { 
     var fetchUserData = res; 
     userData['id'] = fetchUserData.id; 
     userData['name'] = fetchUserData.name; 
     userData['quizzes'] = fetchUserData.quizzes; 
     dataService.userData = userData; 

    }); 
    } 

然后，在调用代码：

userDataService.provideAllUserData(1).then(function(data) { 
    console.log(data); 
});