总概括

  • 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的更多相关文章

  1. 学习Promise笔记

    什么是Promise? MDN对Promise的定义:Promise对象用于异步操作,它表示一个尚未完成且预计在未来完成的异步操作. 在学习Promise之前得先了解同步与异步:JavaScript的 ...

  2. 通过 ES6 Promise 和 jQuery Deferred 的异同学习 Promise

    Deferred 和 Promise ES6 和 jQuery 都有 Deffered 和 Promise,但是略有不同.不过它们的作用可以简单的用两句话来描述 Deffered 触发 resolve ...

  3. node学习----Promise 初见

    今天在网上查看promise资料,发现promise有三种状态,pending,fullfilled,rejected.分别对应了初始化状态,成功状态及失败状态.为了理解写测试代码来实验:functi ...

  4. 学习 Promise,掌握未来世界 JS 异步编程基础

    其实想写 Promise 的使用已经很长时间了.一个是在实际编码的过程中经常用到,一个是确实有时候小伙伴们在使用时也会遇到一些问题.Promise 也确实是 ES6 中 对于写 JS 的方式,有着真正 ...

  5. ES6 学习 -- Promise对象

    1.promise含义:可以将promise对象看成是一个容器,它保存着未来才会结束的某个事件(一般是异步操作事件)的结果,各 种异步操作都可以用promise对象来处理promise的特点:(1)p ...

  6. 学习Promise异步编程

    JavaScript引擎建立在单线程事件循环的概念上.单线程( Single-threaded )意味着同一时刻只能执行一段代码.所以引擎无须留意那些"可能"运行的代码.代码会被放 ...

  7. 你是否也在学习ES6 Promise时遇到过这个问题?

    背景 周末闲来无事,随便翻看了一下阮一峰老师的<ES6 标准入门>第2版,ps:之前在阮一峰老师的官网看过电子版,感觉干货满满,所以就买了纸质版:当看到第16章第4节 'Promise.p ...

  8. 一起学习造轮子(一):从零开始写一个符合Promises/A+规范的promise

    本文是一起学习造轮子系列的第一篇,本篇我们将从零开始写一个符合Promises/A+规范的promise,本系列文章将会选取一些前端比较经典的轮子进行源码分析,并且从零开始逐步实现,本系列将会学习Pr ...

  9. [20190620]日常学习记录(三)-初识promise及vuex

    在学习promise之前重温了Ajax的原生js实现, 在原生js中发送一个http请求首先new XMLHttpRequest() 然后定义状态变更事件 浏览器监听请求的状态,触发不同状态下相应的代 ...

随机推荐

  1. Python 生成requirement 使用requirements.txt安装类库

    快速生成requirement.txt的安装文件 (CenterDesigner) xinghe@xinghe:~/PycharmProjects/CenterDesigner$ pip freeze ...

  2. Educational Codeforces Round 47 (Rated for Div. 2)E.Intercity Travelling

    题目链接 大意:一段旅途长度N,中间可能存在N-1个休息站,连续走k长度时,疲劳值为a1+a2+...+aka_1+a_2+...+a_ka1​+a2​+...+ak​,休息后a1a_1a1​开始计, ...

  3. MySQL对表数据操作

    一: 修改表信息 1.修改表名 alter table test_a rename to sys_app; 2.修改表注释 alter table sys_application comment '系 ...

  4. Axure8破解码

    升级了 8.0.0.3321 版本后,原来的 license 失效了,解决方法就是使用下面的这组注册码 License:米 业成 (STUDENT)Key:nFmqBBvEqdvbiUjy8NZiyW ...

  5. 安装.src.rpm

    .src.rpm在坟墓镜像中能找到,例如6.8 os 的rpm包的.src.rpm格式就存放在http://vault.centos.org/6.8/os/Source/ .src.rpm是源码包,是 ...

  6. XLMHttpRequest对象的status属性,readyState属性以及onreadystatechange事件

    注:XLMHttpRequest简写为XHR 一.HTTP请求过程 (1)建立TCP链接 (2)web浏览器向web服务器发送请求命令 (3)web浏览器发送请求头信息 (4)web服务器应答 (5) ...

  7. CentOS7下安装JDK详细过程

    Linux上一般会安装Open JDK,关于OpenJDK和JDK的区别:http://www.cnblogs.com/sxdcgaq8080/p/7487369.html 下面开始安装步骤: --- ...

  8. docker部署Javaweb环境数据库连接问题

    最近在docker部署了一个Javaweb项目运行的环境,在容器中部署了mysql和Javaweb项目,但是本地可以跑项目,放到容器里面不行. 具体报错内容是不能访问数据库. Could not ge ...

  9. 【转】HTTP

    [转]HTTP 一.http概述 超文本传输协议(HTTP,HyperText Transfer Protocol)是互联网上应用最为广泛的一种网络协议.所有的WWW文件都必须遵守这个标准.设计HTT ...

  10. vue2+axios在不同的环境打包不同的接口地址

    node.js的环境变量 process process 对象是一个 global (全局变量),提供有关信息,控制当前 Node.js 进程.作为一个对象,它对于 Node.js 应用程序始终是可用 ...