javascript 使用命名的成功/错误回调在 angularJS 中声明承诺

declaring a promise in angularJS with named success/error callbacks

提问by Nuno_147

I am trying to do something very similar to the $http service. From my understanding $http return a promise object.

我正在尝试做一些与 $http 服务非常相似的事情。根据我的理解 $http 返回一个 promise 对象。

When using it the syntax is :

使用它时的语法是：

$http(...).success(function(data)) {
   //success callback
}).error(function(data)) {
   //error callback
})

I would like to do just the same but consider my API is GetUserProfile, so I wish to have the syntax :

我想做同样的事情，但考虑到我的 API 是 GetUserProfile，所以我希望使用以下语法：

GetUserProfile(...).success(function(data) {
   // success callback
}).error(function(data)) {
   // error callback
})

how can I accomplish that using a promise ?

我怎样才能使用承诺来实现呢？

回答by JB Nizet

The nice thing with open-source is that you can read the source. Here's how the $http service does it:

开源的好处是你可以阅读源代码。以下是 $http 服务的工作方式：

  promise.success = function(fn) {
    promise.then(function(response) {
      fn(response.data, response.status, response.headers, config);
    });
    return promise;
  };

  promise.error = function(fn) {
    promise.then(null, function(response) {
      fn(response.data, response.status, response.headers, config);
    });
    return promise;
  };

回答by katranci

You need to use the $q service and create and return your own promise in GetUserProfile:

您需要使用 $q 服务并在 GetUserProfile 中创建并返回您自己的承诺：

function GetUserProfile() {
    var deferred = $q.defer();
    var promise = deferred.promise;

    // success condition
    if (!true) {
        deferred.resolve('data');
    // error condition
    } else {
        deferred.reject('error');
    }

    promise.success = function(fn) {
        promise.then(fn);
        return promise;
    }

    promise.error = function(fn) {
        promise.then(null, fn);
        return promise;
    }

    return promise;
}

GetUserProfile()
    .success(function(data) {
        console.log(data);
    })
    .error(function(error) {
        console.error(error);
    });

回答by Eric Chen

You don't need change source code. Angular provide a way to change any service in angular include $q.

您不需要更改源代码。Angular 提供了一种在 angular 中更改任何服务的方法，包括 $q。

$provide.decorator is perfect for your requirement here is my code.

$provide.decorator 非常适合您的要求，这是我的代码。

put it at app.module('...').config

把它放在 app.module('...').config

$provide.decorator('$q', function($delegate) {
  function httpResponseWrapper(fn) {
    return function(res) {
      if (res.hasOwnProperty('data') && res.hasOwnProperty('status') && res.hasOwnProperty('headers') && res.hasOwnProperty('config') && res.hasOwnProperty('statusText')) {
        return fn(res.data, res.status, res.headers, res.config, res.statusText);
      } else {
        return fn(res);
      }
    };
  };
  function decorator(promise) {
    promise.success = function(fn) {
      return decorator(promise.then(httpResponseWrapper(fn)));
    };
    promise.error = function(fn) {
      return decorator(promise.then(null, httpResponseWrapper(fn)));
    };
    return promise;
  };
  var defer = $delegate.defer;
  $delegate.defer = function() {
    var deferred = defer();
    decorator(deferred.promise);
    return deferred;
  };
  return $delegate;
});