狂虐ES6中的Promise(一)

web.jpeg

1.JS中的一些认知

同步异步

js 是一门单线程语言，js 引擎有一个主线程（main thread）用来解释和执行 js 程序,所以JS中的代码都是串行的, 前面没有执行完毕后面不能执行

任务分为同步任务和异步任务,如果所有的任务都是让主线程（main thread）来处理，如果任务很多个，就会造成线程堵塞,进而出现界面卡顿或者假死的现象

为了防止上述的界面卡顿或者假死的现象，所以要使用异步任务(比如:AJAX异步请求，定时器等操作)就会交给工作线程来处理，异步任务完成后将异步回调函数注册进任务队列，等待主线程空闲时调用

我们常见的异步执行代码在js中为 事件绑定的函数和回调函数

 console.log("1"); // 同步代码

    setTimeout(function () { // 异步代码
        console.log("2");
    }, 500);

    console.log("3"); // 同步代码

解释

主线程开始同步任务执行，执行console.log("1");
然后接下来，主线程遇见一个异步操作setTimeout，将改异步任务交给工作线程处理，异步任务完成之后，将回调函数注册进任务队列，等待被调用
继续同步任务处理，执行 console.log("3");
主线程空闲，调用任务队列中等待执行的回调函数，执行console.log("2");

2.Promise

在看primise之前我们先看一个需求任务，从网络上加载3个资源, 要求加载完资源1才能加载资源2, 加载完资源2才能加载资源3
实现方法如下:

//定义一个请求函数
 function quest(fn) {

       setTimeout(function () {
           fn("加载完成");
       },1000);
    }

//嵌套执行

  quest(function (data) {
        console.log(data,1);

        quest(function (data) {
            console.log(data,2);

            quest(function (data) {

                console.log(data,3);
            });
        });
    });

image.png

从上面的代码中我满可以知道，函数层层嵌套调用，代码的可维护性和代码的阅读性比较低

为了解决上述的问题ES6中推出了Promise

2.1什么是Promise

它是ES6中新增的一个对象
可以将异步操作以同步流程来表示, 避免了回调函数层层嵌套

使用Promise来试试刚刚上面的需求问题 ,一个简单的promise的认知

//创建一个函数
 function questPromise() {

        return new Promise(function (resolve,reject) {
                    setTimeout(function () {
                        resolve("收到数据");
                    },1000);
        });
    }

//调用
 questPromise().then(function (data) {
        console.log(data,1);
        return questPromise();
    }).then(function (data) {
        console.log(data,2);
        return questPromise();
    }).then(function (data) {

        console.log(data,3);
    })

image.png

上述的代码，Promise确实的解决了函数的层层嵌套问题，也用同步的方式表述了异步的操作，接下面我们就详细介绍一些Promise

2.2 Promise对象的创建

格式：new Promise(function(resolve, reject){});
resolve和 reject对应的是回调函数，更改Promise的状态
promise对象不是异步的，只要创建promise对象就会立马执行存放的代码

  console.log("1");

    let promise = new Promise(function (resolve,reject) {
        console.log("2")
    });
    console.log("3");

//从打印的结果来看，promise代码块里面的代码是 立马执行的

image.png

2.3 Promise是如何实现通过同步的流程来表示异步的操作的?

promise对象是通过 状态的改变 来实现的, 只要状态发生改变就会自动触发对应的函数
Promise对象三种状态
- pending: 默认状态，只要没有告诉promise任务是成功还是失败就是pending状态
- fulfilled(resolved): 只要调用resolve函数, 状态就会变为fulfilled, 表示操作成功
- rejected: 只要调用rejected函数, 状态就会变为rejected, 表示操作失败

  let promise =  new Promise(function (resolve,reject) {

    });
    console.log(promise);

pending默认的状态

状态更改为 resolved

let promise =  new Promise(function (resolve,reject) {
              //回调 
                resolve("状态更改");
    });

    console.log(promise);

resolved状态

状态更改为 reject

 let promise =  new Promise(function (resolve,reject) {
                // resolve("状态更改");
                    reject("状态更改为reject")
    });

    console.log(promise);

reject状态

注意点: 状态一旦改变既不可逆, 既从pending变为fulfilled, 那么永远都是fulfilled(resolve), 既从pending变为rejected, 那么永远都是rejected

2.4 监听`promise`变化的2个方法

resolved --> then()
rejected --> catch()

如果状态变为resolved,就会执行then方法

let promise = new Promise(function (resolve,reject) {
                resolve();
    });

    promise.then(function () {
        console.log(promise);
    });

image.png

如果状态变为rejected,就会执行catch方法

 let promise = new Promise(function (resolve,reject) {
               // resolve();
           reject();
    });
 promise.catch(function () {
        console.log(promise);
    });

image.png

2.5 `then`方法的注意点

then方法可以接受2个参数
- 状态切换为成功时的回调
- 状态切换为失败时的回调

 let promise = new Promise(function (resolve, reject) {
                // resolve();
            reject();
    });

    promise.then(function () {
        console.log("成功");
    },function () {
            console.log("状态失败");
    });

在修改promise状态时, 可以传递参数给then方法中的回到函数

 let promise = new Promise(function (resolve, reject) {
            resolve("测试");
    });

  // success =  resolve 函数
    let success = (data)=>{
        console.log(data);
    }

  // reject =  error 函数
    let error = (data)=>{
        console.log(data);
    }

    promise.then(success,error);

    //  success =  resolve 函数  reject =  error 函数

同一个promise对象可以多次调用then方法，当promise对象状态变化时所有的then方法都会执行

 let promise = new  Promise(function (resolve, reject) {
        resolve("多次调用then方法");
    });

    promise.then(function (data) {
        console.log(data);
    },function (error) {
        console.log(error);
    });

    promise.then(function (data) {
        console.log(data);
    },function (error) {
        console.log(error);
    });

image.png

then方法每次执行完毕后会返回一个新的promise对象

验证是不是返回了一个新的promise对象

 let promise = new Promise(function (resolve, reject) {
            resolve("验证");
    });

    let p = promise.then(function (data) {
            console.log(data);
    });

    //判断是不是 统一对象
    console.log(promise == p);

image.png

可以通过上一个promise对象的then方法,给下一个promise对象的then方法传递参数

注意:无论是在上一个promise对象成功的回调还是失败的回调传递的参数, 都会传递给下一个promise对象成功的回调

let promise = new Promise(function (resolve, reject) {
                resolve("data");
                // reject("失败");
    });

    let p2 = promise.then(function (data) {
        console.log(data,"1111");
        //给p2中的then方法 传递参数
        return "data2222";
    },function (data) {
        console.log(data,"1111");
        return "失败222";
    });

    //p2调用then方法
    p2.then(function (data2) {
        console.log(data2,"2222");
    },function (data2) {
        console.log(data2,"222--");
    })

image.png

如果then方法返回的是一个Promise对象, 那么会将返回的Promise对象的执行结果中的值,传递给下一个then方法


        let promise = new Promise(function (resolve, reject) {
                resolve("111111");
        });
        
        let p2 = new Promise(function (resolve, reject) {
                resolve("p2状态更改成功的回调");
        });

        let pp = promise.then(function (data) {
            console.log(data);
            //返回p2
            return p2;

        },function (data) {
            console.log(data);
            return "mmmmmm";
        });

        //p2装改改变的参数传递给pp
        pp.then(function (data) {
                console.log(data,"是不是p2");
        },function (data) {
            console.log(data,"失败p2");
        });

image.png

2.6 `catch方法`

如果需要分开监听, 也就是通过then监听成功通过catch监听失败
那么必须使用链式编程, 否则会报错

  let promise= new Promise(function (resolve, reject) {
                resolve("1111");
        });

        promise.then(function (data) {
            console.log(data);
        }).catch(function (data) {
            console.log(data);
        });

这就是解释了2.4状态变化的时候reject报错的, 那么为什么为报错呢？

如果promise的状态是失败, 但是没有对应失败的监听就会报错
then方法会返回一个新的promise, 新的promise会继承原有promise的状态
如果新的promise状态是失败, 但是没有对应失败的监听也会报错

 let promise= new Promise(function (resolve, reject) {
                reject("失败");
    });
    
//p2 继承了promise的 reject状态
   let p2 =   promise.then(function (data) {
        console.log(data);
    });

//防止报错
 p2.catch(function (data) {
       console.log(data);
   });

catch方法可以捕获promise对象then方法中的异常

  let promise = new Promise(function (resolve, reject) {
            resolve("成功过");
    });
    promise.then(function (data) {
        console.log(data);
        // obj这个变量不存在
        console.log(obj);
    }).catch(function (error) {
            console.log(error);
    });

image.png

2.6 - Promise的静态方法

2.6.1 -all方法

返回一个promise对象
all方法接收的是一个数组
数组中的多个promise对象，只有都成功才会执行then方法,并且按照添加的顺序，将所有的成功结果存放到一个数组中返回，这个返回的数组传给then函数的参数
如果数组中不是promise对象就会直接执行then方法

let p1 = new Promise(function (resolve, reject) {
        // resolve("111");
        reject("aaa");
    });
    let p2 = new Promise(function (resolve, reject) {
        setTimeout(function () {
            resolve("222");
        }, 5000);
    });
    let p3 = new Promise(function (resolve, reject) {
        setTimeout(function () {
            resolve("333");
        }, 3000);
    });

    Promise.all([p1, p2, p3]).then(function (result) {
// result 是返回成功的数组
        console.log("成功", result);
    }, function (err) {
        console.log("失败", err);
    });

使用场景: 批量加载, 要么一起成功, 要么一起失败

2.6.2 `race`方法

返回一个promise对象
race()参数是接收的是一个数组，数组中存放的promise对象，这些promise对象谁先返回就听谁的，后返回被抛弃，意思就说，这些promise对象哪一个状态先发生变化，就返回哪一个

一般应用在接口API的调试，超时处理

 let p1 = new Promise(function (resolve, reject) {

            setTimeout(function () {
                resolve("p1状态变化");
            },300);
    });

    let p2 = new Promise(function (resolve, reject) {
        setTimeout(function () {
            resolve("p2状态变化");
        },200);
    });


    Promise.race([p1,p2]).then(function (data) {
        console.log("第一个",data);
    }).catch(function (e) {
        console.log(e);
    })

image.png

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 204,590评论 6赞 478
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 86,808评论 2赞 381
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 151,151评论 0赞 337
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,779评论 1赞 277
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,773评论 5赞 367
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,656评论 1赞 281
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 38,022评论 3赞 398
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,678评论 0赞 258
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 41,038评论 1赞 299
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,659评论 2赞 321
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,756评论 1赞 330
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,411评论 4赞 321
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 39,005评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,973评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,203评论 1赞 260
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 45,053评论 2赞 350
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,495评论 2赞 343

狂虐ES6中的Promise(一)

1.JS中的一些认知

同步异步

2.Promise

2.1什么是Promise

2.2 Promise对象的创建

2.3 Promise是如何实现 通过同步的流程来表示异步的操作的?

2.4 监听promise变化的2个方法

2.5 then方法的注意点

2.6 catch方法

2.6 - Promise的静态方法

2.6.1 -all方法

2.6.2 race方法

推荐阅读更多精彩内容

2.3 Promise是如何实现通过同步的流程来表示异步的操作的?

2.4 监听`promise`变化的2个方法

2.5 `then`方法的注意点

2.6 `catch方法`

2.6.2 `race`方法