[Es6]原生Promise的使用方法
参考:https://www.cnblogs.com/imwtr/p/5916793.html
1、new Promise(func)
通过实例化构造函数成一个promise对象,构造函数中有个函数参数,函数参数为(resolve, reject)的形式,供以函数内resolve成功以及reject失败的调用
2、.then(onFulfilled, onRejected)
then方法,方法带两个参数,可选,分别为成功时的回调以及失败时的回调
3、.catch(onRejected)
catch方法,方法带一个参数,为失败时的回调。其实.catch方法就是 .then(undefined, onRejected)的简化版,通过例子看看它的特点
function log(n) {
return new Promise(function(resolve, reject) {
setTimeout(function() {
if (n % 2) {
resolve('奇数:' + n);
} else {
reject('偶数:' + n);
}
}, 1000);
});
}
log(2).then(function(data) {
console.log(data);
return log(3);
}).catch(function(err) {
console.log(err);
});
看这个例子,then中只有一个参数,调用log(2)之后reject执行,到达catch中输出

4、Promise.all()方法
Promise.all()方法接受一个promise的数组对象,只有数组中所有的promise都执行成功,整个promise才算成功,如果数组对象中有个promise执行失败,则整个promise就失败
看这个简单的例子,意图是调用log(1,2,3,4,5)这个promise完成之后再调用log(6),其中相应值小于3就resolve,反之就reject
function log() {
var promises = [];
[...arguments].forEach(function(n) {
promises.push(new Promise(function(resolve, reject) {
var info = '';
setTimeout(function() {
if (n < 3) {
info = '小于3 resolve:' + n;
console.log(info);
resolve(info);
} else {
info = 'reject:' + n;
console.log(info);
reject(info);
}
}, 1000);
}));
});
return Promise.all(promises);
}
log(1, 2, 3, 4, 5).then(function(data) {
console.log(data);
return log(6);
}).catch(function(err) {
console.log(err);
});
首先,依次将相应实例化的promise对象存入promises数组,通过Promise.all()调用返回,执行结果为

由输出结果知,1和2被resolve,3、4、5被reject,整个数组里已经有多于一个的promise对象被reject,仅仅触发了catch中的回调,所以log(6)得不到执行
5、Promise.race()方法
与Promise.all()类似,它也接受一个数组对象作为参数,但其意义不一样
只有数组中所有的promise都执行失败,整个promise才算失败,如果数组对象中有个promise执行成功,则整个promise就成功
把上述代码的all换成race,执行结果为:

6、Promise.resolve()方法
除了在实例化Promise构造函数内部使用resolve之外,我们还可以直接调用resolve方法
var promise = Promise.resolve('resolve one');
// var promise = Promise.reject('reject one');
promise.then(function(data) {
console.log(data); // resolve one
}).catch(function(err) {
console.log(err);
});
7、Promise.reject()方法
除了在实例化Promise构造函数内部使用reject之外,我们还可以直接调用reject方法
类似于Promise.resolve()中参数的多样化,且看以下几个栗子:
setTimeout(function () {
console.log('three');
}, 0);
Promise.reject().catch(function () {
console.log('two');
});
console.log('one');
// one
// two
// three
// var promise = Promise.resolve('resolve one');
var promise = Promise.reject('reject one');
promise.then(function(data) {
console.log(data);
}).catch(function(err) {
console.log(err); // reject one
});
8、Promise的反模式
关于Promise有很多难点技巧点,比如以下四中调用方式的区别
doSomething().then(function () {
return doSomethingElse();
});
doSomethin().then(functiuoin () {
doSomethingElse();
});
doSomething().then(doSomethingElse());
doSomething().then(doSomethingElse);
相关解释见:谈谈使用 promise 时候的一些反模式
[Es6]原生Promise的使用方法的更多相关文章
- ES6原生Promise的所有方法介绍(附一道应用场景题目)
JS的ES6已经出来很久了,作为前端工程师如果对此还不熟悉有点说不过去.不过如果要问,Promise原生的api一共有哪几个?好像真的可以难倒一票人,包括我自己也忽略了其中一个不常用的API Prom ...
- 浅谈ES6原生Promise
浅谈ES6原生Promise 转载 作者:samchowgo 链接:https://segmentfault.com/a/1190000006708151 ES6标准出炉之前,一个幽灵,回调的幽灵,游 ...
- Node.js用ES6原生Promise对异步函数进行封装
Promise的概念 Promise 对象用于异步(asynchronous)计算..一个Promise对象代表着一个还未完成,但预期将来会完成的操作. Promise的几种状态: pending:初 ...
- ES6中promise的使用方法
先看看ES5中异步编程的使用. let ajax = function (callBlack) { setTimeout(function () { callBlack && call ...
- ES6的promise对象应该这样用
ES6修补了一位Js修真者诸多的遗憾. 曾几何时,我这个小白从js非阻塞特性的坑中爬出来,当我经历了一些回调丑陋的写法和优化的尝试之后,我深深觉得js对于多线程阻塞式的开发语言而言,可能有着其太明显的 ...
- ES6的promise的学习
1.Promise的含义: Promise是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理和更强大.它由社区最早提出和实现,ES6将其写进了语言标准,统一了用法,原生提供了Pro ...
- ES6中Promise对象个人理解
Promise是ES6原生提供的一个用来传递异步消息的对象.它减少了传统ajax金字塔回调,可以将异步操作以同步操作的流程表达出来使得代码维护和可读性方面好很多. Promise的状态: 既然是用来传 ...
- ES6的Promise浅析
Promise 是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理和更强大. 它由社区最早提出和实现,ES6 将其写进了语言标准,统一了用法,原生提供了 Promise 对象. P ...
- ES6的Promise对象
http://es6.ruanyifeng.com/#docs/promise Promise 对象 Promise 的含义 基本用法 Promise.prototype.then() Promise ...
随机推荐
- delphi 解决android 9上无法使用http协议
delphi 解决android 9上无法使用http协议 安卓9不让客户端通过非https方式访问服务端数据(不允许发送明文http请求)的问题. 解决方法: 1.选择安卓平台编译一次程序,在项目根 ...
- 初识kaggle,以及记录 kaggle的使用
1.简介:Kaggle是一个数据建模和数据分析竞赛的平台.企业和研究者可在其上发布数据,统计学者和数据挖掘专家可在其上进行竞赛,通过“众包”的形式以产生最好的模型.Kaggle可以分为Competit ...
- socket_timeout
https://github.com/pika/pika/blob/03542ef616a2a849e8bfb0845427f50e741ea0c6/docs/examples/using_urlpa ...
- 如何正确查看Linux机器内存使用情况
如何正确查看Linux机器内存使用情况 背景 只要工作上涉及到Linux机器,基本上都会有这样一个需求,查看内存使用情况,但是怎么看才正确呢?之前使用的是top命令,一直存在一个误区. 为什么top命 ...
- Springboot集成MapperFactory(ma.glasnost.orika.MapperFactory)类属性复制
一.导入Jar() gradle方式 compile group: 'ma.glasnost.orika', name: 'orika-core', version: '1.5.1' maven方式 ...
- 阶段5 3.微服务项目【学成在线】_day18 用户授权_14-细粒度授权-我的课程细粒度授权-需求分析
3.3 我的课程细粒度授权 3.3.1 需求分析 1.我的课程查询,细粒度授权过程如下: 1)获取当前登录的用户Id 2)得到用户所属教育机构的Id 3)查询该教学机构下的课程信息 最终实现了用户只允 ...
- java从包package中获取所有的Class
1.从包package中获取所有的Class方法: /** * 从包package中获取所有的Class * @param pack * @return */ public static List ...
- Qt编写控件属性设计器8-网络采集
一.前言 上一篇文章已经打通了数据源之一的串口采集,这次要说的是网络采集,网络通信目前用的最多的是三种,TCP/UDP/HTTP,其中tcp通信又包括了客户端服务端两种,tcp通信才用了多次握手机制不 ...
- APPSCAN使用外部浏览器的方法
在使用appscan扫描时,自带浏览器可能存在兼容性问题(比如HTML5),故需要用到其他浏览器.在做139邮箱HTML5项目,需要使用chrome浏览器进行扫描.因此分享下如何使用外部浏览器,将之前 ...
- 学习 TTreeView [15] - 连接数据库 (作为给 "丁永其" 和 "DELPHI万岁" 两位朋友的回复)
本例效果图: unit Unit1; interface uses Windows, Messages, SysUtils, Variants, Classes, Graphics, Contro ...