22.6.10学习笔记---Promise

---

一、Promise基本概念

1.简介

Promise是ES6中新增的异步编程解决方案,本质为一个对象

2.作用

企业开发中为了保存异步代码的执行顺序, 那么就会出现回调函数层层嵌套
如果回调函数嵌套的层数太多, 就会导致代码的阅读性, 可维护性大大降低

而 promise对象可以将异步操作以同步流程来表示, 避免了回调函数层层嵌套(回调地狱)

应用举例：从网络上加载3个资源, 要求加载完资源1才能加载资源2, 加载完资源2才能加载资源3

二、Promise使用

1.使用规范

new Promise(function(resolve, reject){});

实现原理：promise对象是通过状态的改变来实现的, 只要状态发生改变就会自动触发对应的函数 前面任何一个资源加载失败, 后续资源都不加载

2.状态介绍

状态	说明
pending	默认状态，只要没有告诉promise任务是成功还是失败就是pending状态
fulfilled(resolved)	只要调用resolve函数, 状态就会变为fulfilled, 表示操作成功
rejected	只要调用resolve函数, 状态就会变为fulfilled, 表示操作成功

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

3.then方法

then方法接收两个参数
第一个参数是状态切换为成功时的回调, 第二个参数是状态切换为失败时的回调
promise.then(function () {}, function () {});

then方法特点：

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

let promise = new Promise(function (resolve, reject) {
       resolve("111"); // 将状态修改为成功 
    // reject("aaa"); // 将状态修改为失败 
   });
   // promise.then(function (data) {
   //     console.log("成功", data);
   // }, function (data) {
   //     console.log("失败", data);
   // });
```javascript
2. 同一个promise对象可以多次调用then方法
   当改变promise对象的状态时所有then方法都会被执行
```javascrip
let promise = new Promise(function (resolve, reject) {
       resolve(); //将状态修改为成功
     //reject(); //将状态修改为失败
   });
   promise.then(function () {
       console.log("成功1");
   }, function () {
       console.log("失败1");
   });
   promise.then(function () {
       console.log("成功2");
   }, function () {
       console.log("失败2");
   });
```javascript
3. then方法每次执行完毕后会返回一个全新的promise对象
```javascrip
let promise = new Promise(function (resolve, reject) {
       //resolve();   //将状态修改为成功
       reject();  //将状态修改为失败
   });
   let p2 = promise.then(function () {
       console.log("成功1");
   }, function () {
       console.log("失败1");
   });
   let p3 = p2.then(function () {
       console.log("成功2");
   }, function () {
       console.log("失败2");
   });
   p3.then(function () {
       console.log("成功3");
   }, function () {
       console.log("失败3");
   });
   console.log(promise);
   console.log(p2);
   console.log(p3);
   console.log(promise === p2);//false
   console.log(p3 === p2);//false

前提为产生对象的then方法里面有两个参数,返回的为非promise对象
若最初的promis对象状态是默认，则then返回的都为默认状态

若最初的promis对象状态是成功或失败，则then返回的都为成功状态

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

   无论是在 上一个promise对象成功的回调还是失败的回调 传递的参数,都会传递给下一个promise对象then方法成功的回调!!!

let promise = new Promise(function (resolve, reject) {
        reject("aaa");  // 将状态修改为失败
        //resolve("111"); // 将状态修改为成功
    });
    let p2 = promise.then(function (data) {
        console.log("成功1", data);//成功1 111
        return "222";
    }, function (data) {
        console.log("失败1", data);//失败1 aaa
        return "bbb";
    });
    p2.then(function (data) {
        console.log("成功2", data);//成功2 222 或者 成功2 bbb
    }, function (data) {
        console.log("失败2", data);
    });

5. 如果then方法返回的是一个Promise对象, 那么会将返回的Promise对象中传递的值传递给下一个then方法的参数
   并且这个promise对象的状态就是then方法产生的那个promise对象的状态

 let promise = new Promise(function (resolve, reject) {
        resolve("111"); // 将状态修改为成功
        //reject("aaa"); // 将状态修改为失败
    });
    let p = new Promise(function (resolve, reject) {
        //resolve("222"); // 将状态修改为成功
        //reject("bbb"); // 将状态修改为失败
    });
    let pp = new Promise(function (resolve, reject) {
        //resolve("333"); // 将状态修改为成功
        //reject("ccc"); // 将状态修改为失败
    });
    let p2 = promise.then(function (data) {
        console.log("成功1", data);//成功1 111
        return p;
    }, function (data) {
        console.log("失败1", data);//失败1 aaa
        return pp;
        //return "ddd";//返回的不是promise对象则p2的状态一定为成功
    });
    p2.then(function (data) {
        console.log("成功2", data);//成功2 222 或者 成功2 ddd
    }, function (data) {
        console.log("失败2", data);
    });
    // + + 成功1 111 成功2 222
    // + - 成功1 111 失败2 bbb
    // - + 失败1 aaa 成功2 333
    // - - 失败1 aaa 失败2 ccc

3.catch方法

catch 其实是 then(undefined, () => {}) 的语法糖（Syntactic sugar） ¹

catch方法特点和then一致

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

 let promise = new Promise(function (resolve, reject) {
       resolve();
   });
promise.then(function () {
     console.log("成功");
     xxx
 }).catch(function (e) {
     console.log("失败", e);//e是错误原因
 });

注意点：如果需要分开监听, 即通过then监听成功，通过catch监听失败那么必须使用链式编程，否则会抛出异常

  let promise = new Promise(function (resolve, reject) {
        //resolve(); // 将状态修改为成功
        reject(); // 将状态修改为失败
    });
    promise.then(function (){console.log('成功');}).catch(function (){console.log('失败');})
    
    // let it = promise.then(function () {//因为then方法没有第二个参数产生的新promise对象是失败状态，所以需要给他一个失败方法的监听不然会抛出异常
    //     console.log("成功");
    // });
    // console.log(it);//失败
    // it.catch(function () {
    //     console.log("失败");
    // });    

三 、Promise静态方法

1.all方法

all方法接收一个数组

如果数组中有多个Promise对象,只有都成功的情况才会执行then方法,并且会按照添加的顺序（并不是加载的快慢顺序）, 将所有成功的结果重新打包到一个数组中返回
如果数组中不是Promise对象, 那么会直接执行then方法

2.race方法

race方法接收一个数组

如果数组中有多个Promise对象, 谁先返回状态就听谁的, 后返回的会被抛弃
如果数组中不是Promise对象, 那么会直接执行then方法

---

总结

今日完成10个任务点
一个百度输入框案例

---

1. 语法糖（Syntactic sugar），也译为糖衣语法，指计算机语言中添加的某种语法，这种语法对语言的功能并没有影响，但是更方便程序员使用 通常来说使用语法糖能够增加程序的可读性，从而减少程序代码出错的机会 ↩︎