ES6中的Promise使用总结
One、什么是Promise?
Promise是异步编程的解决方案,而它本身也就是一个构造函数,比传统的异步解决【回调函数】和【事件】更合理,更强大。
Two、Promise有何作用?
作用:解决回调地狱
当我们在写逻辑函数时,可能函数内部会有另一个函数,而我们在处理一些比较复杂的操作的时候,有可能里面会嵌套十几二十个函数都说不定,那么看一下下面的代码:
//需求 : 异步操作按照顺序执行(异步默认无序)
//需求: (1)先读取a (2)然后读取b (3)然后读c (4)最后读取d
const fs = require('fs');
//下面出现了回调地狱
//(1)读取A
fs.readFile('./data/a.txt', 'utf8', (err, data) => {
if (err) {
throw err;
} else {
console.log(data);
//(2)读取B
fs.readFile('./data/b.txt', 'utf8', (err, data) => {
if (err) {
throw err;
} else {
console.log(data);
//(3)读取C
fs.readFile('./data/c.txt', 'utf8', (err, data) => {
if (err) {
throw err;
} else {
console.log(data);
//(4)读取D
fs.readFile('./data/d.txt', 'utf8', (err, data) => {
if (err) {
throw err;
} else {
console.log(data);
}
})
}
})
}
})
}
})
像这样的代码维护起来非常麻烦,那么如何使用Promise来解决?看下来:
Three、promise基本使用:
(1)实例化promise对象(将异步放入promise容器) :
let p = new Promise((resolve,reject)=>{ 你的异步操作 })
(2)调用promise实例的then方法 (处理异步结果):
p.then(data=>{},err=>{})
再看一个根据上面优化的代码:
const fs = require('fs');
//1.创建Promise实例化对象 (Promise是一个构造函数,作用是创建promise实例)
//参数是一个回调函数 : (resolve, reject)=>{ 你的异步操作 }
let p = new Promise((resolve,reject)=>{
fs.readFile('./data/b.txt','utf8',(err,data)=>{
if(!err){
//成功
/*
1.成功就执行resolve() , 会调用then的第一个函数
*/
resolve(data);
}else{
//失败
/*
2.失败就执行reject(),会调用then的第二个函数
*/
reject(err);
}
});
});
//2.调用promise实例的then方法
/*
第一个参数: 回调函数 (data)=>{}
第二个参数: 回调函数 (err)=>{}
*/
p.then(data=>{
//成功
console.log(data);
},err=>{
//失败
console.log(err);
});
Four、Promise原理介绍 :
(1)promise有三种状态
pending:进行中
fulfilled:已成功
rejected:已失败
1-----只有异步操作的结果,可以决定Promise是哪一种状态,任何其他操作都无法改变这个状态
2-----一旦Promise状态改变,就不会再有变化,任何时候都可以得到这个结果。Promise对象的状态改变,只有两种可能:从pending变为fulfilled 或者 从pending变为rejected。只要这两种情况发生,状态就不会再变了,会一直保持这个结果,这时就称为 resolved(已定型)。如果改变已经发生了,你再对Promise对象添加回调函数,也会立即得到这个结果。这与事件(Event)不同,事件的特点是,如果你错过了它,再去监听,是得不到结果的
使用Promise的好处,就是在处理异步程序时,将异步操作队列化,按照期望的顺序执行,返回符合预期的结果,这样即使是多重异步操作,也可以方便的使用Promise进行链式调用
3-----Promise也有一些缺点
首先,无法取消Promise,一旦新建它就会立即执行,无法中途取消。其次,如果不设置回调函数,Promise内部抛出的错误,不会反应到外部。第三,当处于pending状态时,无法得知目前进展到哪一个阶段(刚刚开始还是即将完成)
第二部分、循序渐进的介绍Promise的用法
(2)promise状态改变只有两种情况
从pending进行中变成fulfilled:已成功
从pending进行中变成rejected: 已失败
(3)promise中的异步函数在创建的时候会默认执行
* a. 异步永远都是无序的,这一点无法改变的
* b. promise没有改变异步的顺序,而是改变异步的结果
* c. 不要在创建promise的时候去操作异步的结果,应该调用resolve在then方法种操作结果
(4)promise控制异步操作顺序的核心原理 : 在上一个promise的then方法中return下一个promise
const fs = require('fs');
//需求: (1)先读取a (2)然后读取b (3)然后读c (4)最后读取d
//(1)实例化promise对象
let p1 = new Promise((resolve,reject)=>{
//异步操作
fs.readFile('./data/a.txt','utf8',(err,data)=>{
if(!err){//成功执行的操作
/*
(1)resolve() 调用then的第一个函数
(2)作用: 改变promise的状态 从 从pending进行中变成fulfilled:已成功
*/
resolve(data);
}else{
/*
(1)resolve() 调用then的第二个函数
(2)作用: 从pending进行中变成rejected: 已失败
*/
reject(err);
};
});
});
let p2 = new Promise((resolve,reject)=>{
//异步操作
fs.readFile('./data/b.txt','utf8',(err,data)=>{
if(!err){//成功执行的操作
resolve(data);
}else{
reject(err);
};
});
});
let p3 = new Promise((resolve,reject)=>{
//异步操作
fs.readFile('./data/c.txt','utf8',(err,data)=>{
if(!err){//成功执行的操作
resolve(data);
}else{
reject(err);
};
});
});
//(2)调用promise实例的then方法
p1.then(data=>{
console.log(data); //这是p1的数据
return p2;//在p1的then方法中返回p2
})
.then(data=>{//调用p2的then方法
console.log(data); //这是p2的数据
return p3;
})
.then(data=>{//调用p3的then方法
console.log(data); //这是p3的数据
});
精辟个人总结:promise控制异步顺序的本质 不是控制异步操作的本身 ,而是控制异步操作的结果
Five、Promise的catch方法的使用:
catch作用: 捕捉promise的异常
const fs = require('fs');
//需求: (1)先读取a (2)然后读取b (3)然后读c (4)最后读取d
function getPromise(fileName) {
return new Promise((resolve, reject) => {
//异步操作
fs.readFile(`./data/${fileName}.txt`, 'utf8', (err, data) => {
if (!err) {//成功
resolve(data);
} else {
reject(err);
};
});
});
}
/* catch作用: 捕捉promise的异常 */
//(1)实例化promise对象
let p1 = getPromise('a');
let p2 = getPromise('b');
let p3 = getPromise('c');
//(2)调用promise实例的then方法
p1.then(data=>{
console.log(data);
return p2;
}).then(data=>{
console.log(data);
return p3;
}).then(data=>{
console.log(data);
}).catch(err=>{
//上面所有的promise只要有任何一个出现错误,就会执行catch
console.log(err);
})
Six、Promise的all方法的使用:
all作用 : 将多个promise合并成一个promise,所有的promise执行完毕才会走then方法 (&&)
const fs = require('fs');
//需求: (1)先读取a (2)然后读取b (3)然后读c (4)最后读取d
function getPromise(fileName) {
return new Promise((resolve, reject) => {
//异步操作
fs.readFile(`./data/${fileName}.txt`, 'utf8', (err, data) => {
if (!err) {//成功
resolve(data);
} else {
reject(err);
};
});
});
}
/* 1.catch作用: 捕捉promise的异常
2.all作用 : 将多个promise合并成一个promise,所有的promise执行完毕才会走then方法
*/
//(1)实例化promise对象
let p1 = getPromise('a');
let p2 = getPromise('b');
let p3 = getPromise('c');
//多个promise合并成一个promise
let pAll = Promise.all([p1,p2,p3]);
//(2)调用promise实例的then方法
pAll.then(data=>{
//所有的promise都执行完毕,data是一个数组,存储每一个promise的操作结果
console.log(data);
return p2;
}).catch(err=>{
//上面所有的promise只要有任何一个出现错误,就会执行catch
console.log(err);
})
Seven、Promise的race方法的使用:
race作用: 将多个promise合并成一个promise,任意primise执行完毕就会走then方法 (||)
//(1)实例化promise对象
let p1 = getPromise('/ada/dada');
let p2 = getPromise('b');
let p3 = getPromise('c');
//多个promise合并成一个promise
let pAll = Promise.race([p1, p2, p3]);
//(2)调用promise实例的then方法
Promise.race([p1, p2, p3]).then(data => {
//任意promise执行完毕就会走then,此时其他的promise不再执行
console.log(data);
}, (err) => {
console.log('有文件错误');
})
喜欢分享,喜欢学习,这些确实是在遇到的问题中解决问题的个人总结,如果喜欢,请点个赞,也欢迎到下方评论,我们一起探讨技术......
ES6中的Promise使用总结的更多相关文章
- es6中的promise对象
Promise是异步里面的一种解决方案,解决了回调嵌套的问题,es6将其进行了语言标准,同意了用法,提供了`promise`对象, promise对象有三种状态:pending(进行中) .Resol ...
- 深入理解 JavaScript 异步系列(3)—— ES6 中的 Promise
第一部分,Promise 加入 ES6 标准 原文地址 http://www.cnblogs.com/wangfupeng1988/p/6515855.html 未经作者允许不得转载! 从 jquer ...
- ES6中的Promise用法
Node的产生,大大推动了Javascript这门语言在服务端的发展,使得前端人员可以以很低的门槛转向后端开发. 当然,这并不代表迸发成了全栈.全栈的技能很集中,绝不仅仅是前端会写一些HTML和一些交 ...
- es6中的Promise学习
关于Promise Promise实例一旦被创建就会被执行 Promise过程分为两个分支:pending=>resolved和pending=>rejected Promise状态改变后 ...
- ES6中的Promise使用方法与总结
在javascript中,代码是单线程执行的,对于一些比较耗时的IO操作,都是通过异步回调函数来实现的. 但是这样会存在一个问题,当下一个的操作需要上一个操作的结果时,我们只能把代码嵌到上一个操作的回 ...
- [转]JS - Promise使用详解2(ES6中的Promise)
原文地址:https://www.hangge.com/blog/cache/detail_1638.html 2015年6月, ES2015(即 ECMAScript 6.ES6) 正式发布.其中 ...
- ES6中的Promise和Generator详解
目录 简介 Promise 什么是Promise Promise的特点 Promise的优点 Promise的缺点 Promise的用法 Promise的执行顺序 Promise.prototype. ...
- 理解ES6中的Promise
一.Promise的作用 在ajax请求数据的过程中,我们可以异步拿到我们想要的数据,然后在回调中做相应的数据处理. 这样做看上去并没有什么麻烦,但是如果这个时候,我们还需要做另外一个ajax请求,这 ...
- ES6中的Promise详解
Promise 在 JavaScript 中很早就有各种的开源实现,ES6 将其纳入了官方标准,提供了原生 api 支持,使用更加便捷. 定义 Promise 是一个对象,它用来标识 JavaScri ...
- es6中,promise使用过程的小总结
参考资料传送门:戳一戳 1.是什么 Promise是异步编程的一种解决方案,有三种状态:pending(进行中).fulfilled(已成功)和rejected(已失败); 一般成功了状态用resol ...
随机推荐
- JVM如何判断对象能否被回收
•写在前面说起Java和C++,很容易想到让人疯狂的指针,Java使用了内存动态分配和垃圾回收技术,让我们从C++的各种指针问题中摆脱出来,更加专心于业务逻辑,不过如果我们需要深入了解java的JVM ...
- particlesJS is not defined
插件或者js文件在引入时需要注意引入顺序,每次都找很久的错误 一般引入min.js就可以,min.js意思就是压缩的js文件 引入时应该先加入min类的文件在引入配置文件 比如particles插件, ...
- 蒲公英Ghost Win 7 Sp1(x86/x64)旗舰版 201910
蒲公英Ghost Win 7 Sp1(x86/x64)旗舰版 201910 <ignore_js_op> <ignore_js_op> <ignore_js_op> ...
- 华为OD两轮技术面试
华为OD面试1性格测试选积极向上的选项,注意,性格测试也会挂人,我一个朋友性格测试就没过.2机试 一道变成题目 1h 用例60%通过即可任给一个数组,元素有20M,1T,300G之类的,其中1T=10 ...
- 安装 Kali Linux 2018.1 及之后的事
本文为原创文章,转载请标明出处 目录 制作U盘启动盘 安装 Kali Linux 之后的事 更新源 配置 Zsh 配置 Vim 修改 Firefox 语言为中文 安装 Gnome 扩展 美化 安装 G ...
- CentOS7使用firewalld管理防火墙与端口
firewalld的基本使用 启动: systemctl start firewalld 关闭: systemctl stop firewalld 查看状态: systemctl status fir ...
- 当async: true 时,ajax请求是异步的
方法beforeSend,用于在向服务器发送请求前添加一些处理函数. type:"GET",//通常会用到两种:GET,POST.默认是:GET url:" ...
- Proto3:编码
本文介绍protocol buffer消息二进制传输格式.在应用程序中使用protocol buffer时,你并不需要了解这些,但它对你了解protocol buffer格式如何影响你的编码消息的大小 ...
- android-interview
如何减小安装包的大小 主要是减小资源的大小 不常使用的资源,使用时再从网络下载. 绘制代替图片资源 OOM (Out Of Memory) https://www.zhihu.com/question ...
- PHP正则表达式-修饰符
我们在PHP正则表达式的学习中会碰到修饰符,那么关于PHP正则表达式修饰符的理解以及使用我们需要注意什么呢?那么我们来具体的看看它的概念以及相关内容.在学习PHP正则表达式修饰符之前先来理解下贪婪模式 ...