AngularJS - 工厂、http 请求和回调答案

【问题标题】：AngularJS - Factory, http request and callbacksAngularJS - 工厂、http 请求和回调
【发布时间】：2015-05-30 12:43:06
【问题描述】：

我正在通过本教程学习 AngularJS http://curran.github.io/screencasts/introToAngular/exampleViewer/#/42

youtube 上还有一段视频，带你了解整个过程

当您打开链接时（示例 42），您会看到我卡在哪里了。

我希望你能简单地解释一下这些行发生了什么

countryApp.factory('countries', function($http){

    var cachedData;

    function getData(callback){ // *1
      if(cachedData) {
        callback(cachedData); // *1
      } else {
        $http.get('countries.json').success(function(data){
          cachedData = data;
          callback(data); // *1
        });
      }
    }

    return {
      list: getData, // *2
      find: function(name, callback){ // *3
        getData(function(data) {
          var country = data.filter(function(entry){
            return entry.name === name;
          })[0];
          callback(country); // *1
        });
      }
    };
  });

  countryApp.controller('CountryListCtrl', function ($scope, countries){
    countries.list(function(countries) { // *2
      $scope.countries = countries;
    });
  });

  countryApp.controller('CountryDetailCtrl', function ($scope, $routeParams, countries){
    countries.find($routeParams.countryName, function(country) { // *3
      $scope.country = country;
    });
  });

*1 - 什么是“回调”函数，它到底是做什么的？它是一些内置功能吗？如果不是，为什么没有函数的定义。

*2 - 在 youtube 视频中，这家伙说 "list" 是一个函数，为什么用 ":" 声明它？ CountryListCtrl（控制器）中的“列表”是否与国家/地区（工厂）中return{}中的“列表”功能相同

*3 - 与“*2”相同，但功能不同 -> find

【问题讨论】：

您和本教程的作者应该了解 Promise。这是一篇博客文章，应该解释为什么上面的代码是反模式。 blog.ninja-squad.com/2015/05/28/angularjs-promises

标签： angularjs callback

【解决方案1】：

1.

callback 只是 getData 函数的单个参数名称。在函数体内，它像函数一样使用 - 它是 callback function。

当getData被调用时，它被提供了一个回调函数：

getData(function(data) {
  // ...
});

这是在另一个函数中完成的（分配给返回对象的find 属性），该函数也有一个名为callback 的参数。不过要小心，这些是不同的变量，它们恰好具有相同的名称。它们存在于完全独立的范围内。传递给find 的回调在传递给getData 的回调中使用：

find: function(name, callback){
  getData(function(data) {          // define getData callback
    // ...
    callback(country);              // call find callback
  });
}

2.

list 是countries 工厂返回的对象的属性名称。它的值是getData 函数：

return {
  list: getData,
  // ...
}

这个对象作为countries注入到你的控制器中，所以当你在你的控制器中调用countries.list(...)时，你调用的是工厂中分配给列表属性的函数（即getData)。

3.

见#2。在控制器中，countries.find(...) 调用分配给工厂返回对象的find 属性的函数。

【讨论】：

【解决方案2】：

1) Javascript 中的 Callbacks 是用于捕获代码中启动的进程的异步性质的概念之一。基本上它是在某个进程改变其状态后调用的任何函数 - 例如完成的。更一般地说，它必须处理Promises。

更多回调示例，把握思路：

2) 和 3) - 这是工厂提供的定义方法集的方式：

当您在控制器中调用countries.list 时，它会调用前面在工厂中定义的getData 函数。简而言之，这是一种定义仅在工厂内部可用的方法 - 在这种情况下是getData，以及在外部可用的方法 - list 和@ 987654330@，用于控制器时。所以在return 语句中你有javascript 对象，你可以通过key 调用对象来获得value：

var myFactory = {
    "list" : "getData",
    "find" : 42
};
myFactory.list
//Outputs: "getData";
myFactory.find
//Outputs:42;

【讨论】：