如果我传递 api，Angular Service 不会返回任何值 [重复]

Question

我已经用 angular 编写了服务。在浏览器控制台中，数据即将到来，但作为回报，我没有得到 [object Object]；

/// <reference path="angular.min.js" />
var app = angular.module("myapp", []);
app.service("myservice", function ($http) {
    this.myfun = function () {
        var x;
        $http.get("http://localhost:41173/api/AngularTest/login_valid").success(function (response) {
            console.log("all get data",response);
            x = response.data
        }).error(function (err) {
            console.log("all error ", err);
        });
        debugger;
        return x;
    }
});
app.controller("myctrl", function ($scope, $http, myservice) {
    $scope.transform = function (input) {
        $http.get("http://localhost:41173/api/AngularTest/login_valid").then(function (response) {

            if (response.data == true) {
                $scope.out = myservice.myfun();
            }
            else {
                $scope.out = "Fail";
            }
        });

    }
});

Answer 1

您需要使用 Promise。它们是异步回调，你不能从它们返回值，只能返回一个 Promise，它可以被解析。也使用.then() 而不是.success()。下面是它的样子：

var app = angular.module("myapp", []);
app.service("myservice", function($http) {
  this.myfun = function() {
    return $http.get("http://localhost:41173/api/AngularTest/login_valid");
  }
});
app.controller("myctrl", function($scope, $http, myservice) {
  $scope.transform = function(input) {
    $http.get("http://localhost:41173/api/AngularTest/login_valid").then(function(response) {
      if (response.data == true) {
        myservice.myfun().
        then(function(res) {
          $scope.out = res.data;
        }, function(err) {
          console.log("Error:", err)
        })
      } else {
        $scope.out = "Fail";
      }
    });
  }
});

Answer 2

这不是异步服务的工作方式。您必须返回承诺并在控制器中管理数据。

  this.myfun = function() {
    return $http.get(API).
    then(function(response) {
      return response.data;
    }, function(error) {
      return error;
    });
  };

然后在控制器中

app.controller("myctrl", function ($scope, $http, myservice) {
    $scope.transform = function (input) {
        $http.get("OTHER API").then(function (response) {

            if (response.data == true) {
              myservice.myfun().then(function (data) {
                $scope.out = data;
              },
              function(error) {
                $scope.out = error;
              });
            }
            else {
                $scope.out = "Fail";
            }
        });

    }
});

确保 response.data 确实返回布尔值。

查看您的控制器，您似乎想要链接 http 调用。

将每个 http 请求放在一个服务中并使用 async await 将它们链接起来会更好。

只要你有正确的 polyfill：

async transform = function(input) {
  var firstData = await myservice.firstCall();
  firstData && await myservice.myfun();
}

也尝试使用controllerAs 清理过度使用 $scope