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

Question

我目前正在尝试访问 Google Books API，我已成功地直接在 Controller 中完成了该操作，但为了最佳实践，我希望将业务逻辑移至指令中。

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 在 Controller 中。

• 我收到此错误:

TypeError: Cannot read property 'all' of undefined

当我尝试在 all() 函数内进行 http 调用时，$http.get 甚至不会执行，因为我无法记录成功或错误情况，并且 $scope.books 仍然未定义。

我正在努力坚持构建一个简洁且可扩展的应用程序的最佳实践，并以应有的方式学习 Angular。

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

有人可以告诉我是否以正确的方式处理这个问题以及我的错误在哪里？

Answer 1

认为您无法理解 Promise 在 Angular 中的工作原理。 Promise 是异步的，因此您不能只执行 $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 :

.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;
    }
  };
})