【原】谈谈promise
最近在看《你不知道的javascript中卷》,发觉作者花了基本一半的篇幅去讲异步和promise,觉得有必要总结一下。
其实本文的目的是想手写一个Promise的,无奈总结着总结着发觉篇幅有点长,因此只好一分为二,先介绍promise的用法,知道怎么用,我们才知道怎么写,所以把手写一个promise的任务放到了下一篇文章当中。
当然,网上有很多关于promise的文章,都可以参考参考,有误之处,欢迎之处。
什么是Prmoise
promise是ES6新增的一个特征,它已被列入ES6的正式规范中
Promise对象可以理解为一次执行的异步操作,使用promise对象之后可以使用一种链式调用的方式来组织代码;让代码更加的直观。也就是说,有了Promise对象,就可以将异步操作以同步的操作的流程表达出来,避免了层层嵌套的回调函数。
示例:未使用promise,回调必须层层嵌套
$.ajax(url1, function(data1){
// do something...
$.ajax(url2, function(data2){
// do something...
$.ajax(url3, function(data3){
// do something...
done(data3); // 返回数据
})
});
});
如果有多个嵌套,导致代码不够直观,而且如果几个操作之前没有前后顺序之分,需要等待上一个操作完成才可以进行下一个操作,造成不必要的等待
promise就是为了解决这些问题而产生的。
Promise
对象的特点:
1、对象的状态不受外界影响。
Promise
对象代表一个异步操作,有三种状态
pending
(执行中)Resolved
(成功,又称Fulfilled)rejected
(拒绝)
其中pending为初始状态,fulfilled和rejected为结束状态(结束状态表示promise的生命周期已结束)。
promise只有异步操作的结果,可以决定当前是哪一种状态,任何其他操作都无法改变这个状态.。
2、一旦状态改变,就不会再变,任何时候都可以得到这个结果。
Promise
对象的状态改变,只有两种可能:从Pending
变为Resolved
和从Pending
变为Rejected
pending->fulfilled,pending->rejected。
只要这两种情况发生,状态就凝固了,不会再变了,会一直保持这个结果
Promise
对象的缺点:
1、无法取消Promise
,一旦新建它就会立即执行,无法中途取消。
2、如果不设置回调函数,Promise
内部抛出的错误,不会反应到外部。
3、当处于Pending
状态时,无法得知目前进展到哪一个阶段(刚刚开始还是即将完成)。
promise兼容性
除了IE这种古老的浏览器和一些低版本的安卓外,现代浏览器支持还是挺好的,所以我们可以在谷歌的控制台直接测试我们的代码
Promise的使用
先提前说明一下,下面的代码示例,都可以复制到谷歌的控制台就行测试!!
1、基本用法:
(1)、首先我们new一个Promise,将Promise实例化
(2)、然后在实例化的promise可以传两个参数,一个是成功之后的resolve,一个是失败之后的reject
(3)、Promise实例生成以后,可以用then
方法分别指定Resolved
状态和Reject
状态的回调函数
代码如下:
var promise = function(isReady){
return new Promise(function(resolve, reject){
// do somthing, maybe async
if (isReady){
return resolve('hello world');
} else {
return reject('failure');
}
});
} //Promise实例生成以后,可以用then方法分别指定Resolved状态和Reject状态的回调函数。
promise(true).then(function(value){
// success,这里是resolve的回调函数
console.log(value); //hello world
}, function(err){
// failure,这里是reject的回调函数
console.log(err)
})
上述代码是执行成功,返回hello world,如果想测试一下失败后的返回值,可以在promise(true).then...这里改为 promise(false).then...即可
2、链式操作
也许你会说,Promise只是简化层层回调的写法而已吧,其实不然,它的精髓是通过维护状态、传递状态的方式来使回调方式能够及时的调用,因此,相比于callback,它更灵活,更简单。下面我们来看看Promise的链式操作:
makePromise1()
.then(function(value){
console.log(value);
return makePromise2();
})
.then(function(value){
console.log(value);
return makePromise3();
})
.then(function(value){
console.log(value);
}); function makePromise1(){
var p = new Promise(function(resolve, reject){
//异步操作
setTimeout(function(){
console.log('异步任务1');
resolve('异步任务1传过来的值');
}, 2000);
});
return p;
}
function makePromise2(){
var p = new Promise(function(resolve, reject){
//异步操作
setTimeout(function(){
console.log('异步任务2');
resolve('异步任务2传过来的值');
}, 2000);
});
return p;
}
function makePromise3(){
var p = new Promise(function(resolve, reject){
//异步操作
setTimeout(function(){
console.log('异步任务3');
resolve('异步任务3传过来的值');
}, 2000);
});
return p;
}
上面的代码中,我们有三个异步操作,makePromise1,makePromise2,makePromise3。其中第二个和第三个依次执行,也就是上一个操作完成之后才可以进行。
输出的值为:
异步任务1
异步任务1传过来的值
异步任务2
异步任务2传过来的值
异步任务3
异步任务3传过来的值
3、Promise的catch方法
var promise = function(isReady){
return new Promise(function(resolve, reject){
// do somthing, maybe async
if (isReady){
return resolve('hello world');
} else {
return reject('failure');
}
});
}
promise(true)
.then(function(value){
console.log('resolved');
console.log(value);
console.log(haha); //此处的haha未定义
})
.catch(function(error){
console.log('rejected');
console.log(error);
});
catch 方法是 then(onFulfilled, onRejected) 方法当中 onRejected 函数的一个简单的写法,也就是说可以写成 then(fn).catch(fn),相当于 then(fn).then(null, fn)
使用 catch 的写法比一般的写法更加清晰明确,其实可以类比成try/catch,这样,其中有报错的地方不会阻塞运行。比如定义了一个未定义haha,正常来说它上面的代码也不会运行,因为被这个报错阻塞了,有了catch,它上面的代码可以正常运行下去:
控制台打印出来的东西:
resolved
hello world
rejected
ReferenceError: haha is not defined(…)
4、promise.all方法
Promise.all
可以接收一个元素为 Promise 对象的数组作为参数,当这个数组里面所有的 Promise 对象都变为 resolve 时,该方法才会返回。
代码示例:
var p1 = new Promise(function (resolve) {
setTimeout(function () {
resolve("第一个promise");
}, 3000);
}); var p2 = new Promise(function (resolve) {
setTimeout(function () {
resolve("第二个promise");
}, 1000);
}); Promise.all([p1, p2]).then(function (result) {
console.log(result); // ["第一个promise", "第二个promise"]
});
上面的代码中,all接收一个数组作为参数,p1,p2是并行执行的,等两个都执行完了,才会进入到then,all会把所有的结果放到一个数组中返回,所以我们打印出我们的结果为一个数组。
值得注意的是,虽然p2的执行顺序比p1快,但是all会按照参数里面的数组顺序来返回结果。all的使用场景类似于,玩游戏的时候,需要提前将游戏需要的资源提前准备好,才进行页面的初始化。
5、promise.race方法
race的中文意思为赛跑,也就是说,看谁跑的快,跑的快的就赢了。因此,promise.race也是传入一个数组,但是与promise.all不同的是,race只返回跑的快的值,也就是说result返回比较快执行的那个。
var p1 = new Promise(function (resolve) {
setTimeout(function () {
console.log(1);
resolve("第一个promise");
}, 3000);
}); var p2 = new Promise(function (resolve) {
setTimeout(function () {
console.log(2);
resolve("第二个promise");
}, 1000);
}); Promise.race([p1, p2]).then(function (result) {
console.log(result);
}); // 结果:
//
// 第二个promise
//
可以看到,传的值中,只有p2的返回了,但是p1没有停止,依然有执行。
race的应用场景为,比如我们可以设置为网路请求超时。写两个promise,如果在一定的时间内如果成功的那个我们没有执行到,我们就执行失败的那个,这里不再举例子,可以看看阮一峰的ES入门。
ES6的介绍就到这里了,下一篇文章我们来手写一个promise
【原】谈谈promise的更多相关文章
- 谈谈promise
最近在看<你不知道的javascript中卷>,发觉作者花了基本一半的篇幅去讲异步和promise,觉得有必要总结一下. 其实本文的目的是想手写一个Promise的,无奈总结着总结着发觉篇 ...
- 谈谈 Promise 以及实现 Fetch 的思路
Promise 是异步编程的一种解决方案. Promise /** * 属性 */ Promise.length Promise.prototype /** * 方法 */ Promise.all(i ...
- 深入理解 Promise
自从ES6流行起来,Promise 的使用变得更频繁更广泛了,比如异步请求一般返回一个 Promise 对象,Generator 中 yield 后面一般跟 Promise 对象,ES7中 Async ...
- ES6之Promise用法详解
一 前言 本文主要对ES6的Promise进行一些入门级的介绍.要想学习一个知识点,肯定是从三个方面出发,what.why.how.下面就跟着我一步步学习吧~ 二 什么是Promise 首先是what ...
- Promise详解
前言 && 基础概念 Promise 是解决 JS 异步的一种方案,相比传统的回调函数,Promise 能解决多个回调严重嵌套的问题. Promise 对象代表一个异步操作,有三种状态 ...
- 学习 Promise,掌握未来世界 JS 异步编程基础
其实想写 Promise 的使用已经很长时间了.一个是在实际编码的过程中经常用到,一个是确实有时候小伙伴们在使用时也会遇到一些问题.Promise 也确实是 ES6 中 对于写 JS 的方式,有着真正 ...
- js的promise
转载自: https://segmentfault.com/a/1190000007032448#articleHeader16 一 前言 本文主要对ES6的Promise进行一些入门级的介绍.要想学 ...
- 转载 初探Promise
初探Promise https://segmentfault.com/a/1190000007032448 javascript es6 promise 33.5k 次阅读 · 读完需要 65 分 ...
- Promise 解析
Promise 由于js的语言特性(用户交互)和工作环境(浏览器脚本),决定了它是单线程工作,所以两段脚本不能同时运行,但为了实现功能,所以人们使用了事件和回调来初步解决这个问题,例如(addEven ...
随机推荐
- bootstrap之DumpWindowHierarchy
DumpWindowHierarchy package io.appium.android.bootstrap.handler; import android.os.Environment; impo ...
- Troubleshooting "Global Enqueue Services Deadlock detected" (Doc ID 1443482.1)
In this Document _afrLoop=1021148011984950&id=1443482.1&displayIndex=1&_afrWindowMode= ...
- SignalR技术
Asp.net SignalR快速入门 一.前言 之前半年时间感觉自己有点浮躁,导致停顿了半年多的时间没有更新博客,今天重新开始记录博文,希望自己可以找回初心,继续沉淀.由于最近做的项目中用到Sign ...
- hdu3709(数位dp)
求区间[l,r]内有多少个数的满足: 选一个位为中点,是的左边的数到该位的距离等于右边的位到该位的距离. 比如4139 选择3位中点, 那么左边的距离是 4 * 2 + 1 * 1 , 右边的距 ...
- 设计模式10---设计模式之原型模式(Prototype)
1.场景模式 考虑这样一个实际应用:订单处理系统 里面有一个保存订单的功能,当产品数量超过1000份以后,拆成两份订单,再超,那么就再拆.直到每份订单不超过1000为止,订单有两种,一个是个人订单,一 ...
- HTTP/1.1
HTTP真的很简单 原文:HTTP Made Really Easy因为我本身网络基础就很差,所以看到这篇文章一方面是学习网络知识,另一方面为了锻炼我蹩脚的英语水平,文中如有错误,欢迎浏览指正! ...
- SQL Server :理解BCM页
原文:SQL Server :理解BCM页 今天我们来讨论下批量更改映射(Bulk Changed Map:BCM)页,还有大容量日志恢复模式( bulk logged recovery model ...
- [Unity3D]转让Android介面
简单介绍 有一些手机功能.Unity没有提供对应的接口.比如震动,比如不锁屏,比如GPS.比如... 有太多的特殊功能Unity都没有提供接口.这时候,我们就须要通过使用Android原生的ADT编辑 ...
- 深挖BAT内部级别和薪资待遇,你敢看?(转)
一. 阿里内部级别和薪资待遇 先看个例子,或许你也曾像他一样纠结 BAT 的 offer: 最近刚通过阿里面试,但基本薪酬也是不升反小降. 级别只有 P6+,连 P7 都没有,非常郁闷,打算拒绝算了. ...
- 基于Cocos2dx开发卡牌游戏_松开,这三个国家
1.它实现了动态读取地图资源.地图信息被记录excel桌格.假设你想添加地图,编者excel导入后CocoStudio数据编辑器,然后出口到Json档,到项目的Resource文件夹下. 2.SGFi ...