javascript - 使用变量在Angular服务中调用API

我目前正在尝试访问Google Books API，该方法已成功地直接在我的控制器中完成，但是出于最佳实践的考虑，我想将业务逻辑转移到指令中。

的HTML

<form ng-submit="search(data)">
<div class="list">
  <div class="list list-inset">
    <label class="item item-input">
      <input type="text" placeholder="Search by Book Title" ng-model="data.isbn">
    </label>
  </div>
  <button class="button button-block button-positive" type="submit">
    Find Book
  </button>
</div>

在上面，我将data.isbn附加到search（）函数。

Controller.js

.controller('DashCtrl', function($scope, BookSearch) {
  $scope.search = function(data) {
    $scope.books = BookSearch(data).all();
  };
})

然后，我将该参数提供给BookSearch服务。

Service.js

.factory('BookSearch', function ($http) {

  return function(data) {
    var api = "https://www.googleapis.com/books/v1/volumes?q=" + data;
    // Simple GET request example :
    $http.get(api).
      success(function(data, status, headers, config) {
        var books = data;
      }).
      error(function(data, status, headers, config) {
        console.log(status);
      });

  }

  return {
    all: function() {
      return books;
    }
  }


});

在services.js中，我想使用搜索参数从Google访问Books API，然后编写几个函数，其中之一就是all（），可以将这些图书简单地返回到控制器中的$ scope.books。


我收到此错误：



  TypeError：无法读取未定义的属性“ all”


当我尝试在all（）函数中进行http调用时，$ http.get甚至无法执行，因为我既无法记录成功情况，也无法记录错误情况，并且$ scope.books仍未定义。

我试图遵循最佳实践来构建一个整洁且可扩展的应用程序，并以应有的方式学习角度。

我看过很多教程，但是他们只使用$ http.get调用静态JSON文件而没有用户的参数。

谁能告诉我我是否要这样做，我的错误在哪里？

最佳答案

认为您在理解诺言如何在角度工作方面遇到困难。承诺是异步的，因此您不能只执行$scope.books = BookSearch(data).all();。您需要等待BookSearch(data).all()的响应，然后在成功的回调函数中设置$scope.books。希望这个article可以帮助您

将您的服务更改为

.factory('BookSearch', function ($http) {
  return {
    all: function(data) {
      var api = "https://www.googleapis.com/books/v1/volumes?q=" + data;
      // Simple GET request example :
      return $http.get(api).
          success(function(data, status, headers, config) {
            // This is the callback function when the $http.get completes successfully so you can remove it
            return data;
          }).
          error(function(data, status, headers, config) {
            console.log(status);
          });
    }
  }
});

和您的控制器可以：

.controller('DashCtrl', function($scope, BookSearch) {
  $scope.search = function(data) {
    BookSearch(data).all().then(function(data) {
        // This is the callback function when BookSearch(data).all completes successfully
        $scope.books = data;
    }
  };
})

关于javascript - 使用变量在Angular服务中调用API，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/31715613/