JS - Promise使用随笔
一、promises相关概念
1,then()方法介绍
- 成功回调
- 失败回调
- 前进回调(规范没有要求包括前进回调的实现,但是很多都实现了)。
2,Promise对象状态
- Pending(进行中、未完成的)
- Resolved(已完成,又称 Fulfilled)
- Rejected(已失败)。
4,目前支持Promises/A规范的库
- Q:可以在NodeJS 以及浏览器上工作,与jQuery兼容,可以通过消息传递远程对象。
- RSVP.js:一个轻量级的库,它提供了组织异步代码的工具。
- when.js:体积小巧,使用方便。
- NodeJS的Promise
- jQuery 1.5:据说是基于“CommonJS Promises/A”规范
- WinJS / Windows 8 / Metro
二、使用promises的优势
1,解决回调地狱(Callback Hell)问题
1
2
3
4
5
6
7
8
9
10
11
12
|
firstAsync( function (data){
//处理得到的 data 数据
//....
secondAsync( function (data2){
//处理得到的 data2 数据
//....
thirdAsync( function (data3){
//处理得到的 data3 数据
//....
});
});
});
|
(2)如果使用 promises 的话,代码就会变得扁平且更可读了。前面提到 then 返回了一个 promise,因此我们可以将 then 的调用不停地串连起来。其中 then 返回的 promise 装载了由调用返回的值。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
firstAsync()
.then( function (data){
//处理得到的 data 数据
//....
return secondAsync();
})
.then( function (data2){
//处理得到的 data2 数据
//....
return thirdAsync();
})
.then( function (data3){
//处理得到的 data3 数据
//....
});
|
2,更好地进行错误捕获
(1)比如下面代码我们使用 setTimeout 模拟异步操作,在其中抛出了个异常。但由于异步回调中,回调函数的执行栈与原函数分离开,导致外部无法抓住异常。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
function fetch(callback) {
setTimeout(() => {
throw Error( '请求失败' )
}, 2000)
}
try {
fetch(() => {
console.log( '请求处理' ) // 永远不会执行
})
} catch (error) {
console.log( '触发异常' , error) // 永远不会执行
}
// 程序崩溃
// Uncaught Error: 请求失败
|
(2)如果使用 promises 的话,通过 reject 方法把 Promise 的状态置为 rejected,这样我们在 then 中就能捕捉到,然后执行“失败”情况的回调。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
function fetch(callback) {
return new Promise((resolve, reject) => {
setTimeout(() => {
reject( '请求失败' );
}, 2000)
})
}
fetch()
.then(
function (data){
console.log( '请求处理' );
console.log(data);
},
function (reason, data){
console.log( '触发异常' );
console.log(reason);
}
);
|
当然我们在 catch 方法中处理 reject 回调也是可以的。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
function fetch(callback) {
return new Promise((resolve, reject) => {
setTimeout(() => {
reject( '请求失败' );
}, 2000)
})
}
fetch()
.then(
function (data){
console.log( '请求处理' );
console.log(data);
}
)
. catch ( function (reason){
console.log( '触发异常' );
console.log(reason);
});
|
第二部分:
JS - Promise使用详解2(ES6中的Promise)
2015年6月, ES2015(即 ECMAScript 6、ES6) 正式发布。其中 Promise 被列为正式规范,成为 ES6 中最重要的特性之一。
1,then()方法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
//做饭
function cook(){
console.log( '开始做饭。' );
var p = new Promise( function (resolve, reject){ //做一些异步操作
setTimeout( function (){
console.log( '做饭完毕!' );
resolve( '鸡蛋炒饭' );
}, 1000);
});
return p;
}
//吃饭
function eat(data){
console.log( '开始吃饭:' + data);
var p = new Promise( function (resolve, reject){ //做一些异步操作
setTimeout( function (){
console.log( '吃饭完毕!' );
resolve( '一块碗和一双筷子' );
}, 2000);
});
return p;
}
function wash(data){
console.log( '开始洗碗:' + data);
var p = new Promise( function (resolve, reject){ //做一些异步操作
setTimeout( function (){
console.log( '洗碗完毕!' );
resolve( '干净的碗筷' );
}, 2000);
});
return p;
}
|
(2)使用 then 链式调用这三个方法:
1
2
3
4
5
6
7
8
9
10
|
cook()
.then( function (data){
return eat(data);
})
.then( function (data){
return wash(data);
})
.then( function (data){
console.log(data);
});
|
当然上面代码还可以简化成如下:
1
2
3
4
5
6
|
cook()
.then(eat)
.then(wash)
.then( function (data){
console.log(data);
});
|
(3)运行结果如下:
2,reject()方法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
//做饭
function cook(){
console.log( '开始做饭。' );
var p = new Promise( function (resolve, reject){ //做一些异步操作
setTimeout( function (){
console.log( '做饭失败!' );
reject( '烧焦的米饭' );
}, 1000);
});
return p;
}
//吃饭
function eat(data){
console.log( '开始吃饭:' + data);
var p = new Promise( function (resolve, reject){ //做一些异步操作
setTimeout( function (){
console.log( '吃饭完毕!' );
resolve( '一块碗和一双筷子' );
}, 2000);
});
return p;
}
cook()
.then(eat, function (data){
console.log(data + '没法吃!' );
})
|
运行结果如下:
1
2
3
4
|
cook()
.then( null , function (data){
console.log(data + '没法吃!' );
})
|
3,catch()方法
(1)它可以和 then 的第二个参数一样,用来指定 reject 的回调
1
2
3
4
5
|
cook()
.then(eat)
. catch ( function (data){
console.log(data + '没法吃!' );
});
|
(2)它的另一个作用是,当执行 resolve 的回调(也就是上面 then 中的第一个参数)时,如果抛出异常了(代码出错了),那么也不会报错卡死 js,而是会进到这个 catch 方法中。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
//做饭
function cook(){
console.log( '开始做饭。' );
var p = new Promise( function (resolve, reject){ //做一些异步操作
setTimeout( function (){
console.log( '做饭完毕!' );
resolve( '鸡蛋炒饭' );
}, 1000);
});
return p;
}
//吃饭
function eat(data){
console.log( '开始吃饭:' + data);
var p = new Promise( function (resolve, reject){ //做一些异步操作
setTimeout( function (){
console.log( '吃饭完毕!' );
resolve( '一块碗和一双筷子' );
}, 2000);
});
return p;
}
cook()
.then( function (data){
throw new Error( '米饭被打翻了!' );
eat(data);
})
. catch ( function (data){
console.log(data);
});
|
运行结果如下:
1
2
3
4
5
6
7
8
9
10
11
|
somePromise.then( function () {
return a();
}). catch (TypeError, function (e) {
//If a is defined, will end up here because
//it is a type error to reference property of undefined
}). catch (ReferenceError, function (e) {
//Will end up here if a wasn't defined at all
}). catch ( function (e) {
//Generic catch-the rest, error wasn't TypeError nor
//ReferenceError
});
|
4,all()方法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
//切菜
function cutUp(){
console.log( '开始切菜。' );
var p = new Promise( function (resolve, reject){ //做一些异步操作
setTimeout( function (){
console.log( '切菜完毕!' );
resolve( '切好的菜' );
}, 1000);
});
return p;
}
//烧水
function boil(){
console.log( '开始烧水。' );
var p = new Promise( function (resolve, reject){ //做一些异步操作
setTimeout( function (){
console.log( '烧水完毕!' );
resolve( '烧好的水' );
}, 1000);
});
return p;
}
Promise
.all([cutUp(), boil()])
.then( function (results){
console.log( "准备工作完毕:" );
console.log(results);
});
|
(2)运行结果如下:
5,race()方法
1
2
3
4
5
6
|
Promise
.race([cutUp(), boil()])
.then( function (results){
console.log( "准备工作完毕:" );
console.log(results);
});
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
//请求某个图片资源
function requestImg(){
var p = new Promise( function (resolve, reject){
var img = new Image();
img.onload = function (){
resolve(img);
}
img.src = 'xxxxxx' ;
});
return p;
}
//延时函数,用于给请求计时
function timeout(){
var p = new Promise( function (resolve, reject){
setTimeout( function (){
reject( '图片请求超时' );
}, 5000);
});
return p;
}
Promise
.race([requestImg(), timeout()])
.then( function (results){
console.log(results);
})
. catch ( function (reason){
console.log(reason);
});
|
上面代码 requestImg 函数异步请求一张图片,timeout 函数是一个延时 5 秒的异步操作。我们将它们一起放在 race 中赛跑。
- 如果 5 秒内图片请求成功那么便进入 then 方法,执行正常的流程。
- 如果 5 秒钟图片还未成功返回,那么则进入 catch,报“图片请求超时”的信息。
第三部分:
JS - Promise使用详解3(jQuery中的Deferred)
上文我介绍了 ES6 中的 Promise,它完全遵循 Promises/A 规范。而我们熟悉的 jQuery 又有自己的 Promise 实现:Deferred(但其并不是遵循 Promises/A 规范)。本文就讲讲 jQuery 中 Promise 的实现。
一、Deferred对象及其方法
1,$.Deferred
- jQuery 用 $.Deferred 实现了 Promise 规范。
- $.Deferred() 返回一个对象,我们可以称之为 Deferred 对象,上面挂着一些熟悉的方法如:done、fail、then 等。
- jQuery 就是用这个 Deferred 对象来注册异步操作的回调函数,修改并传递异步操作的状态。
下面我们定义做饭、吃饭、洗碗(cook、eat、wash)这三个方法(这里使用 setTimeout 模拟异步操作)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
|
//做饭
function cook(){
console.log( '开始做饭。' );
var def = $.Deferred();
//执行异步操作
setTimeout( function (){
console.log( '做饭完毕!' );
def.resolve( '鸡蛋炒饭' );
}, 1000);
return def.promise();
}
//吃饭
function eat(data){
console.log( '开始吃饭:' + data);
var def = $.Deferred();
//执行异步操作
setTimeout( function (){
console.log( '吃饭完毕!' );
def.resolve( '一块碗和一双筷子' );
}, 1000);
return def.promise();
}
//洗碗
function wash(data){
console.log( '开始洗碗:' + data);
var def = $.Deferred();
//执行异步操作
setTimeout( function (){
console.log( '洗碗完毕!' );
def.resolve( '干净的碗筷' );
}, 1000);
return def.promise();
}
|
2,then()方法
1
2
3
4
5
6
7
8
9
10
|
cook()
.then( function (data){
return eat(data);
})
.then( function (data){
return wash(data);
})
.then( function (data){
console.log(data);
});
|
当然也可以简写成如下:
1
2
3
4
5
6
|
cook()
.then(eat)
.then(wash)
.then( function (data){
console.log(data);
});
|
(2)运行结果如下:
3,reject()方法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
//做饭
function cook(){
console.log( '开始做饭。' );
var def = $.Deferred();
//执行异步操作
setTimeout( function (){
console.log( '做饭完毕!' );
def.reject( '烧焦的米饭' );
}, 1000);
return def.promise();
}
//吃饭
function eat(data){
console.log( '开始吃饭:' + data);
var def = $.Deferred();
//执行异步操作
setTimeout( function (){
console.log( '吃饭完毕!' );
def.resolve( '一块碗和一双筷子' );
}, 1000);
return def.promise();
}
cook()
.then(eat, function (data){
console.log(data + '没法吃!' );
})
|
运行结果如下:
1
|
deferred.then( doneFilter [, failFilter ] [, progressFilter ] )
|
4,done()与fail()方法
done 和 fail 是 jQuery 增加的两个语法糖方法。分别用来指定执行完成和执行失败的回调。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
//then方法
d.then( function (){
console.log( '执行完成' );
}, function (){
console.log( '执行失败' );
});
//done方法、fail方法
d.done( function (){
console.log( '执行完成' );
})
.fail( function (){
console.log( '执行失败' );
});
|
5,always()方法
jQuery 的 Deferred 对象上还有一个 always 方法,不论执行完成还是执行失败,always 都会执行,有点类似 ajax 中的 complete。
1
2
3
4
5
6
|
cook()
.then(eat)
.then(wash)
.always( function (){
console.log( '上班去!' );
})
|
二、与Promises/A规范的差异
在开头讲到,目前 Promise 事实上的标准是社区提出的 Promises/A 规范,jQuery 的实现并不完全符合 Promises/A,主要表现在对错误的处理不同。
1,ES6中对错误的处理
1
2
3
4
5
6
7
8
|
cook()
.then( function (data){
throw new Error( '米饭被打翻了!' );
eat(data);
})
. catch ( function (data){
console.log(data);
});
|
2,jQuery中对错误的处理
同样我们在回调函数中抛出一个错误,jQuery 的 Deferred 对象此时不会改变状态,亦不会触发回调函数,该错误一般情况下会被 window.onerror 捕获。换句话说,在 Deferred 对象中,总是必须使用 reject 方法来改变状态。
1
2
3
4
5
6
7
8
9
10
|
cook()
.then( function (data){
throw new Error( '米饭被打翻了!' );
eat(data);
})
window.onerror = function (msg, url, line) {
console.log( "发生错误了:" + msg);
return true ; //如果注释掉该语句,浏览器中还是会有错误提示,反之则没有。
}
|
三、$.when方法
- $.when 并没有定义在 $.Deferred 中,看名字就知道,$.when 它是一个单独的方法。
- $.when 与 ES6 的 all 的参数稍有区别,它接受的并不是数组,而是多个 Deferred 对象。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
//切菜
function cutUp(){
console.log( '开始切菜。' );
var def = $.Deferred();
//执行异步操作
setTimeout( function (){
console.log( '切菜完毕!' );
def.resolve( '切好的菜' );
}, 1000);
return def.promise();
}
//烧水
function boil(){
console.log( '开始烧水。' );
var def = $.Deferred();
//执行异步操作
setTimeout( function (){
console.log( '烧水完毕!' );
def.resolve( '烧好的水' );
}, 1000);
return def.promise();
}
$.when(cutUp(), boil())
.then( function (data1, data2){
console.log( "准备工作完毕:" );
console.log(data1, data2);
});
|
四、Ajax函数与Deferred的关系
jQuery 中我们常常会用到的 ajax, get, post 等 Ajax 函数,其实它们内部都已经实现了 Deferred。这些方法调用后会返回一个受限的 Deferred 对象。既然是 Deferred 对象,那么自然也有上面提到的所有特性。
1,then方法
1
2
3
4
5
6
7
8
9
10
11
12
13
|
req1 = function (){
return $.ajax( /*...*/ );
}
req2 = function (){
return $.ajax( /*...*/ );
}
req3 = function (){
return $.ajax( /*...*/ );
}
req1().then(req2).then(req3).done( function (){
console.log( '请求发送完毕' );
});
|
2,success、error与complete方法
success、error、complete是 ajax 提供的语法糖,功能与 Deferred 对象的 done、fail、always 一致。比如下面两段代码功能是一致的:
1
2
3
4
5
6
7
8
9
10
11
|
//使用success、error、complete
$.ajax( /*...*/ )
.success( function (){ /*...*/ })
.error( function (){ /*...*/ })
.complete( function (){ /*...*/ })
//使用done、fail、always
$.ajax( /*...*/ )
.done( function (){ /*...*/ })
.fai( function (){ /*...*/ })
.always( function (){ /*...*/ })
|
转载于:https://www.cnblogs.com/cx19950223/p/11049880.html
JS - Promise使用随笔相关推荐
- js Promise学习
js Promise promise入参为两个 成功时的执行 resolve 失败时的执行 reject promise的状态 肯定(fulfilled) 该 Promise 对应的操作成功了 否定( ...
- JS Promise的实现原理
转载自 JS Promise的实现原理 在前端开发过程中,会经常使用到 Promise 模式,可以使异步代码看起来如同步般清新易读,从而从回调地狱中解脱出来.ES6中 已原生支持 Promise, ...
- [js] promise的构造函数是同步执行还是异步执行,它的then方法呢?
[js] promise的构造函数是同步执行还是异步执行,它的then方法呢? promise构造函数是同步执行的,then方法是异步执行的. 个人简介 我是歌谣,欢迎和大家一起交流前后端知识.放弃很 ...
- Node.js Promise.all 限制并发数量
为什么80%的码农都做不了架构师?>>> Promise.all 本身不负责执行,执行过程在传递给Promise.all之前已经开始,Promise.all只等待全部执行完成, ...
- js promise的用法
在理解promise的使用之前,首先要理解js语言的运行环境是单线程的,也就是说一次只能完成一个任务,也就是一条流水线,如果有多个任务就必须排队,前面一个任务完成,再执行后面一个任务,以此类推.这与j ...
- JS Promise用法总结
一.什么是Promise Promise 是异步编程的一种解决方案,其实是一个构造函数,自己身上有all.reject.resolve这几个方法,原型上有then.catch等方法.所谓Promise ...
- js promise then 用法详解
Promise 是抽象的异步处理对象 构造方法: let promies = new Promise((resolve, reject) => {resolve(); //异步处理 }); Pr ...
- js promise 详解
没有promise之前处理异步的方式 在promise产生之前,js 处理异步的方式是使用回调函数,一个回调函数执行完成,进行下一个回调函数.这样会导致层层嵌套,代码不清晰.容易进入回调地狱 prom ...
- 读源码(四)—— js Promise
写了一些示例还有仿源码自己实现一个简单的MyPromise,主要内容都在代码注释中: class PromiseTest {static test1() {const p = new Promise( ...
最新文章
- python怎么编辑图片_python读取图片并修改格式与大小的方法
- 挑战程序设计竞赛2:算法和数据结构 (渡部有隆 著)
- 【阿里云课程】注意力机制原理,应用与设计
- 关于SQLSERVER的全文目录跟全文索引的区别
- 阿里智能运维平台如何助力研发应对双11挑战
- Python安装Matplotlib,wordcloud,jieba第三方库
- 内定抽奖小程序_微信抽奖小程序抽到奖品真的免费吗?
- 【008】基于vue.js的仿网易云web端(含源码答辩PPT、接口文档、运行教程)
- 存储基础(SATA、SCSI、RAID、SAN、SAS、FC)
- python,matlab 读取NIFTI(.nii)格式图像、FSL安装
- C++实现 L1-061 新胖子公式 (10分)
- 火影Vulcan笔记本金钢T1安装Win7系统图文教程
- Hitting Set 碰撞集问题
- 微信小程序开发者工具的使用
- buuctf刷题记录(6)
- 基于任务点的加速仿真
- break语句和continue语句的区别
- nsis制作一个外部exe启动器(exe嵌套exe)
- 二手房交易流程和税费
- postgresql: pg_ctl -D data start 出现 postgres aaaaaaaaaaaaaaaaaaaaaaaaa C:/Users/huang zhen yang/dat
热门文章
- 20145307《信息安全系统设计基础》期中总结
- VirtWire 向客服发ticket
- PHP的方法重载实现
- C#调用浏览器的原理及实现浅析
- 学习《Building Applications with FME Objects》 之二 使用Sessions(会话)
- Long类型传到前端失去精度(2):Long类型不是实体类的某一个字段,Long类型是一个函数的返回值
- 计算机和打印机的耗材管理,打印设备耗材余量知多少?多种途径实时掌握
- linux 关闭nginx进程,Linux环境下启动、停止、重启nginx
- python与pyqt5_【Python开发】PyQt5应用与实践
- 非极大值抑制_非极大值抑制(Non-Maximum Suppression)