ES6 Promise对象概念及用法实例详解


Posted in Javascript onOctober 15, 2019

本文实例讲述了ES6 Promise对象概念及用法。分享给大家供大家参考,具体如下:

参考文章:ECMAScript 6 入门

一、 Promise是什么

Promise是异步编程的一种解决方案,它是一个容器,里面保存着某个未来才会结束的事件的结果。它有三种状态,只有异步操作的结果才能决定当前的状态,不受外界因素的影响。而一旦状态改变,就不会再变,也就是状态凝固了(resolved),任何时候都可以得到这个结果。

ES6 Promise对象概念及用法实例详解

Promise的缺点:
1. 无法取消Promise,一旦新建它就会立即执行,无法中途取消。
2. 如果不设置回调函数,Promise内部抛出的错误,不会反应到外部。
3. 当处于pending状态时,无法得知目前进展到哪一个阶段(刚刚开始还是即将完成)。

二、Promise的用法

/**
 * 创建Promise实例
 * @type {Promise}
 * @param resolve 在异步操作成功时调用
 * @param reject 在异步操作失败时调用
 */
const promise = new Promise(function(resolve, reject) {
  // ... some code
  if (/* 异步操作成功 */){
    resolve(value);
  } else {
    reject(error);
  }
});
//调用Promise
promise.then(function(value) {
 // success
}, function(error) {
 // failure
});

Promise 新建后就会立即执行。

let promise = new Promise(function(resolve, reject) {
 console.log('Promise');
 resolve();
});
promise.then(function() {
 console.log('resolved.');
});
console.log('Hi!');
// Promise (Promise 新建后立即执行,所以首先输出的是Promise)
// Hi!
// resolved (then方法指定的回调函数,将在当前脚本所有同步任务执行完才会执行,所以resolved最后输出)

如果调用resolve函数和reject函数时带有参数,那么它们的参数会被传递给回调函数。reject函数的参数通常是Error对象的实例,表示抛出的错误;resolve函数的参数除了正常的值以外,还可能是另一个 Promise 实例。

const p1 = new Promise(function (resolve, reject) {
 setTimeout(() => reject(new Error('fail')), 3000)
})
const p2 = new Promise(function (resolve, reject) {
 setTimeout(() => resolve(p1), 1000)
})
p2
 .then(result => console.log(result))
 .catch(error => console.log(error))
// Error: fail

上面代码中,p1是一个 Promise,3 秒之后变为rejected。p2的状态在 1 秒之后改变,resolve方法返回的是p1。由于p2返回的是另一个 Promise,导致p2自己的状态无效了,由p1的状态决定p2的状态。所以,后面的then语句都变成针对后者(p1)。又过了 2 秒,p1变为rejected,导致触发catch方法指定的回调函数。

三、Promise原型上的方法

Promise.prototype.then()

  1. then方法的第一个参数是resolved状态的回调函数,第二个参数(可选)是rejected状态的回调函数。
  2. then方法返回的是一个新的Promise实例,但不是原来那个Promise实例。因此可以采用链式写法,即then方法后面再调用另一个then方法。
getJSON("/post/1.json").then(
 post => getJSON(post.commentURL)
).then(
 comments => console.log("resolved: ", comments),
 err => console.log("rejected: ", err)
);

Promise.prototype.catch()

  1. Promise.prototype.catch方法是.then(null, rejection)的别名,用于指定发生错误时的回调函数。
  2. Promise 对象的错误具有“冒泡”性质,会一直向后传递,直到被捕获为止。也就是说,错误总是会被下一个catch语句捕获。
getJSON('/post/1.json').then(function(post) {
 return getJSON(post.commentURL);
}).then(function(comments) {
 // some code
}).catch(function(error) {
 // 处理前面三个Promise产生的错误
});
//上面代码中,一共有三个 Promise 对象:一个由getJSON产生,两个由then产生。它们之中任何一个抛出的错误,都会被最后一个catch捕获。

Promise.prototype.finally()

  • finally方法用于指定不管 Promise 对象最后状态如何,都会执行的操作。该方法是 ES2018 引入标准的。
  • finally方法的回调函数不接受任何参数,这意味着没有办法知道,前面的 Promise 状态到底是fulfilled还是rejected。这表明,finally方法里面的操作,应该是与状态无关的,不依赖于 Promise 的执行结果。

四、Promise的方法

Promise.all()

  1. Promise.all方法用于将多个 Promise 实例,包装成一个新的 Promise 实例。
  2. const p = Promise.all([p1, p2, p3]);
    1. 只有p1、p2、p3的状态都变成fulfilled,p的状态才会变成fulfilled,此时p1、p2、p3的返回值组成一个数组,传递给p的回调函数。
    2. 只要p1、p2、p3之中有一个被rejected,p的状态就变成rejected,此时第一个被reject的实例的返回值,会传递给p的回调函数。
  3. 如果p1、p2、p3有自己的catch方法,则不会触发p的catch方法,如果没有,才会调用Promise.all()的catch方法。
const p1 = new Promise((resolve, reject) => {
 resolve('hello');
})
.then(result => result)
.catch(e => e);
const p2 = new Promise((resolve, reject) => {
 throw new Error('报错了');
})
.then(result => result)
.catch(e => e);
Promise.all([p1, p2])
.then(result => console.log(result))
.catch(e => console.log(e));
// ["hello", Error: 报错了]
-------------------------------------------------------------------
const p1 = new Promise((resolve, reject) => {
 resolve('hello');
})
.then(result => result);
const p2 = new Promise((resolve, reject) => {
 throw new Error('报错了');
})
.then(result => result);
Promise.all([p1, p2])
.then(result => console.log(result))
.catch(e => console.log(e));
// Error: 报错了

Promise.race()

  1. Promise.race方法同样是将多个 Promise 实例,包装成一个新的 Promise 实例。
  2. race内部的一个实例率先改变状态,Promise.race()的状态就跟着改变。那个率先改变的Promise实例的返回值,就传递给Promise.race()的回调函数。

Promise.resolve()

  1. 有时需要将现有对象转为 Promise 对象,Promise.resolve方法就起到这个作用。
  2. Promise.resolve方法的参数分成四种情况。
    1. 参数是一个 Promise 实例:如果参数是 Promise 实例,那么Promise.resolve将不做任何修改、原封不动地返回这个实例。
    2. 参数是一个thenable对象:thenable对象指的是具有then方法的对象,Promise.resolve方法会将这个对象转为 Promise 对象,然后就立即执行thenable对象的then方法。
    3. 参数不是具有then方法的对象,或根本就不是对象:如果参数是一个原始值,或者是一个不具有then方法的对象,则Promise.resolve方法返回一个新的 Promise 对象,状态为resolved。
    4. 不带有任何参数:Promise.resolve方法允许调用时不带参数,直接返回一个resolved状态的 Promise 对象。

需要注意的是,立即resolve的 Promise 对象,是在本轮“事件循环”(event loop)的结束时,而不是在下一轮“事件循环”的开始时。

setTimeout(function () {
 console.log('three');
}, 0);
Promise.resolve().then(function () {
 console.log('two');
});
console.log('one');
// one
// two
// three

Promise.reject()

  1. Promise.reject(reason)方法也会返回一个新的 Promise 实例,该实例的状态为rejected。
  2. 注意,Promise.reject()方法的参数,会原封不动地作为reject的理由,变成后续方法的参数。这一点与Promise.resolve方法不一致。
const thenable = {
 then(resolve, reject) {
  reject('出错了');
 }
};
Promise.reject(thenable)
.catch(e => {
 console.log(e === thenable)
})
// true

五、Promise的应用

包装http请求

在使用vue的过程中,我们用Promise对Axios进行了包装。

newAxios.post = function (url, params) {
 params = qs.stringify(params);
 return new Promise((resolve, reject) => {
  Axios.post(url, params)
   .then(res => {
    if (res.headers.warning === "redirect") {
     window.location.href = "/"
    } else {
     resolve(res);
    }
   })
   .catch(err => {
    reject(err);
   })
 })
};

处理异步请求

使用Promise.all()方法可以处理异步请求,比如某些请求需要在前面几个请求完成之后才触发。

后续待补充。

附:ECMAScript 6 入门本站下载地址:https://3water.com/books/551561.html

更多关于JavaScript相关内容可查看本站专题:《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
IE php关于强制下载文件的代码
Aug 23 Javascript
JS OOP包机制,类创建的方法定义
Nov 02 Javascript
JQuery中模拟image的ajaxPrefilter与ajaxTransport处理
Jun 19 Javascript
Vue filter介绍及其使用详解
Oct 21 Javascript
详解JS模块导入导出
Dec 20 Javascript
node.js文件上传重命名以及移动位置的示例代码
Jan 19 Javascript
webstorm+vue初始化项目的方法
Oct 18 Javascript
详解vuex 渐进式教程实例代码
Nov 27 Javascript
微信网页登录逻辑与实现方法
Apr 29 Javascript
五分钟搞懂Vuex实用知识(小结)
Aug 12 Javascript
解决layui laydate 时间控件一闪而过的问题
Sep 28 Javascript
vue router返回到指定的路由的场景分析
Nov 10 Javascript
详解Vue.js 作用域、slot用法(单个slot、具名slot)
Oct 15 #Javascript
vue vantUI实现文件(图片、文档、视频、音频)上传(多文件)
Oct 15 #Javascript
ES6中let、const的区别及变量的解构赋值操作方法实例分析
Oct 15 #Javascript
vue使用@scroll监听滚动事件时,@scroll无效问题的解决方法详解
Oct 15 #Javascript
vue实现树形结构样式和功能的实例代码
Oct 15 #Javascript
谈谈IntersectionObserver懒加载的具体使用
Oct 15 #Javascript
js实现开关灯效果
Mar 30 #Javascript
You might like
php下过滤HTML代码的函数
2007/12/10 PHP
PHP数组对比函数,存在交集则返回真,否则返回假
2011/02/03 PHP
PHP的Yii框架中使用数据库的配置和SQL操作实例教程
2016/03/17 PHP
PHP入门教程之数组用法汇总(创建,删除,遍历,排序等)
2016/09/11 PHP
PHP基于GD2函数库实现验证码功能示例
2019/01/27 PHP
Thinkphp自定义生成缩略图尺寸的方法
2019/08/05 PHP
laravel框架模板之公共模板、继承、包含实现方法分析
2019/08/30 PHP
Javascript 各浏览器的 Javascript 效率对比
2008/01/23 Javascript
jQuery live
2009/05/15 Javascript
JS Replace 全部替换字符的用法小结
2013/12/24 Javascript
jQuery文字轮播特效
2017/02/12 Javascript
JavaScript中运算符规则和隐式类型转换示例详解
2017/09/06 Javascript
基于Vue实现拖拽功能
2020/07/29 Javascript
Vue.js项目中管理每个页面的头部标签的两种方法
2018/06/25 Javascript
Vue入门之数量加减运算操作示例
2018/12/11 Javascript
react项目如何使用iconfont的方法步骤
2019/03/13 Javascript
js之切换全屏和退出全屏实现代码实例
2019/09/09 Javascript
layui点击左侧导航栏,实现不刷新整个页面,只刷新局部的方法
2019/09/25 Javascript
[49:20]VG vs TNC Supermajor小组赛B组败者组决赛 BO3 第二场 6.2
2018/06/03 DOTA
Python读写ini文件的方法
2015/05/28 Python
在Python的Django框架中获取单个对象数据的简单方法
2015/07/17 Python
python daemon守护进程实现
2016/08/27 Python
PyCharm设置SSH远程调试的方法
2018/07/17 Python
python3中os.path模块下常用的用法总结【推荐】
2018/09/16 Python
python实现RabbitMQ的消息队列的示例代码
2018/11/08 Python
Python enumerate函数功能与用法示例
2019/03/01 Python
基于SQLAlchemy实现操作MySQL并执行原生sql语句
2020/06/10 Python
GE设备配件:GE Appliance Parts(家电零件、配件和滤水器)
2018/11/28 全球购物
大学生冰淇淋店商业计划书
2014/01/14 职场文书
一份创业计划书范文
2014/02/08 职场文书
岗位工作说明书
2014/07/29 职场文书
小学生2014国庆节演讲稿:祖国在我心中
2014/09/21 职场文书
2014年社区宣传工作总结
2014/12/02 职场文书
教师节倡议书2015
2015/04/27 职场文书
草系十大最强宝可梦,纸片人上榜,榜首大家最熟悉
2022/03/18 日漫
python实现学员管理系统(面向对象版)
2022/06/05 Python