浅谈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的一些总结
Nov 03 Javascript
javascript学习笔记(十九) 节点的操作实现代码
Jun 20 Javascript
jquery+html5制作超酷的圆盘时钟表
Apr 14 Javascript
Javascript实现可旋转的圆圈实例代码
Aug 04 Javascript
JQuery fileupload插件实现文件上传功能
Mar 18 Javascript
JSON字符串和对象相互转换实例分析
Jun 16 Javascript
基于Angularjs+mybatis实现二级评论系统(仿简书)
Feb 13 Javascript
从零开始学习Node.js系列教程一:http get和post用法分析
Apr 13 Javascript
JavaScript错误处理和堆栈追踪详解
Apr 18 Javascript
Webpack执行命令参数详解
Jun 17 Javascript
React Native 通告消息竖向轮播组件的封装
Aug 25 Javascript
vue2.0基于vue-cli+element-ui制作树形treeTable
Apr 30 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
PHP 服务器配置(使用Apache及IIS两种方法)
2009/06/01 PHP
PHP explode()函数用法、切分字符串
2012/10/03 PHP
PHP不用第三变量交换2个变量的值的解决方法
2013/06/02 PHP
Yii框架中 find findAll 查找出制定的字段的方法对比
2014/09/10 PHP
ThinkPHP实现分页功能
2017/04/28 PHP
模拟用户操作Input元素,不会触发相应事件
2007/05/11 Javascript
用jQuery打造TabPanel效果代码
2010/05/22 Javascript
javascript中运用闭包和自执行函数解决大量的全局变量问题
2010/12/30 Javascript
在javascript中执行任意html代码的方法示例解读
2013/12/25 Javascript
浅谈JavaScript变量的自动转换和语句
2016/06/12 Javascript
jQuery插件学习教程之SlidesJs轮播+Validation验证
2016/07/12 Javascript
JS使用正则表达式实现关键字替换加粗功能示例
2016/08/03 Javascript
js html css实现复选框全选与反选
2016/10/09 Javascript
jQuery  ready方法实现原理详解
2016/10/19 Javascript
layui前段框架日期控件使用方法详解
2017/05/19 Javascript
node和vue实现商城用户地址模块
2018/12/05 Javascript
js变量声明var使用与不使用的区别详解
2019/01/21 Javascript
详解iframe跨域的几种常用方法(小结)
2019/04/29 Javascript
vue如何在用户要关闭当前网页时弹出提示的实现
2020/05/31 Javascript
[00:33]2016完美“圣”典风云人物:Sccc宣传片
2016/12/03 DOTA
[10:53]2018DOTA2国际邀请赛寻真——EG
2018/08/11 DOTA
Python 时间处理datetime实例
2008/09/06 Python
跟老齐学Python之不要红头文件(2)
2014/09/28 Python
python3 实现的对象与json相互转换操作示例
2019/08/17 Python
python 实现turtle画图并导出图片格式的文件
2019/12/07 Python
Python和Anaconda和Pycharm安装教程图文详解
2020/02/04 Python
使用tkinter实现三子棋游戏
2021/02/25 Python
尼克松手表官网:Nixon手表
2019/03/17 全球购物
优秀导游先进事迹材料
2014/01/25 职场文书
酒店总经理助理岗位职责
2014/02/01 职场文书
中层干部培训方案
2014/06/16 职场文书
2014年城市管理工作总结
2014/12/02 职场文书
校本课程教学计划
2015/01/19 职场文书
小平您好观后感
2015/06/09 职场文书
《司马光》教学反思
2016/02/22 职场文书
全新239军机修复记
2022/04/05 无线电