如何使用 .success 和 .error 在 Angularjs 中扩展 $q 承诺

     2023-02-21     115

关键词:

【中文标题】如何使用 .success 和 .error 在 Angularjs 中扩展 $q 承诺【英文标题】:How can I extend $q promise in Angularjs with a .success and .error 【发布时间】:2013-05-23 17:29:34 【问题描述】:

我在 AngularJS 的自定义服务中编写了这个小代码。

为我服务:

        var deferred = $q.defer();
        var promise = deferred.promise;

        deferred.resolve('success');
        deferred.reject('error');

        /* Handle success and error */
        promise.success = function(fn) 

            promise.then(function(response) 

                fn(response);

            );

            return promise;
        ;

        promise.error = function(fn) 

            promise.then(null, function(response) 

                fn(response);

            );

            return promise;
        ;

在我的控制器中:

        promiseService.myPromise()
            .success(function(data)

                $scope.success= data;

            )
            .error(function(data)

                $scope.error = data;

            );

我只是从承诺($q 服务)中处理成功和错误。我在很多其他服务中都需要此代码,因此我将直接使用自定义扩展 $q 服务。

所以我想在我的服务中使用这样的东西:

    var deferred = myPromiseService.$qCustom.defer();
    var promise = deferred.promise;

    deferred.resolve('success');
    deferred.reject('error');

    return promise;

有什么想法吗?我找到了一些在 Angularjs 中扩展过滤器的解释,我的问题是找到扩展 $q 的所有功能并添加我的自定义的好方法。

我从类似的东西开始,开箱即用地处理 $q :

angular.module('myApp').service('myPromiseService', function($q)

  $qCustom = $q;  

);

【问题讨论】:

【参考方案1】:

这是一个完整的解决方案,从@jessegavin 停止的地方开始。

var myApp = angular.module("myApp", []);

myApp.config(function ($provide) 

  $provide.decorator('$q', function ($delegate) 
    var defer = $delegate.defer;
    $delegate.defer = function () 
      var deferred = defer();
      deferred.promise.success = function (fn) 
        deferred.promise.then(function(response) 
          fn(response.data, response.status, response.headers);
        );
      return deferred.promise;
      ;
      deferred.promise.error = function (fn) 
        deferred.promise.then(null, function(response) 
          fn(response.data, response.status, response.headers);
        );
        return deferred.promise;
      ;
      return deferred;
    ;
    return $delegate;
  );

);

【讨论】:

【参考方案2】:

如果你想改变 Angular 注入的东西的默认行为,你可以使用$provide 服务上的decorator() 方法。

var myApp = angular.module("myApp", []);

myApp.config(function ($provide) 
  $provide.decorator("$q", function($delegate) 
    // The $delegate argument here refers to the $q service.

    $delegate.defer = function() 
      alert("You just tried to call defer()!");
    ;

    // Now, every time angular provides an instance of $q via
    // injection, it will return your customized version of $q.

    return $delegate;
  );
);

在http://plnkr.co/edit/RuZF2cGkVHwlu7NIhxEZ?p=preview查看上面的例子

至于修改$q添加成功和错误功能,我目前不确定。但我很确定这就是你想要做的地方。

【讨论】:

【参考方案3】:

恕我直言,@jessegavin 对 $q 的装饰并不完美,它不应该在 success&error 函数中返回 origin 承诺。它会失去扁平化回调金字塔的特性。

并且它不能将响应数据拆分为成功和错误函数 $httpPromise 剂量。

例如

//can't do this..
somePromise.success(function()
  return $http.get(...)//another primise
).success(function(data)
  //data from $http.get..
)

这是我的版本,它会识别 http 响应并返回下一个承诺。 让你自己的 $q 具有与 $httpPromise 相同的行为

$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;
);

【讨论】:

也许我的心理 JS 引擎出现了故障,但在我看来,这与 HttpPromise 的行为不同。 HttpPromise should return the original promise,这将返回一个允许链接的新承诺。

Angular HttpPromise:`success`/`error` 方法和`then` 的参数之间的区别

】AngularHttpPromise:`success`/`error`方法和`then`的参数之间的区别【英文标题】:AngularHttpPromise:differencebetween`success`/`error`methodsand`then`\'sarguments【发布时间】:2013-04-2909:55:26【问题描述】:根据AngularJSdoc,对$http的调用返回以下内容... 查看详情

tp页面跳转success和error

 转载 2015年09月04日13:50:2211524TP 系统的ThinkController类内置了两个跳转方法success和error,用于页面跳转提示,而且可以支持ajax提交。 [php] viewplain copy $User = M(‘User‘); //实例化User对象& 查看详情

表单提交fastadminform(代码片段)

...绑定总表单事件Form.events.bindevent(form))Form.api.bindevent(form,success,error,submit);4、提交//提交表单的方法,在表单完成验证后进行提交Form.api.submit(form,success,error,submit);例子:Form.api.bindevent($("form[role=form]"),function(data,ret)//如果我们需要... 查看详情

promise

...异步的地方是ajax交互。比如在es5时代,jQuery的ajax的使用success来完成异步的:$.ajax(url:‘/xxx‘,success:()=>,error:()=>)这种方法可以清楚的让读代码的人明白那一部分是Ajax请求成功的回调函数和失败的回调函数,但是问题来了,... 查看详情

ruby on rails flash 消息 - :alert :error :notice 和 :success?

】rubyonrailsflash消息-:alert:error:notice和:success?【英文标题】:rubyonrailsflashmessages-:alert:error:noticeand:success?【发布时间】:2011-11-2613:23:09【问题描述】:在我的几个控制器中,我有重定向/闪烁消息redirect_toproducts_url,:notice=>"messagehere... 查看详情

tp页面跳转success和error以及重定向功能

TP 系统的ThinkController类内置了两个跳转方法success和error,用于页面跳转提示,而且可以支持ajax提交。 $User=M(‘User‘);//实例化User对象$result=$User->add($data);if($result){//设置成功后跳转页面的地址,默认的返回页面是$_SERVER[... 查看详情

如何在不使用表单控件的情况下启用和使用 mat-error

】如何在不使用表单控件的情况下启用和使用mat-error【英文标题】:howtoenableandusemat-errorwithoughusingformcontrol【发布时间】:2022-01-2404:25:11【问题描述】:我正在使用ngModel,我想使用mat-error,但如果您不使用表单,它就不起作用,... 查看详情

FindWindowA() 返回 0,当我使用 GetLastError() 检查错误代码时,它也是 0 (ERROR_SUCCESS)

...回0,当我使用GetLastError()检查错误代码时,它也是0(ERROR_SUCCESS)【英文标题】:FindWindowA()returns0andwhenichecktheerrorcodewithGetLastError()it\'salso0(ERROR_SUCCESS)【发布时间】:2020-04-2109:05:11【问题描述】:这是我正在编写的dll注入代码的一部... 查看详情

解析-使用云代码发送推送通知(swift)(代码片段)

...annels:["News"],data:title:"HellofromtheCloudCode",alert:"Back4Approcks!",,success:function()//Pushwassuccessfulresponse.success("pushsent");console.log("Success:pushsent");,error:function(error)//Pushwasunsucessfulresponse.error("errorwithpush:"+error);console.log("Error:"+error);,useMasterKey:true... 查看详情

使用 FormView 和 ModelForm 时如何在模板上获取 non_field_errors

】使用FormView和ModelForm时如何在模板上获取non_field_errors【英文标题】:Howtogetnon_field_errorsontemplatewhenusingFormViewandModelForm【发布时间】:2014-08-1319:56:42【问题描述】:我正在使用FormView和ModelForm来处理注册表单。如果电子邮件重复... 查看详情

使用 javascript 遍历数组 [重复]

...中取出这些值,也无法更改数组的完成方式。//Php$errors[\'success\']=false;$errors[\'#e 查看详情

Ktor 客户端:使用代码 200 处理错误

...:我们的服务器使用代码200和以下正文响应业务错误:"success":false,"error_code":1,"error_text":"Errormessage"如何在响应中检测到此主体并为其抛出异常?【问题讨论】:【参考方案1】:您可以为此 查看详情

如何使用 XPath 检查 <Success /> 节点是不是存在

】如何使用XPath检查<Success/>节点是不是存在【英文标题】:HowtouseXPathtocheckif<Success/>nodeexists如何使用XPath检查<Success/>节点是否存在【发布时间】:2012-08-3015:14:55【问题描述】:我正在使用PHP和XPath连接到基于XML的远... 查看详情

关于回调函数

...过于jquery的ajax回调了吧。  varerror=function(){...}varsuccess=function(){...}$.ajax().then(success,error) error和success称为回调函数。上面我们将su 查看详情

javascript封装大全(代码片段)

...封装//使用该封装需注意//Ajax(method(默认GET),url(网址必传),success(res)(成功时数据处理函数必传),error(res)(失败时数据处理函数),data(网址中qurey部分用对象形式存储默认为空))//使用ES6语法classAjax//解构传入的值默认参数为空constructor(m... 查看详情

在获取模型对象时如何使用 try 和 except?

...如果数据库为空,那么我需要使用try和except。if(txStatus==\'SUCCESS\'):order=Order.object 查看详情

如何使用并区分promise.all和promise.race?(代码片段)

...olve(‘成功了‘)3)45letp2=newPromise((resolve,reject)=>6resolve(‘success‘)7)89letp3=Promse.reject(‘失败‘)1011Promise.all([p1,p2]).then((result)=>12console.log(result)//成功了13).catch((error)=>14console.log(error)15)1617Promise.all([p1,p3,p2]).then((result)=>18console.l... 查看详情

jqueryajax后台响应成功,返回正确json但不执行success方法,执行error的问题

...且返回了预想的json字符串。但执行的是error方法,不执行success方法。在网上查了一下,才发现是后台页面返回的json字符串格式不对,我的错误是冒号“:”写成了逗号“,”。就会出现ajax前端的js代码直接调用error... 查看详情