Question

我正在使用工厂中的$http指令从我的AngularJS应用程序进行API调用（我已经尝试了$http和$resource，我真的不在乎我只要它返回数据就使用），当我不使用$$state来解包承诺或.then()时，我得到一个undefined对象。

这是工厂的代码：

app.service('dataService', ['$http', function($http) {
    return {
        quizQuestions: function() {
            return $http.get("http://localhost:59143/api/Questions")
                .then(function(response) {
                     console.log(response);
                     console.log(response.data);
                     console.log(response.data[0]);
                     return response;
                })
        }
    }
}])

当我从控制器调用它时，我这样做：

app.controller('QuizController', ['$scope', '$http', 'dataService', function($scope, $http, dataService) {
    dataService.quizQuestions().then(function(data) {
        $scope.quizQuestions=data;
        console.log($scope.quizQuestions);
    })
}])

此时，我甚至没有尝试将数据绑定到视图，而只是观察控制台输出。我在控制台中使用此配置得到的是：

{data: array(1), status: 200, heders: f, config: {...}, statusText: "OK"}
[{...}]
{Text: "...", *rest of object omitted for brevity but it is here*}
undefined

谁能告诉我我做错了什么？

顺便说一下，当我一起消除工厂并在控制器中输入代码时：

app.controller('QuizController',['$scope', '$http', function($scope, $http) {
    $http.get("http://localhost:59143/api/Questions").then(function(response) {
        console.log(response);
        console.log(response.data);
        console.log(response.data[0]);
        $scope.quizQuestions=response.data;
        console.log($scope.quizQuestions);
        console.log($scope.quizQuestions[0]);
    })
}])

我得到控制台输出：

{data: array (etc)}
[{...}]
{text: (rest of obj)}
[{...}]
{text: (rest of obj)}

所以它似乎是工厂里的东西？

我已经看过这些其他文章的某些方向和角度文档，但无济于事。

Answer 1

在您的服务中，您已经解开了$ http。

返回的承诺

所以要么，

...
quizQuestions: function() {
  return $http.get("http://localhost:59143/api/Questions");
}
...

OR

在你的服务中使用.then（）但返回这样的承诺，

但不要忘记将 $ q 添加为依赖，

quizQuestions: function() {
  let defer = $q.defer();
  $http.get("http://localhost:59143/api/Questions").then(function(response) {
  // ...
  defer.resolve(response); // or whatever you want to return
  }, function (error) {
    defer.reject(error);
  })
return defer.promise;
}

所以基本上在你的服务中，你打开了诺言，然后返回了一个静态值。

现在，在您的控制器中，您正在调用您的服务并尝试对不会返回承诺的函数应用 then（）。

Answer 2

data附加为response对象的属性：

app.controller('QuizController', ['$scope', '$http', 'dataService', function($scope, $http, dataService) {
    dataService.quizQuestions().then(function( ̶d̶a̶t̶a̶ response) {
        ̶$̶s̶c̶o̶p̶e̶.̶q̶u̶i̶z̶Q̶u̶e̶s̶t̶i̶o̶n̶s̶=̶d̶a̶t̶a̶;̶
        $scope.quizQuestions=response.data;
        console.log($scope.quizQuestions);
    })
}])

来自文档：

$http返回

将使用响应对象解析（请求成功）或拒绝（请求失败）的Promise。

响应对象具有以下属性：


数据 - {string|Object} - 使用转换函数转换的响应正文。

状态 - {number} - 响应的HTTP状态代码。

标题 - {function([headerName])} - 标题获取功能。

config - {Object} - 用于生成请求的配置对象。

statusText - {string} - 响应的HTTP状态文本。

xhrStatus - {string} - XMLHttpRequest的状态（complete，error，timeout或abort）。


-— AngularJS $http Service API Reference - Returns

AngularJS工厂从$ http重新定义未定义的对象

2 个答案:

`$http`返回

AngularJS工厂从$ http重新定义未定义的对象

2 个答案:

$http返回

`$http`返回