入门Promise的正确姿势
Promise是异步编程的一种解决方案,从语法上说,Promise是一个对象,从它可以获取异步操作的消息。
Promise的基本用法
Promise构造函数接受一个函数作为参数,该函数的两个参数分别是resolve和reject。它们是两个函数,由JavaScript引擎提供。
- resolve函数的作用是,将Promise对象的状态从“未完成”变为“成功”(即从Pending变为Resolved),在异步操作成功时调用,并将异步操作的结果作为参数传递出去。
- reject函数的作用是,将Promise对象的状态从“未完成”变为“失败”(即从Pending变为Rejected),在异步操作失败时调用,并将异步操作报出的错误作为参数传递出去。
- then方法可以接受两个回调函数作为参数。第一个回调函数是Promise对象的状态变为Resolved时调用,第二个回调函数是Promise对象的状态变为 Reject时调用。
var promise = new Promise(//异步执行,Promise对象创建后会被立即执行function (resolve,reject) {//耗时很长的异步操作if('异步处理成功') { resolve(); //数据处理成功时调用} else {reject(); //数据处理失败时调用 }} ) //Promise实例生成以后,可以用then方法分别指定Resolved状态和Reject状态的回调函数。 promise.then(function A() {//数据处理成功后执行 },function B() {//数据处理失败后执行 } )
下面我们举一个简单的例子来模拟一下异步操作成功和异步操作失败函数的运行过程。
console.log('starting'); var promise = new Promise(function(resolve, reject) { setTimeout(function() { console.log("2秒后,我运行了");resolve('异步操作成功了'); //1//reject('异步操作失败了'); //2 //return 'hello'; //3}, 2000) }).then(function (value) { console.log('异步操作成功后执行我:',value); }, function (value) {console.log('异步操作失败后执行我:',value); } ) console.log('我也运行了');// 上面的代码中1处代码的调用,输出顺序是: //starting //我也运行了//2秒后,我运行了 // 异步操作成功后执行我: 异步操作成功了// 上面的代码中2处代码的调用,输出顺序是: //starting //我也运行了//2秒后,我运行了 // 异步操作失败后后执行我: 异步操作失败了 //上面的代码中3处代码的调用,输出顺序是://starting//我也运行了//2秒后,我运行了
知代码3处的return 'hello' 语句在新建的new Promise对象中并没有被当作参数返回给then()函数内.那么会不会返回给promise了呢?我们用一段代码来测试一下
console.log('starting'); var promise = new Promise(function(resolve, reject) { setTimeout(function() { console.log("2秒后,我运行了");resolve('异步操作成功了'); //1//reject('异步操作失败了'); //2return 'hello';}, 2000) }) promise.then(function (value) { console.log('异步操作成功后执行我:',value); }, function (value) {console.log('异步操作失败后执行我:',value); } ) console.log('我也运行了'); console.log(promise); setTimeout(function () {console.log('5秒后,我执行了');console.log(promise); },5000);//starting //我也运行了 //Promise { pending }//[[PromiseStatus]]:"pending"//[[PromiseValue]]:undefined//__proto__:Promise {constructor: , then: , catch: , …} //2秒后,我运行了 //异步操作成功后执行我: 异步操作成功了 //5秒后,我执行了 //Promise { resolved }//[[PromiseStatus]]:"resolved"//[[PromiseValue]]:"异步操作成功了"//__proto__:Promise {constructor: , then: , catch: , …}
由执行结果可知,变量promise仍然是new Promise对象的一个实例。所以return语句虽然被执行了,但对promise实例不会产生任何影响,相当于不存在。
由上面测试的代码可知,Promise对象有以下两个特点。
(1)对象的状态不受外界影响。Promise对象代表一个异步操作,有三种状态:Pending(进行中)、Resolved(已完成,又称Fulfilled) 和Rejected(已失败)。只有异步操作的结果,可以决定当前是哪一种状态,
(2)一旦状态改变,就不会再变,任何时候都可以得到这个结果。Promise对象的状态改变,只有两种可能:从Pending变为Resolved和从Pending变 为Rejected。只要这两种情况发生,状态就凝固了,不会再变了,会一直保持这个结果。就算改变已经发生了,你再对Promise对象添加回调函数,也会立即得到这个结果。这与事件(Event)完全不同,事件的特点是,如果你错过了它,再去监听,是得不到结果的。
resolve(value) VS resolve(Promise)
我们会在异步操作成功时调用resolve函数,其作用是将Promise对象的状态从Pending变为Resolved,并将异步操作的结果作为参数传递给then()方法里的第一个函数的形参。
那么传入的参数是值和传入的参数是promise对象时有什么不同呢。我们来看一下例子。
当传入的参数为值时:
var time = new Date(); var promise = new Promise(function(resolve, reject) { setTimeout(function() { console.log("1秒后,我运行了");resolve('异步操作成功了'); //1}, 2000) }).then(function (value) {console.log(value,new Date() - time); }) //执行的输出结果为: //2秒后,我运行了 //异步操作成功了 1002
大约过了一秒左右,我们可以看到在resolved状态的回调方法中,我们打印出了上面注释中的内容。我们能够通过resolve方法传递操作的结果,然后在回调方法中使用这些结果。
如果我们在resolve中传入一个Promise实例呢?
var time = new Date(); var promise = new Promise(function(resolve, reject) { setTimeout(function() { console.log("2秒后,我运行了");resolve('异步操作成功了'); //1}, 2000) })var promise2 = new Promise(function (resolve,reject) {setTimeout(resolve,1000,promise);//setTimeout和setInterval中的第三个、及以后的参数会作为第一个参数func的参数传递给func函数 }).then(function (value) {console.log(value,new Date() - time); })//执行后输出的结果为://2秒后,我运行了 //异步操作成功了 2003
promise2经过了2秒后才打印出来结果。奇怪了,我们不是设置promise2经过1秒后执行吗?
简单说就是因为promise2中的resolve()函数传入了promise对象,此时promise对象的状态决定了promise的状态,同时会把返回值传给promise。
Promise/A+中规定 [[Resolve]](promise, x)
2.3.2.如果x是一个promise实例, 则以x的状态作为promise的状态
2.3.2.1.如果x的状态为pending, 那么promise的状态也为pending, 直到x的状态变化而变化。
2.3.2.2.如果x的状态为fulfilled, promise的状态也为fulfilled, 并且以x的不可变值作为promise的不可变值。
2.3.2.3.如果x的状态为rejected, promise的状态也为rejected, 并且以x的不可变原因作为promise的不可变原因。
2.3.4.如果x不是对象或函数,则将promise状态转换为fulfilled并且以x作为promise的不可变值。
Promise.prototype.then()
Promise实例具有then方法,也就是说,then方法是定义在原型对象Promise.prototype上的。它的作用是为Promise实例添加状态改变时的回调函数。 前面说过,then方法的第一个参数是Resolved状态的回调函数,第二个参数(可选)是Rejected状态的回调函数。
then方法返回的是一个新的Promise实例(注意,不是原来那个Promise实例)。因此可以采用链式写法,即then方法后面再调用另一个then方法。
var promise = new Promise(function(resolve, reject) { setTimeout(function() { console.log("2秒后,我运行了");resolve('异步操作成功了'); //1}, 2000) }) promise.name = 'promise'; console.log('promise:',promise) var promise2 = promise.then(function (value) {console.log(value); }) promise2.name = 'promise2'; console.log('promise2:',promise2);// promise: // Promise { pending } // [[PromiseStatus]]:"pending" // [[PromiseValue]]:undefined // name:"promise" // __proto__:Promise {constructor: , then: , catch: , …} // promise2: // Promise { pending } // [[PromiseStatus]]:"pending" // [[PromiseValue]]:undefined // name:"promise2" // __proto__:Promise {constructor: , then: , catch: , …}
我们可以知道promise.then()方法执行后返回的是一个新的Promise对象。也就是说上面代码中的promise2是一个Promise对象,它的实现效果和下面的代码是一样的,只不过在then()方法里,JS引擎已经自动帮我们做了。
promise2 = new Promise(function (resolve,reject) {})
既然在then()函数里已经自动帮我实现了一个promise对象,但是我要怎么才能给resolve()或reject()函数传参呢?其实在then()函数里,我们可以用return()的方式来给promise2的resolve()或reject()传参。看一个例子。
//var time = new Date(); var promise = new Promise(function(resolve, reject) { setTimeout(function() { console.log("2秒后,我运行了");resolve('异步操作成功了'); //1//reject('异步操作失败了'); //2}, 2000) }) //console.log('promise:',promise) var promise2 = promise.then(function (value) {console.log(value);//resolve('nihao'); //报错。注意,这里不能写resolve()方法,因为在then函数里是没有resolve方法的return (1); //return promise; //也可以return一个promise对象,返回promise对象执行后resolve('参数值')或reject('参数值')内部的参数值 //如果不写return的话,默认返回的是return undefined 。 }) var promise3 = promise2.then(function (value) {console.log('is:',value); },function (value) {console.log('error:',value); }) promise2.name = 'promise2'; setTimeout(function () {console.log(promise2); },3000);//2秒后,我运行了 //异步操作成功了 //is: 1 //Promise {resolved}//name:"promise2"//__proto__:Promise//[[PromiseStatus]]:"resolved"//[[PromiseValue]]:1
Promise与错误状态处理
.then(null, rejection),用于指定异步操作发生错误时执行的回调函数。下面我们做一个示例。
var promise = new Promise(function(resolve, reject) {setTimeout(function () {reject('error');},2000); }).then(null,function(error) {console.log('rejected', error) }); //rejected error
我们知道then()方法执行后返回的也是一个promise对象,因此也可以调用then()方法,但这样的话为了捕获异常信息,我们就需要为每一个then()方法绑定一个.then(null, rejection)。由于Promise对象的错误信息具有“冒泡”性质,错误会一直向后传递,直到被捕获为止(向后传递指的是:后面的then函数会一直执行rejected下的代码,并抛出第一个then函数/Promise执行出错时的信息)。因此Promise为我们提供了一个原型上的函数Promise.prototype.catch()来让我们更方便的捕获到异常。
我们看一个例子
var promise = new Promise(function(resolve, reject) {setTimeout(function () {reject('error');},2000); }).then(function(value) {console.log('resolve', value); }).catch(function (error) {console.log(error); }) //运行结果 //error
上面代码中,一共有二个Promise对象:一个由promise产生,一个由then产生。它们之中任何一个抛出的错误,都会被最后一个catch捕获。
但是如果用.then(null, rejection)方法来处理错误信息,我们需要在每一个rejection()方法中返回上一次异常信息的状态,这样当调用的then()方法一多的时候,对会对代码的清晰性和逻辑性造成影响。
所以,一般来说,不要在then方法里面定义Reject状态的回调函数(即then的第二个参数),总是使用catch方法。
转载于:https://www.cnblogs.com/yuliangbin/p/8592724.html
入门Promise的正确姿势相关推荐
- Android SELinux开发入门指南之正确姿势解决访问data目录权限问题
Android SELinux开发入门指南之正确姿势解决访问data目录权限问题 Android SELinux开发多场景实战指南目录: Android SELinux开发入门指南之SELinux ...
- 这才是简单快速入门Python的正确姿势!
作者/分享人:张杨,热爱技术分享,活跃于今日头条和腾讯课堂,开设的<Python3网络爬虫入门>.<Python开发课程>等专栏受到好评. 一.前言 强烈建议:请在电脑的陪同下 ...
- 正确姿势临时和永久开启关闭Android的SELinux
正确姿势临时和永久关闭Android的SELinux Android SELinux开发多场景实战指南目录: Android SELinux开发入门指南之SELinux基础知识 Andro ...
- 快速入门Web前端开发的正确姿势
入门标准很简单,就一条:达到能参与 Web 前端实际项目的开发水平.请注意,是实际项目,这就需要了解如今的实际项目开发都用了哪些技术栈.HTML/CSS/JavaScript 这三大基础技术栈肯定是需 ...
- python人工智能入门优达视频_机器学习:优达教你搭建Python 环境的正确姿势
原标题:机器学习:优达教你搭建Python 环境的正确姿势 为机器学习搭建好 Python 环境听起来简单,但有时候坑还不少.如果此前没有配置过类似的环境,很可能会苦苦折腾各种命令好几个小时.可是我明 ...
- 自学python需要买书吗-学习Python的正确姿势—基础教学,教科书该怎么买?
学习Python的正确姿势-基础教学,教科书该怎么买? 2019-05-07 18:52:46 23点赞 377收藏 4评论 写在前面: 四月读书季,京东图书大促销,赶上优惠的尾巴,抢购了几本心水很久 ...
- 那些年,使用Github的正确姿势
那些年,使用Github的正确姿势 1.快速下载单个文件 有趣的插件,配上有趣的github,一起来嗨皮,谈谈自己的使用姿势! 1.1 DownGit 直接下载Github资料,只需要拷贝地址,在线下 ...
- 在副业刚需的时代,如何掌握副业的正确姿势?
前言 近期,伴随着"副业刚需"这个词语的流行,关于"职场人要不要发展副业"的话题再一次被炒得沸沸扬扬. 有人认为副业是刚需,是抵御中年危机的锦囊妙计,甚至是中年 ...
- GitHub 热点速览:刷 LeetCode 的正确姿势!
作者 | HelloGitHub-小鱼干 责编 | 郭芮 找对路子,事半功倍,正如本周 GitHub Trending #刷 LeetCode# 主题想表达的那般,正确的学习姿势方能让人走得更远,走进 ...
最新文章
- Redis复制的高可用详解
- 学不好Web前端的几个原因总结
- 随机森林需要分训练集测试集吗_讨论记录用随机森林对生存数据降维,筛选signature...
- 【vue2.0进阶】vue-router10分钟快速入门
- kmeans python sklearn_Python手动实现kmeans聚类和调用sklearn实现
- 第十四:Pytest进阶之html测试报告
- iptables的详细介绍及配置方法
- httplib模块,测试cdn节点文件同步
- SpringBoot中的定时任务和异步任务
- css特效动画——页面加载中 ...
- 饭卡管理系统mysql_数据库饭卡管理系统.doc
- 计算机二级考试vb内容,计算机二级VB考试考什么内容?(一)
- sql注入检测工具之sqlmap
- Ubuntu12.04 耳机无声 扬声器有声的解决
- 数藏2.0故事中,元境开启“元宇宙丝绸之路”
- 2021SC@SDUSC Zxing开源代码(十三)Aztec二维码(二)
- 永恒骑士 小程序服务器列表空,微信小程序一键登录应用服务器通过AES解密返回purePhoneNumber为空?...
- 实时填报推送微信消息及审核(帆软报表)
- 细节6:算术右移和逻辑右移
- 阿里巴巴并购万网可行性分析
热门文章
- 【JavaScript】JavaScript基础-变量、运算符与控制语句
- C++基本要点复习--------coursera程序设计实习(PKU)的lecture notes
- 嘿嘿 刚刚进来 记录下
- 学金融买计算机配置,我是学金融投资的计算机等级考试哪个方向对我工作有用...
- k8s aws 部署_如何在短短30分钟内使用CircleCI设置到AWS S3的持续部署
- git克隆 不带目录_Git 系统学习笔记
- Python培训分享:Python新版本中的6个新特性
- 2021年Java面试题目最新总结【90%面试会踩的坑】
- php redis set集合操作,php对redis的set(集合)操作
- 学习新对象字面量语法