如何制作从 Behance API 检索数据的 AngularJS 服务？答案

【问题标题】：How to make an AngularJS service that will retrieve data from Behance API?如何制作从 Behance API 检索数据的 AngularJS 服务？
【发布时间】：2014-10-21 17:57:35
【问题描述】：

我一直在尝试创建一个 AngularJS 服务，该服务将从行为配置文件中获取数据。

我正在注入 $http 和 $q 服务以使我能够向 Behance API 发出请求。我现在使用文字字符串作为 url 参数，看看如何解决我的问题。稍后我将重构我的代码以使其动态化。

behance.js 包含与我的 Angular 应用相关的服务的文件。

'use strict';

angular
  .module('angularPortfolioApp')
  .factory('behanceUserData', ['$q', '$http',
    function($q, $http) {
      var service = {
        getUser: function(username) { //ignore the parameter in this function I plan on implementing that after I have my question resolved.
          var d = $q.defer();
          $http({
            method: 'JSONP',
            url: 'https://www.behance.net/v2/users/USERNAME?api_key=XXX' 
          }).success(function(data) {
              d.resolve(data);
          }).error(function(reason) {
              d.reject(reason);
          });
          return d.promise;
        }
      };
      return service;
    }
]);

app.js 声明我的 Angular 应用程序所需的依赖项。

'use strict';
angular.module('angularPortfolioApp', ['ngResource']);

在 Chrome 开发工具控制台中，我收到 Uncaught SyntaxError: Unexpected token : 错误

在做了一些研究之后，我确实找到了一篇文章，指出 Angular 确实在 JSONP 请求的末尾添加了“:1”。

我仍然无法理解如何从 API （尤其是 behance API）获得成功的请求。我仍然可以在 Web 开发工具中看到结果，但由于我放入 .success 块中的内容从未运行，因此我将不胜感激。

同样的代码也可以在这个plunkerhttp://plnkr.co/edit/RZ42Y38BwKZBF2pGZJSR中看到

【问题讨论】：

我在你的 plunker 中没有看到任何错误。
请看我的回答。

标签： javascript angularjs

【解决方案1】：

我已经更新了你的plunker。

您可以使用以下代码从 Behance API 获取任何数据：

angular.module('angularPortfolioApp', ['ngResource']);

angular
    .module('angularPortfolioApp')
    .factory('behanceUserData', ['$q', '$http',
        function($q, $http) {
            var service = {
                getUser: function(username) {
                    var d = $q.defer();
                    $http({
                        method: 'GET',
                        url: 'https://www.behance.net/v2/users/USERNAME?api_key=XXX' 
                    }).success(function(data) {
                        console.log(data);
                        d.resolve(data);
                    }).error(function(reason) {
                        console.log(reason);
                        d.reject(reason);
                    });
                    return d.promise;
                }
            };
            return service;

        }
    ])
    .controller('MyController', function($scope, behanceUserData){
         $scope.getUser = function(){
            $scope.user = behanceUserData.getUser();
         }
      }
    );

在你看来：

<div ng-controller="MyController">
  <button ng-click="getUser()">Get</button>
  <br/>
  {{user | json}}
</div>

Plunker

但您应该更改此 URL：'https://www.behance.net/v2/users/USERNAME?api_key=XXX'，因为目前它不起作用。

【讨论】：

感谢 Artyom 的回复。我尝试了您在 plunker 和我的本地环境中建议的更改，但它们不起作用。这是我将用户名和 api 键更改为适当的值。我已检查我使用的 URL 是否正确。返回的是一个未定义的值。你有什么建议吗？
@gioducci1 我已经更新了答案和 plunker。请看我的更新。我已将方法类型从“JSONP”更改为“GET”。如果您获得正确的 URL，这应该可以工作。
这并不成功。使用 GET 方法，我得到“请求的资源上不存在“No 'Access-Control-Allow-Origin' 标头。响应的 HTTP 状态代码为 403。”错误块将“null”的值打印到控制台。 Behance 确实有一个javascript helper library，也许我需要将它合并，以便将 HTTP 请求与他们的特定 API 一起使用。虽然我想让它尽可能苗条，并学会第一次做对。

【解决方案2】：

我能够通过使用以下工厂将数据导入我的模型。

.factory('behanceUserData', ['$q', '$http', 'BEHANCE_CLIENT_ID',
   function($q, $http, BEHANCE_CLIENT_ID) {
     return {
            getUser: function(username) {
                var q = $q.defer();
                $http({
                    method: 'jsonp',
                    url: 'http://www.behance.net/v2/users/' + username,
                    params: {
                      client_id: BEHANCE_CLIENT_ID,
                      callback: 'JSON_CALLBACK'
                    } 
                }).success(function(data) {
                  console.log(data);
                  q.resolve(data);
                });
                return q.promise;
            }
        }; 

    } 
])

【讨论】：