JS的ES6的Promise

一.Promise

1.什么是Promise对象：代表未来某个将要发生的事件，一般指的是异步操作。

2.Promise对象

• 存在的目的：将异步操作以同步的流程表达出来，避免层层嵌套的回调函数（俗称回调地狱）

• 作用：解决异步回调

3.promise对象的3个状态：

• pending：初始化状态

• fullfilled：成功状态

• rejected：失败状态

4.使用promise对象的基本步骤：

1. 创建promise实例对象 -------> 初始化promise对象的状态为pending

2. 执行异步任务：开启定时器，发送ajax请求

3. 根据异步任务执行的结果去动态的修改promise对象的状态：resolve()成功，reject()失败

4. promise实例对象默认有个then方法，需要两个参数，这两个参数是两个回调函数

5. 当promise对象的状态标为成功或失败的时候会自动调用then方法中的回调函数

5.promise对象创建后直接执行：

         console.log("代码开始执行");

         setTimeout(() => {
           console.log("执行定时器");
         },);

         let promise = new Promise((resolve,reject) =>{
             console.log("初始化promise状态");

         });

         console.log(promise);

         console.log("代码执行结束");

从图中可以看出，promise对象创建后直接执行而其中可以定义异步方法。

6.promise中异步方法执行

promise中的异步方法只能同时设置resolve()或reject()中的一个，不能在一处同时设置两个。

执行后调用promise对象的then方法接收返回值

• 成功：then的第一个方法执行

• 失败：then的第二个方法执行

     console.log("代码开始执行");

     setTimeout(() => {
       console.log("执行定时器1");
     }, );

     let promise = new Promise((resolve, reject) => {
       console.log("初始化promise状态");
       setTimeout(() => {
         resolve();
         console.log("resolve()执行");
         // reject();
         // console.log("reject()执行");
       }, );
     });

     console.log(promise);

     console.log("代码执行结束");

     promise
       .then(()=>{
         console.log("resolve()执行为成功");

       },()=>{
         console.log("reject()执行为失败");

       });

7.promise对象的then()方法

（1）then()方法可以连续连接在一起，如果第一个异步任务执行成功后可继续执行第二个异步任务。

     let num = ;

     function util() {
       num++;
       let promise = new Promise((resolve, reject) => {
         console.log("初始化promise状态");
         setTimeout(() => {
           resolve(`第${num}个异步方法执行成功`);
           console.log("resolve(msg)执行");
           // reject("第一个异步方法执行失败");
           // console.log("reject(msg)执行");
         }, );
       });

       return promise;
     }

     util()
       .then((success) => {
         console.log(success);

         if (success) {

           return util();    //第二个异步任务
         }

       }, (failure) => {
         console.log(failure);

       })
     .then((success) =>{
       console.log(success);
     },(failure) =>{
       console.log(failure);
     });

（2）如果第一个任务执行无论成功或失败后，第一个then()方法中没有内容再继续接一个then()则默认执行成功方法。

得出结论，promise.then()方法执行后返回promise默认调用成功执行方法。

     let num = ;

     function util() {
       num++;
       let promise = new Promise((resolve, reject) => {
         console.log("初始化promise状态");
         setTimeout(() => {
           resolve(`第${num}个异步方法执行成功`);
           console.log("resolve(msg)执行");
           // reject("第一个异步方法执行失败");
           // console.log("reject(msg)执行");
         }, );
       });

       return promise;
     }

     util()
       .then((success) => {
         console.log(success);

       }, (failure) => {
         console.log(failure);

       })
     .then((success) =>{
       console.log(success);
       console.log(`第2个异步方法执行成功`);
     },(failure) =>{
       console.log(failure);
     });

     let num = ;

     function util() {
       num++;
       let promise = new Promise((resolve, reject) => {
         console.log("初始化promise状态");
         setTimeout(() => {
           // resolve(`第${num}个异步方法执行成功`);
           // console.log("resolve(msg)执行");
           reject(`第${num}个异步方法执行失败`);
           console.log("reject(msg)执行");
         }, );
       });

       return promise;
     }

     util()
       .then((success) => {
         console.log(success);

       }, (failure) => {
         console.log(failure);

       })
     .then((success) =>{
       console.log(success);
       console.log(`第2个异步方法执行成功`);
     },(failure) =>{
       console.log(failure);
       console.log(`第2个异步方法执行失败`);
     });

     let num = ;

     function util() {
       num++;
       let promise = new Promise((resolve, reject) => {
         console.log("初始化promise状态");
         setTimeout(() => {
           // resolve(`第${num}个异步方法执行成功`);
           // console.log("resolve(msg)执行");
           reject(`第${num}个异步方法执行失败`);
           console.log("reject(msg)执行");
         }, );
       });

       return promise;
     }

     util()
       .then((success) => {
         console.log(success);

       }, (failure) => {
         console.log(failure);

       })
     .then((success) =>{
       console.log(success);
       console.log(`第2个异步方法执行成功`);
     },(failure) =>{
       console.log(failure);
       console.log(`第2个异步方法执行失败`);
     })
     .then((success) =>{
       console.log(success);
       console.log(`第3个异步方法执行成功`);
     },(failure) =>{
       console.log(failure);
       console.log(`第3个异步方法执行失败`);
     });

8.promise应用场景：在第一个异步任务成功后调用第二个异步任务执行（例如第一个定时器执行成功后调用第二个定时器执行）

执行过程分析：