angularjs promise详解
一、什么是Promise
Promise是对象,代表了一个函数最终可能的返回值或抛出的异常,就是用来异步处理值的。
Promise是一个构造函数,自己身上有all、reject、resolve这几个异步方式处理值的方法,原型上有then、catch等同样很眼熟的方法。
二、为什么使用Promise
有了Promise
对象,就可以把异步操作以同步操作的流程表达出来,避免了层层嵌套的回调函数。此外,Promise
对象提供了统一的接口,使得控制异步操作更加容易。
Promise
对象有以下2个特点:
1.对象的状态不受外界影响。
Promise
对象代表一个异步操作,有三种状态:Pending(进行中)
、Resolved(已完成)
和Rejected(已失败)
。只有异步操作的结果,可以决定当前是哪一种状态,任何其他操作都无法改变这个状态。
2.一旦状态改变,就不会再变,任何时候都可以得到这个结果。
Promise
对象的状态改变,只有两种可能:从Pending
变为Resolved
;从Pending
变为Rejected
。只要这两种情况发生,状态就凝固了,不会再变了,会一直保持这个结果。
三、如何创建一个Promise
先贴一段代码:
define([
'angularModule'
],function (app) {
app.register.service('httpRequestService', ['$http', '$q', function ($http, $q) {
return{
request: function (params) {
var deferred = $q.defer();
$http({
method : params.method,
url : params.url
}).success(
function (data) {
deferred.resolve(data);
}
).error(
function(data){
deferred.reject(data);
}
);
return deferred.promise;
}
}
}])
});
讲一下$q服务
q服务是AngularJS中自己封装实现的一种Promise实现。
要创建一个deferred对象,可以调用defer()方法:
var deferred = $q.defer(); //deffered上面暴露了三个方法,以及一个可以用于处理promise的promise属性。 //promise属性里面又包含了then、catch、finally三个方法
在Promise中,定义了三种状态:等待状态,完成状态,拒绝状态。
deffered API
1.deffered 对象的方法
1.resolve(value):在声明resolve()处,表明promise对象由pending状态转变为resolve。 2.reject(reason):在声明resolve()处,表明promise对象由pending状态转变为rejected。 3.notify(value) :在声明notify()处,表明promise对象unfulfilled状态,在resolve或reject之前可以被多次调用。
2.deffered 对象属性
promise :最后返回的是一个新的deferred对象 promise 属性,而不是原来的deferred对象。这个新的Promise对象只能观察原来Promise对象的状态,而无法修改deferred对象的内在状态可以防止任务状态被外部修改。
3.Promise API
当创建 deferred 实例时会创建一个新的 promise 对象,并可以通过 deferred.promise 得到该引用。
promise 对象的目的是在 deferred 任务完成时,允许感兴趣的部分取得其执行结果。
4.promise 对象的方法
1.then(errorHandler, fulfilledHandler, progressHandler):then方法用来监听一个Promise的不同状态。errorHandler监听failed状态,fulfilledHandler监听fulfilled状态,progressHandler监听unfulfilled(未完成)状态。此外,notify 回调可能被调用 0到多次,提供一个进度指示在解决或拒绝(resolve和rejected)之前。
2.catch(errorCallback) —— promise.then(null, errorCallback) 的快捷方式
3.finally(callback) ——让你可以观察到一个 promise 是被执行还是被拒绝, 但这样做不用修改最后的 value值。 这可以用来做一些释放资源或者清理无用对象的工作,不管promise 被拒绝还是解决。
q常用的几个方法:
- defer() 创建一个deferred对象,这个对象可以执行几个常用的方法,比如resolve,reject,notify等
- all() 传入Promise的数组,批量执行,返回一个promise对象
- when() 传入一个不确定的参数,如果符合Promise标准,就返回一个promise对象。
all()方法
当批量的执行某些方法时,就可以使用这个方法。有了all,你就可以并行执行多个异步操作,并且在一个回调中处理所有的返回数据。
用Promise.all来执行,all接收一个数组参数,里面的值最终都算返回Promise对象。这样,三个异步操作的并行执行的,等到它们都执行完后才会进到then里面。
那么,三个异步操作返回的数据哪里去了呢?都在then里面呢,all会把所有异步操作的结果放进一个数组中传给then,就是 下面的results。所以下面代码的输出结果就是:
var funcA = function(){
console.log("funcA");
return "hello,funA";
}
var funcB = function(){
console.log("funcB");
return "hello,funB";
}
$q.all([funcA(),funcB()])
.then(function(result){
console.log(result);
});
执行的结果:
funcA
funcB
Array [ "hello,funA", "hello,funB" ]
when()方法
when方法中可以传入一个参数,这个参数可能是一个值,可能是一个符合promise标准的外部对象。
var funcA = function(){
console.log("funcA");
return "hello,funA";
}
$q.when(funcA())
.then(function(result){
console.log(result);
});
当传入的参数不确定时,可以使用这个方法。
hello,funA
四、链式请求
通过then()方法可以实现promise链式调用,因为then方法总是返回一个新的promise。
runAsync1()
.then(function(data){
console.log(data);
return runAsync2();
})
.then(function(data){
console.log(data);
return runAsync3();
})
.then(function(data){
console.log(data);
});
function runAsync1(){
var p = new Promise(function(resolve, reject){
//做一些异步操作
setTimeout(function(){
console.log('异步任务1执行完成');
resolve('随便什么数据1');
}, 1000);
});
return p;
}
function runAsync2(){
var p = new Promise(function(resolve, reject){
//做一些异步操作
setTimeout(function(){
console.log('异步任务2执行完成');
resolve('随便什么数据2');
}, 2000);
});
return p;
}
function runAsync3(){
var p = new Promise(function(resolve, reject){
//做一些异步操作
setTimeout(function(){
console.log('异步任务3执行完成');
resolve('随便什么数据3');
}, 2000);
});
return p;
}
运行结果:
- 如何解决ajax跨域问题
- 基础篇章:React Native之 Image 的讲解
- 防守式编程的艺术
- Git 简单命令,木有高深内容
- 基础篇章:React Native之 ScrollView 的讲解
- 常用 Git 命令清单
- 如何将配置spring文件指定名字,指定位置
- 基础篇章:React Native 之 TextInput 的讲解
- Linux下 标准错误输出重定向
- CentOs6.5 修改主机名
- 基础篇章:React Native 之 View 和 Text 的讲解
- CentOs7.3 修改主机名
- 基础篇章:React Native之Flexbox的讲解(Height and Width)
- PDF.js专题
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- SAP Spartacus取cart的HTTP请求
- 记一次Netty连接池FixedChannelPool连接未释放问题的排查总结
- 神经网络中的蒸馏技术,从Softmax开始说起
- NullInjectorError R3InjectorError(AppModule)[StoreFeatureModule]
- Angular module加载的原理研究
- NullInjectorError No provider for EffectsRootModule!
- Web 中文字体性能优化实践
- Java反射到底慢在哪?不看后悔
- win10 edge 打开闪退问题
- dotnet Open XML 如何判断一份 Office 文档是否被加密
- 【项目实战】ETL 数据导入
- asp dotnet core 记一次应用拒绝响应调试 开启线程等待同步用光线程池
- 使用 EasyPOI 优雅导出Excel模板数据(含图片)
- 不用一行代码,用 API 操作数据库,你信吗
- 实战 | PyQt5制作雪球网股票数据爬虫工具