学习promise
总概括
- promise是js异步编程的一种解决方案
- 我对promise的认识(通俗):给一个承诺promise,如果未来发生的事情(异步操作)是符合满足相应条件,则接受resolve,否则失败reject。这个决定是一旦做了,就不会发生改变。根据接受或失败承诺来决定下一步then应该做什么
- promise的基本使用
- 调用new Promise(func)构造函数,func是一个函数,会立即执行(和一般回调用不同)
- 一个promise的决议是一次且不可更改的
- 一个promise只有三种状态:pending, rejected, fulfilled
- resolve, reject不会终结函数的执行,只是设置了一下状态
- promise.then是promise决议后的下一步操作,它的返回仍是一个Promise对象
1 //通过构造函数创建一个Promise对象
2 //构造函数的参数是一个函数,该函数参数为resovle和reject
3 //异步操作成功时调用resolve,失败时调用reject
4 var promise = new Promise(function(resolve, reject){
5 if(/*异步成功*/){
6 resolve(value);//调用resolve,将promise状态置为接受
7 }
8 else{
9 reject(error);//调用reject,将promise状态置为拒绝
10 }
11 });
12 //根据上面promise决议的结果,then决定下一步怎么做
13 promise
14 .then(
15 function(){/*promise决议结果为resolved*/},
16 function(){/*promise决议结果为rejected*/}
17 )
- Promise.prototype.then()决议后下一步的回调
- Promise.prototype.catch()决议中出现异常错误时的回调
- Promise.all([p1,p2...])参数为多个promise构成的数组,一个rejected则全部rejected,所有fulfilled才fulfilled
- Promise.race([p1,p2...])参数为多个promise构成的可枚举对象(如数组),以最先完成的为准
- Promise.resolve(), Promise.reject():直接返回决议fulfilled或rejected的promise
Promise的决议
- promise只有三种状态:pending(未决议),fulfilled(成功),rejected(失败)
- 只决议一次,无法修改,无法中途取消或修改
1 var promise = new Promise(function(resolve, reject){
2 setTimeout(function(){
3 resolve('resolve');
4 reject('reject');//这次的决议会被忽略
5 }, 3000);
6 })
7 promise.then(
8 function(){
9 console.log('第一次resolve');//setTimeout后,决议结果为resolve。虽然promise在下面会指向另一个rejected的对象
10 },
11 function(){
12 console.log('第一次reject');
13 }
14 )
15 //把promise指向另一个对象(决议失败)
16 promise = new Promise(function(resolve, reject){
17 reject();
18 })
19 promise.then(
20 function(){
21 conosle.log('第二次resolve');
22 },
23 function(){
24 console.log('第二次reject');
25 }
26 )
Promise.prototype.then()
- promise状态改变时的回调函数,接受两个参数,第一个是fulfilled回调,第二个是rejected回调
- 如果promise状态是pending的话,then里面的操作是不会执行的
- 仍然返回一个Promise对象,不是原来那个!
- 基于第二点,可以链式执行then。promise.then().then()...
- 对一个promise决议结果注册多个then,执行时按注册顺序执行(链式也是先执行完第一次注册的)
1 var promise = new Promise((resolve, reject)=>{
2 resolve('resolve');
3 })
4 var p1 = promise.then(()=>{
5 console.log('第一个resolve then');
6 })
7 .then(function(){
8 console.log('第一个resolve then后继续执行then')
9 })
10 var p2 = promise.then(()=>{
11 console.log('第二个resolve then');
12 })
13 .then(()=>{
14 console.log('第二个resolve then后继续执行then');
15 })
16 //执行结果
17 //第一个resolve then
18 //第二个resolve then
19 //第一个resolve then后继续执行then
20 //第二个resolve then后继续执行then
Promise.prototype.catch()
- 用于指定发生错误时的回调函数,是.then(null, function(err){})的别名,也是返回一个promise(fulfilled)
- 在运行中抛出错误,状态会变成rejected。先注册了reject,则执行reject,若reject中无错则不再执行catch。否则执行catch
- 先resolve(状态已经确定),之后抛出错误,不会被catch捕获
- Promise 会吃掉错误:在promise内部的错误不会被外部发现
1 //catch会捕获错误
2 var promise = new Promise((resolve, reject)=>{
3 throw new Error('promise error');
4 });
5 // promise.then(null, ()=>{
6 // console.log('故意throw Error,注册的reject回调');
7 // })
8 promise
9 .catch((err)=>{
10 console.log('故意throw Error catch error: ', err);
11 console.log(promise);
12 })
13 //Promise会吃掉错误
14 promise = new Promise((resolve, reject)=>{
15 resolve();
16 throw new Error('promise error');//这个错误不会在外部被发现
17 console.log('抛出错误后的部分');//这里也不会执行
18 });
19 promise.then(()=>{//虽然throw错误了,但还是会执行这个resolve回调
20 console.log('resolve后,throw Error,注册的resolve回调');
21 })
22 .catch((err)=>{//并不能捕获上面resolve后的错误
23 console.log('resolve后,throw Error,注册的catch回调: ', err);
24 })
Promise.all([p1, p2, p3])
- 当参数中所有promise都是fulfilled,才返回fulfilled promise
- 当出现一个rejected,则直接返回rejected promise。即使其它还在pending
- 参数中promise间不互相影响。如果前一个异常,后面也不会停止
function tickPromise(index, t){
return new Promise((resolve, reject)=>{
setTimeout(function(){
resolve();
console.log('Promise.all 这是第' + index + '个promise');
}, t);
})
}
Promise.all([Promise.reject('reject'), tickPromise(1, 1000)])
.then(
function(){
console.log('Promise.all reject先执行完:resolve');
},
function(){
console.log('Promise.all reject先执行完:reject');
}
)
Promise.race([p1, p2, p3])
以最先执行的promise为准
Promise.resolve()
参数 | 操作 |
Promise对象 | 直接返回该对象(状态一致) |
有then函数的对象 | 先返回pending状态promise,接着立即调用then函数 |
普通对象或值 | 以该值为参数调用resolve,返回一个promise |
var promise = Promise.resolve({
then: function(resolve, reject){
console.log('Promise.resolve: thenable对象的then函数');
setTimeout(function(){resolve()}, 3000);
}
});
console.log('promise.resolve刚赋值后的promise: ', promise);
var interval = setInterval(function(){console.log(promise)}, 1000);
setTimeout(function(){clearInterval(interval)}, 4000);
//结果:
//promise.resolve刚赋值后的promise: Promise {<pending>}
//Promise.resolve: thenable对象的then函数
//Promise {<pending>}
//Promise {<pending>}
//Promise {<pending>}
//Promise {<resolved>: undefined}
Promise.reject(param)
返回一个Promise,状态为rejected,值为传入的参数param
学习promise的更多相关文章
- 学习Promise笔记
什么是Promise? MDN对Promise的定义:Promise对象用于异步操作,它表示一个尚未完成且预计在未来完成的异步操作. 在学习Promise之前得先了解同步与异步:JavaScript的 ...
- 通过 ES6 Promise 和 jQuery Deferred 的异同学习 Promise
Deferred 和 Promise ES6 和 jQuery 都有 Deffered 和 Promise,但是略有不同.不过它们的作用可以简单的用两句话来描述 Deffered 触发 resolve ...
- node学习----Promise 初见
今天在网上查看promise资料,发现promise有三种状态,pending,fullfilled,rejected.分别对应了初始化状态,成功状态及失败状态.为了理解写测试代码来实验:functi ...
- 学习 Promise,掌握未来世界 JS 异步编程基础
其实想写 Promise 的使用已经很长时间了.一个是在实际编码的过程中经常用到,一个是确实有时候小伙伴们在使用时也会遇到一些问题.Promise 也确实是 ES6 中 对于写 JS 的方式,有着真正 ...
- ES6 学习 -- Promise对象
1.promise含义:可以将promise对象看成是一个容器,它保存着未来才会结束的某个事件(一般是异步操作事件)的结果,各 种异步操作都可以用promise对象来处理promise的特点:(1)p ...
- 学习Promise异步编程
JavaScript引擎建立在单线程事件循环的概念上.单线程( Single-threaded )意味着同一时刻只能执行一段代码.所以引擎无须留意那些"可能"运行的代码.代码会被放 ...
- 你是否也在学习ES6 Promise时遇到过这个问题?
背景 周末闲来无事,随便翻看了一下阮一峰老师的<ES6 标准入门>第2版,ps:之前在阮一峰老师的官网看过电子版,感觉干货满满,所以就买了纸质版:当看到第16章第4节 'Promise.p ...
- 一起学习造轮子(一):从零开始写一个符合Promises/A+规范的promise
本文是一起学习造轮子系列的第一篇,本篇我们将从零开始写一个符合Promises/A+规范的promise,本系列文章将会选取一些前端比较经典的轮子进行源码分析,并且从零开始逐步实现,本系列将会学习Pr ...
- [20190620]日常学习记录(三)-初识promise及vuex
在学习promise之前重温了Ajax的原生js实现, 在原生js中发送一个http请求首先new XMLHttpRequest() 然后定义状态变更事件 浏览器监听请求的状态,触发不同状态下相应的代 ...
随机推荐
- bash test命令探秘
shell 测试条件命令 http://blog.csdn.net/yangruibao/article/details/7427503 test 和 [ 命令 虽然 Linux 和 UNIX 的每个 ...
- Nginx正反向代理、负载均衡等功能实现配置
版权声明:本文为博主原创文章,未经博主允许不得转载. 目录(?)[+] 系统环境: VirtualBox Manager Centos6.4 nginx1.10.0 IP对应的机器名: IP ...
- 【全文转载】Precision Helper:最佳免费 CHM 制作软件
跳至内容 善用佳软 IT义工的个人博客: 善用佳软= (善意+善于)应用优秀软件 xbeta= x(未知数)+β(改进测试版) Precision Helper:最佳免费 CHM 制作软件 许多用户都 ...
- 使用Python批量修改文件名
使用os.rename(fold,newfilename)对文件重命名 # coding:utf-8 import os filename_list = os.listdir('./') for fi ...
- 洛谷 P1032 【字串变换】
感觉这个题用一些常用的stl和string函数会非常简单..(难道就是考这两个的吗? vector<pair<string,string>>pos//用于变化 map<s ...
- MLE
独立同分布的采样x1,x2,…,xn,θ为模型参数,f为我们所使用的模型.参数为θ的模型f产生上述采样可表示为 f(x1,x2,…,xn|θ)=πf(xi|θ) 已知的为x1,x2,…,xn,未知为θ ...
- SFTP免密码登录原理
概述 Public Key认证的主要魅力在于认证时承诺不必提供密码就能够同远程系统建立连接. Public Key认证的基础在于一对密钥,public key和private key,public k ...
- python中重要的模块--asyncio 转载
转载自: https://www.cnblogs.com/zhaof/p/8490045.html 一直对asyncio这个库比较感兴趣,毕竟这是官网也非常推荐的一个实现高并发的一个模块,python ...
- CentOS6.8合并DVD1和DVD2作为本地yum源
转载自:http://www.study365.org/blog/45.html CentOS一般都会提供DVD1和DVD2两个镜像文件,形如CentOS-6.8-x86_64-bin-DVD1.is ...
- sublime text 3 左侧目录树中文文件夹显示方框问题解决
0 - 解决方法 打开Preferences->Settings 在弹出的Settings对话框中,加入"dpi_scale": 1.0 重新启动sublime text 3 ...