angularjs 1.x $q模块使用

什么是$q

$q是angularjs1.x中内置服务，在需要使用时可以注入它。

angular.module('app').controller('myController', function myController($q){// further operation..
});

为什么使用$q

$q的使用目的是为了提供更好的异步编程解决方案。

来看看$q的api:

$q.defer()

$q.defer执行时返回一个延迟对象(defer)。延迟对象有三种状态: resolve(解决), reject(拒绝), notify(通知)。

同时这三种状态在defer对象下各有一个同名方法，用于改变defer对象的状态值。

一旦状态更改成resolve或reject了，就无法改回来了，这点要注意。

同时，在执行defer.resolve(), defer.reject(), defer.notify()时，可以传入一个参数，这个参数将成为

对应回调函数的参数。看个例子

var defer = $q.defer();
var myPic = new Image();myPic.onload = function(){defer.resolve(myPic);
}myPic.onerror = function(){defer.reject();
}defer.promise.then(function(img){console.log('download complete');  // 这里可以对参数img进行操作
}, function(reason){console.log('network error');
});

myPic.src = '/somefile/someimage';

这个例子中，对image的加载做了一些封装。

当图片加载完成或加载失败，会在控制台输出一些提示。

可能在这个例子中，$q发挥的作用并不大，但是放到一些特殊的场景，

它将发挥奇效。

promise

promise(承诺)对象是defer下的属性，它有一些方法处理回调函数，当defer对象的状态变更时，

promise会执行相应的回调。

promise.then(resolveCallback, rejectCallback, notifyCallback)

then方法的三种回调分别对应promise的三种状态的处理。

返回一个promise。也就是说，then方法可以应用链式写法。

注意的是，前面then方法中的resolveCallback的返回值，将会成为后面then方法的resolveCallback的参数。(其他同理)

angular.module('app').controller('myController', function myController($q){var defer1 = $q.defer();defer1.promise.then(function resolveCallback(result){console.log('resolve callback: ' + result);}, function rejectCallback(reason){console.log('reject回调不会执行');}, function notifyCallback(message){console.log('notify callback: ' + message);});defer1.notify('promise got message');defer1.resolve('promise resolve');
});// notify callback: promise got message
// resolve callback: promise resolve

nofity不限制调用次数(应用于进度更改通知);

promise.catch(rejectCallback)

catch方法是then方法的一个语法糖，相当于promise.then(null, rejectCallback)。

promise.finally(callback)

在一些旧浏览器，finally是保留字，你可能要这么调用它: promise['finally'](callback)。

$q.reject(value)

返回一个promise。该promise的状态是reject。

也就是说，返回值会马上执行链式操作中的reject的处理方法，如：

$q.reject(reason).then(function(result){console.log('this would never implement');
}, function(reason){console.log('promise reject! reason: ' + reason);
});// or

$q.reject(reason).catch(function(reason){console.log('reject reason: ' + reason);
});

$q.when(value)

when方法用于封装一个可能是defer对象的值。返回一个promise对象。

如果输入值是promise时，将返回一个promise，当它状态改变时执行后续的链式操作。

如果输入的是一个普通值，也返回一个promise，并且该promise的状态是resolve。换句话说，后面的链式操作会马上跑起来。

你也可以理解为$q.when 和 $q.reject 是一对对应的方法。

$q.all(promises)

all方法用于将多个promise绑定称为单个的promise。

它接受一个promise数组作为参数，返回一个promise对象。

当所有的promise都变成resolve状态时，才会执行回调。

参考：https://www.bennadel.com/blog/2735-q-when-is-the-missing-q-resolve-method-in-angularjs.htm

转载于:https://www.cnblogs.com/ohmyladygaga/p/6236408.html

angularjs 1.x $q模块使用相关推荐

[AngularJS] “多重路由”嵌套模块——AngularJS“路由”嵌套学习资料教程
这是小编的一些学习资料,理论上只是为了自己以后学习需要的,但是还是需要认真对待的以下内容仅供参考,请慎重使用学习 1.AngularJS路由嵌套 Angularjs本身自带路由模块,可以满足通过不同 ...
AngularJS学习之$q和promise介绍
引用: 下面我们通过讲解$q的API让你更多的了解promise异步编程模式.$q是做为angularjs的一个服务而存在的,只是对promise异步编程模式的一个简化实现版,源码中剔除注释实现代码 ...
Q++模块插件v1.3.8版本更新
功能多多,具备禁言,踢人,点赞/自动调用情迁工具箱朗读语音抢语音红包. 支持发口令红包.秒抢红包.延时抢红包.敏感词没抢到不发口令/ 支持防止撤回,防止视频骚扰,防拉群拉讨论组骚扰,可自动退出讨论组, ...
PhpStorm 对 AngularJS 的支持
非常喜爱用AngularJS来构建web应用程序的前端吗? PhpStorm 使得在其上进行 AngularJS 相关的工作同其它得到IDE支持的编程语言的工作一样容易! AD:51CTO首届中国AP ...
带有Upida/Jeneva的ASP.NET MVC单页应用程序（前端/AngularJS）
目录介绍背景基本结构 JS控制器 HTML视图查看容器结论参考下载源3.4 MB 在Codeplex上下载最新版本和更多示例参见工作示例介绍在上一篇文章中,我演示了如何使用WebA ...
AngularJS 的异步服务测试与Mocking
测试 AngularJS 的异步服务最近,在做项目时掉进了 AngularJS 异步调用 $q 测试的坑中,直接躺枪了.折腾了许久日子,终于想通了其中的道道,但并不确定是最佳的解决方案,最后还是决定 ...
AngularJs ui-router 路由的简单介绍
之前有写过一篇关于Angular自带的路由:ngRoute.今天来说说Angular的第三方路由:ui-router.那么有人就会问:为什么Angular有了自带的路由,我们还需要用ui-router ...
Polymer元素和AngularJS指令有什么区别？
本文翻译自:What is the difference between Polymer elements and AngularJS directives? On the Polymer Getti ...
angular-oauth2 —— NG 的 OAuth2 认证模块
angular-oauth2 详细介绍 angular-oauth2 是 AngularJS 的 OAuth2 认证模块,使用 ES6 编写. 使用方法: 引入 js 库: <script sr ...

angularjs 1.x $q模块使用

angularjs 1.x $q模块使用相关推荐

最新文章

热门文章