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('有文件错误');
 })

喜欢分享,喜欢学习,这些确实是在遇到的问题中解决问题的个人总结,如果喜欢,请点个赞,也欢迎到下方评论,我们一起探讨技术......

个人github地址请移步-->

 

ES6中的Promise使用总结的更多相关文章

  1. es6中的promise对象

    Promise是异步里面的一种解决方案,解决了回调嵌套的问题,es6将其进行了语言标准,同意了用法,提供了`promise`对象, promise对象有三种状态:pending(进行中) .Resol ...

  2. 深入理解 JavaScript 异步系列(3)—— ES6 中的 Promise

    第一部分,Promise 加入 ES6 标准 原文地址 http://www.cnblogs.com/wangfupeng1988/p/6515855.html 未经作者允许不得转载! 从 jquer ...

  3. ES6中的Promise用法

    Node的产生,大大推动了Javascript这门语言在服务端的发展,使得前端人员可以以很低的门槛转向后端开发. 当然,这并不代表迸发成了全栈.全栈的技能很集中,绝不仅仅是前端会写一些HTML和一些交 ...

  4. es6中的Promise学习

    关于Promise Promise实例一旦被创建就会被执行 Promise过程分为两个分支:pending=>resolved和pending=>rejected Promise状态改变后 ...

  5. ES6中的Promise使用方法与总结

    在javascript中,代码是单线程执行的,对于一些比较耗时的IO操作,都是通过异步回调函数来实现的. 但是这样会存在一个问题,当下一个的操作需要上一个操作的结果时,我们只能把代码嵌到上一个操作的回 ...

  6. [转]JS - Promise使用详解2(ES6中的Promise)

    原文地址:https://www.hangge.com/blog/cache/detail_1638.html 2015年6月, ES2015(即 ECMAScript 6.ES6) 正式发布.其中  ...

  7. ES6中的Promise和Generator详解

    目录 简介 Promise 什么是Promise Promise的特点 Promise的优点 Promise的缺点 Promise的用法 Promise的执行顺序 Promise.prototype. ...

  8. 理解ES6中的Promise

    一.Promise的作用 在ajax请求数据的过程中,我们可以异步拿到我们想要的数据,然后在回调中做相应的数据处理. 这样做看上去并没有什么麻烦,但是如果这个时候,我们还需要做另外一个ajax请求,这 ...

  9. ES6中的Promise详解

    Promise 在 JavaScript 中很早就有各种的开源实现,ES6 将其纳入了官方标准,提供了原生 api 支持,使用更加便捷. 定义 Promise 是一个对象,它用来标识 JavaScri ...

  10. es6中,promise使用过程的小总结

    参考资料传送门:戳一戳 1.是什么 Promise是异步编程的一种解决方案,有三种状态:pending(进行中).fulfilled(已成功)和rejected(已失败); 一般成功了状态用resol ...

随机推荐

  1. django框架基础-ORM基础-长期维护

    ###############    ORM介绍  ################ """ ORM简介: ORM 全拼Object-Relation Mapping. ...

  2. 【Linux_Shell 脚本编程学习笔记四、监控系统内存并报警企业案例脚本】

    前置知识:awk 参考学习博客:https://www.cnblogs.com/bugingcode/p/8287914.html awk 'BEGIN{ commands } pattern{ co ...

  3. [LC] 253. Meeting Rooms II

    Given an array of meeting time intervals consisting of start and end times [[s1,e1],[s2,e2],...] (si ...

  4. 制作MACOSX 10.9Mavericks安装启动U盘教程

    苹果OS X Mavericks发布了,不少朋友又开始制作系统安装U盘了.其实下面介绍的方法与之前介绍的方法可能有些不同,不过原理还是一样的.下面看看具体的操作步骤吧! 1. 首先你需要开启显示隐藏文 ...

  5. 3DMAX 卸载工具,完美彻底卸载清除干净3dmax各种残留注册表和文件

    一些同学安装3dmax出错了,也有时候想重新安装3dmax的时候会出现这种本电脑windows系统已安装3dmax,你要是不留意直接安装,只会安装3dmax的附件,3dmax是不会安装上的.这种原因呢 ...

  6. SpringBoot打印MyBatis sql日志输出

    SpringBoot打印MyBatis sql日志输出 默认情况下mybatis是不开启SQL日志输出,需要手动配置 方法一:(在mybatis整合在springboot框架的情况下) 只需要在配置文 ...

  7. spring配置ConcurrentMap实现缓存

    spring本身内置了对Cache的支持,本次记录的是基于Java API的ConcurrentMap的CacheManager配置. 1.xml文件中增加命名空间 <beans xmlns=& ...

  8. Python实现链表倒序(带头指针)

    class ListNode(object): def __init__(self, x): self.val = x self.next = None def reverseList(self, h ...

  9. PHP 全局使用 Laravel 辅助函数 dd

    dump() 方法 全局 composer.json 12345 "require": { "squizlabs/php_codesniffer": " ...

  10. textarea 实现高度自动增长

    有时候希望textarea 能够自动调整高度来适应输入的内容 网上看到了很多解决方案,比如动态创建一个隐藏的div,当用户输入的时候将textarea的内容绑定到div,由于div的高度会自动撑开,因 ...