ES6之Promise用法解析

以你之姓@ 2022-12-01 01:23 206阅读 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结果

###### Promise.all ######

*  Promise.race() 类似于Promise.all() ，区别在于它有任意一个完成就算完成