浅谈JavaScript中promise的使用


Posted in Javascript onJanuary 11, 2017

阅读目录

  • 什么是Prmoise
  • 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兼容性

浅谈JavaScript中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); 
});
// 结果:
// 2
// 第二个promise
// 1

可以看到,传的值中,只有p2的返回了,但是p1没有停止,依然有执行。

race的应用场景为,比如我们可以设置为网路请求超时。写两个promise,如果在一定的时间内如果成功的那个我们没有执行到,我们就执行失败的那个,这里不再举例子,可以看看阮一峰的ES入门。

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
Javascript WebSocket使用实例介绍(简明入门教程)
Apr 16 Javascript
innerHTML属性,outerHTML属性,textContent属性,innerText属性区别详解
Mar 13 Javascript
JS实现的自定义右键菜单实例二则
Sep 01 Javascript
深入分析Javascript事件代理
Jan 30 Javascript
轻松实现js选项卡切换效果
Sep 24 Javascript
jQuery中clone()函数实现表单中增加和减少输入项
May 13 jQuery
vue购物车插件编写代码
Nov 27 Javascript
使用 vue.js 构建大型单页应用
Feb 10 Javascript
基于React Native 0.52实现轮播图效果
Aug 25 Javascript
微信提示 在浏览器打开 效果实现过程解析
Sep 10 Javascript
jQuery实现的移动端图片缩放功能组件示例
May 01 jQuery
微信小程序实现弹框效果
May 26 Javascript
JS多文件上传的实例代码
Jan 11 #Javascript
微信小程序开发(一) 微信登录流程详解
Jan 11 #Javascript
Javascript中return的使用与闭包详解
Jan 11 #Javascript
jQuery对table表格进行增删改查
Dec 22 #Javascript
javascript基础知识讲解
Jan 11 #Javascript
bootstrap侧边栏圆点导航
Jan 11 #Javascript
微信小程序开发(二)图片上传+服务端接收详解
Jan 11 #Javascript
You might like
实现树状结构的两种方法
2006/10/09 PHP
为IP查询添加GOOGLE地图功能的代码
2010/08/08 PHP
解析PHP强制转换类型及远程管理插件的安全隐患
2014/06/30 PHP
php-msf源码详解
2017/12/25 PHP
PHP PDOStatement::setAttribute讲解
2019/02/01 PHP
laravel 字段格式化 modle 字段类型转换方法
2019/09/30 PHP
Nigma vs Alliance BO5 第一场2.14
2021/03/10 DOTA
Prototype 学习 工具函数学习($w,$F方法)
2009/07/12 Javascript
获取网站跟路径的javascript代码(站点及虚拟目录)
2009/10/20 Javascript
js 替换功能函数,用正则表达式解决,js的全部替换
2010/12/08 Javascript
DOM基础教程之模型中的模型节点
2015/01/19 Javascript
jquery制作LED 时钟特效
2015/02/01 Javascript
JS常用字符串方法(推荐)
2021/01/15 Javascript
bootstrap表单按回车会自动刷新页面的解决办法
2017/03/08 Javascript
解决html-jquery/js引用外部图片时遇到看不了或出现403的问题
2017/09/22 jQuery
Three.js如何实现雾化效果示例代码
2017/09/27 Javascript
vue v-for循环重复数据无法添加问题解决方法【加track-by='索引'】
2019/03/15 Javascript
微信小程序利用Canvas绘制图片和竖排文字详解
2019/06/25 Javascript
python 判断网络连通的实现方法
2018/04/22 Python
Pycharm设置界面全黑的方法
2018/05/23 Python
用Python编写一个简单的CS架构后门的方法
2018/11/20 Python
简单了解python的break、continue、pass
2019/07/08 Python
pytorch载入预训练模型后,实现训练指定层
2020/01/06 Python
python中threading开启关闭线程操作
2020/05/02 Python
Python利用Faiss库实现ANN近邻搜索的方法详解
2020/08/03 Python
Python如何实现机器人聊天
2020/09/10 Python
工商管理本科毕业生求职信范文
2013/10/05 职场文书
运动会广播稿100字
2014/01/11 职场文书
给领导的检讨书
2014/02/16 职场文书
小学教学随笔感言
2014/02/26 职场文书
求职意向书
2014/07/29 职场文书
旅行社优秀创业计划书
2014/08/16 职场文书
2014年售票员工作总结
2014/11/19 职场文书
初三学生语文考试作弊检讨书
2014/12/14 职场文书
pytorch查看网络参数显存占用量等操作
2021/05/12 Python
Redis sentinel哨兵集群的实现步骤
2022/07/15 Redis