角测经http

Question

作为一个新的角度，我正在尝试构建一个登录方法，我的移动应用程序使用Ionic。

以下是我的登录视图：

<ion-view view-title="Sign-In" name="login-view">
    <ion-content class="padding">
      <div class="list list-inset">
          <label class="item item-input">
              <input type="text" placeholder="Username" ng-model="data.username">
          </label>
          <label class="item item-input">
              <input type="password" placeholder="Password" ng-model="data.password">
          </label>
      </div>
      <button class="button button-block button-positive" ng-click="login(data)">Login</button>
  </ion-content>
</ion-view>

这是我在services.js中使用$http登录的javascript -

angular.module('APP').service('AuthService', function ($q, $http, URLS) {
    var login = function (name, pw) {
        return $q(function (resolve, reject) {
            name = 'demoperson';
            pw = 'Abc';

            var dataObj = {
                grant_type: 'password',
                username: name,
                password: pw
            };
            var res = $http.post(URLS.LOGINURL, dataObj)
            .success(function (data, status, headers, config) {
                $scope.message = data;
                resolve('Login success.');
            })
            .error(function (data, status, headers, config) {
                alert("failure message: " + JSON.stringify({ data: data }));

                reject('Login Failed.');
            });
        });
    };
}); 

问题是每次请求没有击中服务器时，我都会在错误回调中结束，而不会出现任何错误。我无法看到发生了什么错误，Fiddler没有捕获错误。

有什么明显的遗漏吗？

Answer 1

希望您的AuthService不仅仅是一个登录方法。尝试采用以下方法：

angular.module('APP')
   .factory('AuthService', function ($q, $http, URLS) {
       var Auth = {
          login: function (name, pw) {
             var dfd = $q.defer();
             var dataObj = {
                 grant_type: 'password',
                 username: name,
                 password: pw
             };
             $http.post(URLS.LOGINURL, dataObj)
                  .then(function (res) {
                      var handled = 'handle response here';
                      dfd.resolve(handled);
                  }, function (err) {
                      dfd.reject({error: err});
                  });
             return dfd.promise;
          },
          logout: logoutMethod
       };
       return Auth;
    };
}); 

Answer 2

你不需要使用$q. $http已经有了内置的承诺.

    $http({
        method: "get",
        url: "/something",
        data: {...}
    }).success(function (data, status, headers, config) {
        ...
    }).error(function (data, status, headers, config) {
        ...
    });

另外，您的控制器在$scope上有一个名为login的方法吗？从您的示例中可以看出，ng-click="login(data)"将调用您的var login = function (name, pw)函数。此外，登录调用传递一个参数，您的服务登录使用两个参数。那里发生了什么事？

Answer 3

这应该是一项工厂服务：

angular.module('APP').factory('AuthService', function ($q, $http, URLS) {
    var login = function (name, pw) {
        return $q(function (resolve, reject) {
            name = 'demoperson';
            pw = 'Abc';

            var dataObj = {
                grant_type: 'password',
                username: name,
                password: pw
            };
            var res = $http.post(URLS.LOGINURL, dataObj)
            .success(function (data, status, headers, config) {
                //$scope.message = data;
                //this should be done from the returned promise.
                resolve(data);
            })
            .error(function (data, status, headers, config) {
                alert("failure message: " + JSON.stringify({ data: data }));

                reject('Login Failed.');
            });
        });
    };
    return login;
});

当然，还需要将依赖项附加到$scope，这样就可以从表单中执行login()操作。或者让控制器方法来代替。

另外，你可能想：

var login = function (obj) {
   obj.username = obj.username || 'demoperson';
   obj.password = obj.password || 'Abc';

   var dataObj = {
            grant_type: 'password',
            username: obj.username,
            password: obj.password
        };

如果您传递函数，则窗体上有一个对象。

控制器示例：

angular.module('APP').controller('myController', ['$scope', 'AuthService', function($scope, login){
    $scope.login = function(data){
        login(data).then(function(message){
            $scope.message = message;
        });
    };
});