ES6之Promise用法解析-蒲公英云

ES6之Promise用法解析

以你之姓@ 2022-12-01 01:23 294阅读 0赞

一.Promise是什么

promise是一个对象，对象和函数的区别就是对象可以保存状态，函数不可以（闭包除外）
并未剥夺函数return的能力，因此无需层层传递callback，进行回调获取数据

主要用于异步计算
可以将异步操作队列化，按照期望的顺序执行，返回符合预期的结果
可以在对象之间传递和操作promise，帮助我们处理队列
代码风格，容易理解，便于维护，多个异步等待合并便于解决

二.实例用法

1.简单用法

new Promise(function(resolve, reject) { 
        // 一段耗时的异步操作
        setTimeout(() => { 
          if (Math.random() < 0.5) { 
            resolve("处理成功");
          } else { 
            reject("处理失败");
          }
        }, 500);
      }).then(
        res => { 
          console.log(res);
        },
        err => { 
          console.log(err);
        }
      );

运行结果

16:18:39 GMT+0800 (中国标准时间)0.4296734200327992
16:18:39 GMT+0800 (中国标准时间)处理成功
16:18:41 GMT+0800 (中国标准时间)0.8346405813826019
16:18:41 GMT+0800 (中国标准时间)处理失败

2.顺序执行

new Promise(function(resolve, reject) { 
        // 一段耗时的异步操作
        setTimeout(() => { 
          var num = Math.random();
          console.log(new Date()+num);
          if (num < 0.5) { 
            resolve("处理成功");
          } else { 
            reject("处理失败");
          }
        }, 1000);
      })
        .then(
          res => { 
            console.log(new Date()+res);
            return new Promise(resolve => { 
              setTimeout(() => { 
                resolve(new Date()+"success");
              }, 2000);
            });
          },
          err => { 
            console.log(new Date()+err);
            return new Promise(resolve => { 
              setTimeout(() => { 
                resolve("err success");
              }, 3000);
            });
          }
        )
        .then(val => { 
          console.log(new Date()+val);
        });

运行结果：

16:16:29 GMT+0800 (中国标准时间)0.6184486563566081
16:16:29 GMT+0800 (中国标准时间)处理失败
16:16:32 GMT+0800 (中国标准时间)err success
16:16:44 GMT+0800 (中国标准时间)0.06319989438930618
16:16:44 GMT+0800 (中国标准时间)处理成功
16:16:46 GMT+0800 (中国标准时间)
16:16:46 GMT+0800 (中国标准时间)success

resolve作用
将Promise对象的状态从“未完成”变为“成功”（即从 pending 变为 resolved），在异步操作成功时调用，并将异步操作的结果，作为参数传递出去；
reject作用是
将Promise对象的状态从“未完成”变为“失败”（即从 pending 变为 rejected），在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。
promise作为队列最为重要的特性，我们在任何一个地方生成了一个promise队列之后，我们可以把他作为一个变量传递到其他地方。

3.并行执行

//呼叫1
      function call1() { 
        console.log(new Date() + "成员1已准备");
        return new Promise(function(resolve, reject) { 
          //异步操作
          setTimeout(function() { 
            var num = Math.random();
            console.log(new Date() + num);
            if (num < 0.5) { 
              resolve("成员1呼叫成功");
            } else { 
              reject("成员1呼叫失败");
            }
          }, 1000);
        });
      }
      //呼叫2
      function call2() { 
        console.log(new Date() + "成员2已准备");
        return new Promise(function(resolve) { 
          //异步操作
          setTimeout(function() { 
            resolve("成员2呼叫成功");
          }, 2000);
        });
      }
      Promise.race([call1(), call2()]).then(
        res => { 
          console.log(res);
        },
        err => { 
          console.log('异常：'+err);
        }
      );
      // Promise.all([call1(), call2()]).then(
      // res => { 
      // console.log(res);
      // },
      // err => { 
      // console.log('异常：'+err);
      // }
      // );

Promise.race 结果：

16:43:21 GMT+0800 (中国标准时间)成员1已准备
16:43:21 GMT+0800 (中国标准时间)成员2已准备
16:43:22 GMT+0800 (中国标准时间)0.4569487452864329
16:43:22 GMT+0800 成员1呼叫成功

Promise.all 测试结果：

16:40:34 GMT+0800 (中国标准时间)成员1已准备
16:40:34 GMT+0800 (中国标准时间)成员2已准备
16:40:35 GMT+0800 (中国标准时间)0.9975951934891232
16:40:35 GMT+0800 异常：成员1呼叫失败
16:40:37 GMT+0800 (中国标准时间)成员1已准备
16:40:37 GMT+0800 (中国标准时间)成员2已准备
16:40:38 GMT+0800 (中国标准时间)0.023790745067002295
16:40:38 GMT+0800 ["成员1呼叫成功", "成员2呼叫成功"]

Promise.all

Promise.all([p1, p2, p3])用于将多个promise实例，包装成一个新的Promise实例，返回的实例就是普通的promise,它接收一个数组作为参数
数组里可以是Promise对象，也可以是别的值，只有Promise会等待状态改变
当所有的子Promise都完成，该Promise完成，返回值是全部值得数组
有任何一个失败，该Promise失败，返回值是第一个失败的子Promise结果