ES6处理异步的方式promise

野性酷女 2021-09-02 07:22 379阅读 0赞

# ES6处理异步的方式promise #

## 1、promise初使用 ##

大多数情况我们发起网络请求的时候都是利用Ajax异步请求。所以这个时候Ajax在没有得到请求的结果时是线程是异步的。在ES6的新语法中就有了promise这样一个类来更加优美地处理异步和异步的嵌套。

假如我们想要发起一个请求一，然后利用请求一得到的结果再发起请求二，再利用请求二的结果发起请求三，嵌套下去，我们的代码就会像这样：

$.ajax({ // 请求1
        success(res) { 
          $.ajax({ // 请求2
            success(res) { 
              $.ajax({ // 请求3
                success(res) { 
    
                },
              });
            },
          });
        },
      });

无限套娃，就会看起来特别累，所以promise就能更加优雅地处理异步。

首先我们先需要new一个promise对象：

new Promise();

他的构造函数需要一个参数，这个参数是一个函数：

new Promise(function () { 
    
      });

然后这个函数需要两个参数，分别是resolve（解决）和reject（拒绝）：

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

这样我们就可以在这个函数里面写异步体了，比如发送一个请求：

new Promise(function (resolve, reject) { 
        
        //异步体
        $.ajax({ 
          //请求的地址
          url: '',
          //请求类型
          type: '',
          //异步开启
          async :true,
          //请求的参数
          data: { },
          //请求成功的回调函数
          success(res) { 
            console.log(res);
          },
          //请求失败的回调函数
          error(res) { 
            console.log(res);
          }
        });// ajax
        
      });

然后promise厉害的一点就是不会在异步体里处理请求成功的数据，而是在外面，相当于异步体和异步结果的处理分开了：

new Promise(function (resolve, reject) { 
    
        //异步体
        $.ajax({ 
          //请求的地址
          url: '',
          //请求类型
          type: '',
          //异步开启
          async :true,
          //请求的参数
          data: { },
          //请求成功的回调函数
          success(res) { 
            console.log(res);
          },
          //请求失败的回调函数
          error(res) { 
            console.log(res);
          }
        });// ajax
    
      }).then(function () { 
    
      });

这个then函数的参数函数里就是对异步结果的处理，比如我想要打印上面ajax请求成功的结果：

new Promise(function (resolve, reject) { 
    
        //异步体
        $.ajax({ 
          //请求的地址
          url: '',
          //请求类型
          type: '',
          //异步开启
          async :true,
          //请求的参数
          data: { },
          //请求成功的回调函数
          success(res) { 
            resolve(res);// 调用resolve利用then函数来处理
          },
          //请求失败的回调函数
          error(res) { 
            console.log(res);
          }
        });// ajax
    
      }).then(function (res) { 
        // 异步成功结果处理
        console.log(res);
      });

promise比较厉害的一点就是在then里定义好对异步成功结果的处理，然后在异步体里成功的地方直接调用resolve()，实际上就是调用了then函数。同理，这是异步成功，异步失败的话就定义一个catch函数来捕获失败就好了：

new Promise(function (resolve, reject) { 
    
        //异步体
        $.ajax({ 
          //请求的地址
          url: '',
          //请求类型
          type: '',
          //异步开启
          async :true,
          //请求的参数
          data: { },
          //请求成功的回调函数
          success(res) { 
            resolve(res);// 调用resolve利用then函数来处理
          },
          //请求失败的回调函数
          error(res) { 
            reject(res);// 调用reject利用catch函数来处理
          }
        });// ajax
    
      }).then(function (res) { 
        // 异步成功结果处理
        console.log(res);
      }).catch(function (res) { 
        // 异步失败结果处理
        console.log(res)
      });

在catch函数里定义好异步失败结果的处理，然后在异步体里的失败处调用reject函数就可以使用catch里的代码了。

总结，promise实质上就是：

new Promise(/*异步体*/).then(/*异步成功结果的处理*/).catch(/*异步失败结果处理*/);

链式编程，第一个Promise需要传递的参数就是异步体，then里需要传递的就是对异步体成功结果的处理，catch就是对异步失败结果的处理。只不过这三个需要传递的参数就都是函数而已：

new Promise(function (resolve,reject) { 
        /*异步体*/
      }).then(function () { 
        /*异步成功结果的处理*/
      }).catch(function () { 
        /*异步失败结果处理*/
      });

## 2、利用promise处理异步嵌套 ##

所以刚才上述讲到的ajax异步请求嵌套就可以利用promise来更优美的处理：

先写好第一个promise处理异步：

new Promise(function (resolve,reject) { 
        $.ajax({  //请求一
          success(res) { 
            console.log(res);
          },
        });
      }).then(function () { 
        /*异步成功结果的处理*/
      });

然后在then里写好对请求一结果的处理并且发起请求二：

new Promise(function (resolve,reject) { 
        $.ajax({  //请求一
          success(res) { 
            resolve(res);
          },
        });
      }).then(function (res) { 
        // 拿到res并处理
        // 发起请求二
        return new Promise(function (resolve,reject) { 
          $.ajax({  //请求二
            success(res) { 
              console.log(res);
            },
          });
        }).then(function () { 
          /*异步成功结果的处理*/
        });
      });

需要在第一层promise的then里返回一个新的Promise对象，然后像之前promise一样处理就好了，定义好异步体，异步成功的处理，异步失败的处理，所以上述三层请求嵌套就是：

new Promise(function (resolve,reject) { 
        $.ajax({  //请求一
          success(res) { 
            resolve(res);// 利用promise1的then
          },
        });
      }).then(function (res) { 
        // 拿到请求一的res并处理
        // 发起请求二
        return new Promise(function (resolve,reject) { 
          $.ajax({  //请求二
            success(res) { 
              resolve(res);// 利用promise2的then
            },
          });
        }).then(function () { 
          // 拿到请求二的res并处理
          // 发起请求三
          return new Promise(function (resolve,reject) { 
            $.ajax({  //请求三
              success(res) { 
                resolve(res);// 利用promise3的then
              },
            });
          }).then(function () { 
            /*异步3成功结果的处理*/
          });
        });
      });

## 3、利用promise.all处理异步 ##

有的时候我们需要利用两个请求的共同结果来进行处理，比如现在有ajax1和ajax2，接下来我需要的是必须将两个请求的结果拿到，然后再将结果进行处理，少了一个就不行，这个时候我们就可以利用promise的all来处理这种异步。

首先，我们需要利用Promise对象的all()方法，这个all方法需要的参数是一个Promise对象数组：

Promise.all([]);

我们给他传入两个promise对象：

Promise.all([
          
          
        //promise1
        new Promise(function (resolve,reject) { 
          /*异步体*/
        }),
        
        
        //promise2
        new Promise(function (resolve,reject) { 
          /*异步体*/
        }),
          
          
      ]);

然后对两个的结果进行共同处理：

Promise.all([
    
    
        //promise1
        new Promise(function (resolve,reject) { 
          /*promise1异步体*/
        }),
    
        //promise2
        new Promise(function (resolve,reject) { 
          /*promise1异步体*/
        })
    
      ]).then(function (results) { 
        /*对promise数组的结果进行共同处理*/
      });

共同处理的then函数里的results就是promise异步成功结果的数组，比如promise1异步成功的结果就是results\[0\]，promise2异步成功的结果就是results\[1\]：

比如我利用两个ajax请求模拟：

Promise.all([
          
        //promise1
        new Promise(function (resolve,reject) { 
          $.ajax({ // 请求1
            success(res) { 
              resolve(res); //将请求1的结果传递给then
            }
          });
        }),
    
        //promise2
        new Promise(function (resolve,reject) { 
          $.ajax({ // 请求2
            success(res) { 
              resolve(res); //将请求2的结果传递给then
            }
          });
        })
    
      ]).then(function (results) { 
        /*对promise数组的结果进行共同处理*/
        console.log(results[0]);// promise1的成功结果
        console.log(results[1]);// promise2的成功结果
      });

总结就是利用Promise.all()同时处理多个异步，然后传递promise对象进行各自的异步处理，最后在利用Promise.all()的then来将获得的results成功结果数组进行统一处理。