ECMA Script 6_异步编程之 Promise
Promise 对象
异步编程 方案,已同步的方式表达异步的代码,解决回调地狱的问题
比传统的解决方案——回调函数和事件——更合理和更强大
是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果。
从语法上说,Promise 是一个对象,从它可以获取异步操作的消息。
Promise 提供统一的 API,各种异步操作都可以用同样的方法进行处理
- 基本使用
const promise = new Promise(function(resolve, reject) {
// ... some code if (/* 异步操作成功 */){
resolve(value);
} else {
reject(error);
}
}); promise
.then(
()=>{
console.log('成功的回调');
},
()=>{
console.log('失败的回调');
},
);
console.log('主线程执行完了'); /**** 等同于 ****/
const promise = new Promise((resolve, reject)=>{
/*
resolve 解决 成功 将 Promise 对象的状态 由初始化变成成功
reject 拒绝 失败 将 Promise 对象的状态 由初始化变成失败 Promise 三种状态
初始化状态
成功状态
失败状态
*/
setTimeout(function(){
const result = 202;
console.log('请求成功了');
resolve(result); // 触发成功的回调
}, 1000);
}); promise.then(result=>{
console.log('成功的回调'+result);
}).catch((result)=>{
console.log('失败的回调'+result);
});
console.log('主线程执行完了');- Promise.resolve() 和 Promise.reject() 创建对象,状态为 成功 和 失败

- Promise.all([要检测的对象数组]); // 在所有的 promise 都触发 resolve 回调,才会成功。
- 成功时接收 resolve ,失败只接收 reject。结果为数组

- 实例
/**** 简单 独立异步任务 ****/
const a = new Promise((resolve, reject)=>{
setTimeout(function(){
resolve("成功!");
}, 1000);
}); const aa = new Promise((resolve, reject)=>{
setTimeout(function(){
resolve("成功!");
}, 2000);
}); const aaa = new Promise((resolve, reject)=>{
setTimeout(function(){
resolve("成功!");
}, 3000);
}); Promise.all([a, aa, aaa]).then(result=>{
console.log(result); // 接收到数组是 每个 Promise 发送过来的结果
}).catch(result=>{
console.log(result);
}); console.log('主线程执行完了!'); /**** 复杂 分线程关联任务 ****/
const b = new Promise((resolve, reject)=>{
setTimeout(function(){
console.log("Done1"+"First");
resolve("Done1"+"First");
}, 1000);
}); b.then(result=>{
return new Promise((resolve, reject)=>{
setTimeout(function(){
console.log("Done2"+result);
resolve("Done2"+result);
}, 2000);
});
}).catch()
.then(result=>{
return new Promise((resolve, reject)=>{
setTimeout(function(){
console.log("Done3"+result);
resolve("Done3"+result);
}, 3000);
});
}).catch()
.then(result=>{
console.log("All Done!"+result);
}).catch() console.log('主线程执行完了!');
ECMA Script 6_异步编程之 Promise的更多相关文章
- 异步编程之Promise(3):拓展进阶
异步编程系列教程: (翻译)异步编程之Promise(1)--初见魅力 异步编程之Promise(2):探究原理 异步编程之Promise(3):拓展进阶 异步编程之Generator(1)--领略魅 ...
- 异步编程之Promise(2):探究原理
异步编程系列教程: (翻译)异步编程之Promise(1)--初见魅力 异步编程之Promise(2):探究原理 异步编程之Promise(3):拓展进阶 异步编程之Generator(1)--领略魅 ...
- (翻译)异步编程之Promise(1):初见魅力
原文:https://www.promisejs.org/ by Forbes Lindesay 异步编程系列教程: (翻译)异步编程之Promise(1)--初见魅力 异步编程之Promise(2) ...
- 前端异步编程之Promise和async的用法
传统的异步解决方案采用回调函数和事件监听的方式,而这里主要记录两种异步编程的新方案: ES6的新语法Promise ES2017引入的async函数 Generator函数(略) Promise的含义 ...
- JavaScript的异步编程之Promise
Promise 一种更优的异步编程统一 方法,如果直接使用传统的回调函数去完成复杂操作就会形成回调深渊 // 回调深渊 $.get('/url1'() => { $.get('/url2'() ...
- 异步编程之Generator(1)——领略魅力
异步编程系列教程: (翻译)异步编程之Promise(1)--初见魅力 异步编程之Promise(2):探究原理 异步编程之Promise(3):拓展进阶 异步编程之Generator(1)--领略魅 ...
- 异步编程之co——源码分析
异步编程系列教程: (翻译)异步编程之Promise(1)--初见魅力 异步编程之Promise(2):探究原理 异步编程之Promise(3):拓展进阶 异步编程之Generator(1)--领略魅 ...
- 异步编程之Generator(2)——剖析特性
异步编程系列教程: (翻译)异步编程之Promise(1)--初见魅力 异步编程之Promise(2):探究原理 异步编程之Promise(3):拓展进阶 异步编程之Generator(1)--领略魅 ...
- Javascript异步编程之setTimeout与setInterval详解分析(一)
Javascript异步编程之setTimeout与setInterval 在谈到异步编程时,本人最主要会从以下三个方面来总结异步编程(注意:特别解释:是总结,本人也是菜鸟,所以总结不好的,请各位大牛 ...
随机推荐
- 新年 flag
在浮躁的年代本不该如此贪多,奈何鸭梨山大...温故知新吧 GO中文社区 深入学习一两门新的编程语言: -Go编程基础 -Go Web基础 -Go名库讲解 rustlang 中文文档 知乎板块 GO 知 ...
- 还在用Json完成Ajax,改用Beetl吧
原文链接:https://blog.csdn.net/xiandafu/article/details/44216905 作者:Beetl作者,闲大赋 浏览器通过AJAX,服务器返回json数据,无刷 ...
- API.day01
第1部分 JDK API 1.1 API(Application Programming Interface,应用接口程序):已经封装好可以直接调用的功能(Java中以类的形式封装) 经常使用的JDK ...
- windows7 java环境配置
最近在工作碰到了在ie浏览器调用java程序时,出现了一些问题,所以在这里整理一下: jdk的下载地址为:http://666dx.pc6.com/wwb3/jdkx6417.zip 正对于windo ...
- Contest2154 - 2019-2-28 高一noip基础知识点 测试1 题解版
传送门 预计得分:100+100+100+100=400 实际得分:55+100+60+80=295 细节决定成败啊!!! T1 这道题思路很简单,就是一些细节很变态坑人 首先,数据不一定是有序的,虽 ...
- 集合-Comparator和Comparable
文章内容参考博客:https://www.cnblogs.com/xujian2014/p/5215082.html 1.Comparable Comparable是排序接口,当一个类实现了Compa ...
- Idea 创建控制台程序
1:前提配置好 jdk环境. 最后一步:填写项目名称和保存的路径 即可.
- GIt -- Window下配置 git
全局配置 git config --global user.name "账户名" git config --global use r.email '账户邮箱' 生成ssh,命令 ...
- laravel 汇总数据
public function userInfluenceCollect(Request $request) { $types = ['logins', "checkins", & ...
- 【转】 为什么我们做分布式使用Redis
绝大部分写业务的程序员,在实际开发中使用 Redis 的时候,只会 Set Value 和 Get Value 两个操作,对 Redis 整体缺乏一个认知.这里对 Redis 常见问题做一个总结,解决 ...