• 重温JS——（ES6）异步编程（promise对象、async函数）

     目录

    异步编程

    1、promise对象

    （1）概述

    （2）promise使用

    （3）链式操作用法

    （4）reject的用法

    （5）catch的用法

    2、async函数

    （1）async

    （2）await

    异步编程

    笔试题：

    1.         //笔试题   .catch调用的条件
    2.         var p1=new Promise(function(n1,n2) {
    3.             var re =new Error("hello")
    4.             n1(re)
    5.         })
    6.         p1.then(function (data) {
    7.             console.log(data)    //这个会打印
    8.         })
    9.         .catch(function (e) {  //当产生了错误数据==>n2调用  或者 创建错误，并且throw抛出错误，这个函数才会调用
    10.             console.log(e)   //这个不会打印
    11.         })

    es6 提供了一些构造函数：Map、Set、Promise 等等

    1、promise对象

    （1）概述

    • promise是异步编程的一种解决方案。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。

    • Promise 异步操作有三种状态：pending（进行中）、fulfilled（已成功）和 rejected（已失败）。除了异步操作的结果，任何其他操作都无法改变这个状态。

    • Promise 对象只有：从 pending 变为 fulfilled 和从 pending 变为 rejected 的状态改变。只要处于 fulfilled 和 rejected ，状态就不会再变了即 resolved（已定型）。

    • Promise是一个构造函数，其原型上有then、catch方法，对象上有reject、resolve方法。

    • new promise  是一个特殊的对象，它内部的数据是自己产生的。取数据要 调用函数==>then方法 来取      （数组：保存了数据以后取数据用下标来取值；对象：用属性名取值；Map：用get方法来取值；set：用遍历器来取值。）

    （2）promise使用

    通过new关键字创建Promise对象

    1. var p = new Promise(function(resolve, reject){//参数传回调函数，resolve和reject 都是函数
    2.     //做一些异步操作
    3.     setTimeout(function(){
    4.         console.log('执行完成');
    5.         resolve('随便什么数据');
    6.     }, 2000);
    7. });

    参数说明：

    • resolve：异步操作执行成功后的回调函数

    • reject：异步操作执行失败后的回调函数

    resolve是将Promise的状态置为fullfiled，reject是将Promise的状态置为rejected。

    上面的代码中，直接通过new创建了Promise对象，并没有调用它，但是传进去的函数已经执行了。因此我们用Promise的时候一般是包含在一个函数中，在需要的时候去运行这个函数。

    1. function runAsync(){
    2.     var p = new Promise(function(resolve, reject){
    3.         //做一些异步操作
    4.         setTimeout(function(){
    5.             console.log('执行完成');
    6.             resolve('随便什么数据');
    7.         }, 2000);
    8.     });
    9.     return p;            
    10. }
    11. runAsync()

    在我们包装好的函数最后，通过return返回了一个Promise对象。也就是说调用这个包装函数可以得到Promise的对象，接下来就可以使用Promise对象上的then与catch方法了。

    1. runAsync().then(function(data){
    2.     console.log(data);
    3.     //后面可以用传过来的数据做些其他操作
    4.     //......
    5. });

    在runAsync()的返回上直接调用then方法，then接收一个参数，是函数，函数的参数data将会拿到我们在runAsync中调用resolve时传的的参数。

    此时then里面的函数就是回调函数，能够在runAsync这个异步任务执行完成之后被执行。这就是Promise的作用了，简单来讲，就是能把原来的回调写法分离出来，在异步操作执行完后，用链式调用的方式执行回调函数。

    自己封装回调函数

    1. function runAsync(callback){
    2.     setTimeout(function(){
    3.         console.log('执行完成');
    4.         callback('随便什么数据');
    5.     }, 2000);
    6. }
    7. ​
    8. runAsync(function(data){
    9.     console.log(data);
    10. });

    效果与之前的是一样的。但如果有多层回调怎么办？如果callback也是一个异步操作，而且执行完后也需要有相应的回调函数，该怎么办呢？总不能再定义一个callback2，然后给callback传进去吧。而Promise的优势在于，可以在then方法中继续写Promise对象并返回，然后继续调用then来进行回调操作。

    1.         var p1=new Promise(function(n1,n2) {
    2.             //n1  n2都是函数   ==> n1 和 n2 一样
    3.             n1(200)  //p1数据容器内部产生了业务正确的数据：200。n1调用会触发p1对象内部产生数据
    4.             // n2(404)  //p1数据容器内部产生了业务错误的数据：404。n2调用会触发p1对象内部产生数据
    5.         })
    6.         console.log(p1)
    7.  
    8.         p1.then(function(data){  //取数据。可以多次取
    9.             console.log(data)   //200
    10.         })

     

     

    1.         var p1=new Promise(function(n1,n2) {
    2.             n2(404)  
    3.             n1(100)  //这个不会调用，n1和n2谁先写，就调用谁，会面的就不会再调用了，就像return一样
    4.         })
    5.         console.log(p1)
    6.  
    7.         p1.then(function(data){  //如果这个函数调用了，就会产生正确的数据
    8.             console.log(data)   //这个不会运行。
    9.         },function(err){   如果这个函数调用了，就会产生错误的数据
    10.             console.log(err)  //404
    11.         })

    （3）链式操作用法

    从表面上看，Promise只是能够简化层层回调的写法，而实质上，Promise的精髓是“状态”，用维护状态、传递状态的方式来使得回调函数能够及时调用，它比传递callback函数要简单、灵活的多。所以使用Promise的正确场景是这样的：

    1. runAsync1()
    2. .then(function(data){
    3.     console.log(data);
    4.     return runAsync2();
    5. })
    6. .then(function(data){
    7.     console.log(data);
    8.     return runAsync3();
    9. })
    10. .then(function(data){
    11.     console.log(data);
    12. });

    这样能够按顺序，每隔两秒输出每个异步回调中的内容，在runAsync2中传给resolve的数据，能在接下来的then方法中拿到。运行结果如下：

    runAsync1、runAsync2、runAsync3三个函数定义：

    1. function runAsync1(){
    2.     var p = new Promise(function(resolve, reject){
    3.         //做一些异步操作
    4.         setTimeout(function(){
    5.             console.log('异步任务1执行完成');
    6.             resolve('随便什么数据1');
    7.         }, 1000);
    8.     });
    9.     return p;            
    10. }
    11. function runAsync2(){
    12.     var p = new Promise(function(resolve, reject){
    13.         //做一些异步操作
    14.         setTimeout(function(){
    15.             console.log('异步任务2执行完成');
    16.             resolve('随便什么数据2');
    17.         }, 2000);
    18.     });
    19.     return p;            
    20. }
    21. function runAsync3(){
    22.     var p = new Promise(function(resolve, reject){
    23.         //做一些异步操作
    24.         setTimeout(function(){
    25.             console.log('异步任务3执行完成');
    26.             resolve('随便什么数据3');
    27.         }, 2000);
    28.     });
    29.     return p;            
    30. }
    31. 在then方法中，你
    也可以直接return数据而不是Promise对象，在后面的then中就可以接收到数据了。
    1. runAsync1()
    2. .then(function(data){
    3.     console.log(data);
    4.     return runAsync2();
    5. })
    6. .then(function(data){
    7.     console.log(data);
    8.     return '直接返回数据';  //这里直接返回数据
    9. })
    10. .then(function(data){
    11.     console.log(data);
    12. });

    执行结果如下：

    1.     //可以不用传then的第二个回调函数
    2.         //p1对象then函数的返回值 一定是Promise对象 
    3.         // then的返回值看then的传入的回调函数参数 ，传入的回调函数的返回值是Promise对象，then的返回值就是它，反之就把返回值创建一个Promise对象作为返回值
    4.  
    5.         var p1=new Promise(function(n1,n2) {
    6.             n1(200)
    7.         })
    8.         var re=p1.then(function(){
    9.             console.log(data)  //200   这是p1的数据
    10.             return 100
    11.         })
    12.         //re 是一个新的Promise对象，这个新的Promise内部的数据是100
    13.         //取这个新的Promise中的数据
    14.         re.then(function(data) {
    15.             console.log(data)  //100   这个re的数据
    16.         })
    17.         //以上代码就知道有链式调用==> p1.then().then().then()....
    1.        //返回值是一个Promise对象
    2.         var p1 = new Promise(function (n1, n2) {
    3.             n1(200)
    4.         })
    5.         var re = p1.then(function (data) {
    6.             console.log(data) //200
    7.             return new Promise(function (n1, n2) {
    8.                 n1(500)
    9.             })
    10.         })
    11.  
    12.         re.then(function (data) {
    13.             console.log(data) //500
    14.         })
    1.         //在链式调用的过程中，只要有一个捕获，把错误处理了，就不会报错
    2.         //下面第二个Promise捕获了错误，p1就不用去处理错误了
    3.         p1.then(function (data) {
    4.             console.log(data, 1)
    5.         })
    6.         .catch(function (e) {  //这里的.catch是第二个Promise对象取.catch,不是p1
    7.             console.log(e)
    8.         })

    （4）reject的用法

    事实上，我们前面的例子都是只有“执行成功”的回调，还没有“失败”的情况，reject的作用就是把Promise的状态置为rejected，这样我们在then中就能捕捉到，然后执行“失败”情况的回调。

    1. function getNumber(){
    2.     var p = new Promise(function(resolve, reject){
    3.         //做一些异步操作
    4.         setTimeout(function(){
    5.             var num = Math.ceil(Math.random()*10); //生成1-10的随机数
    6.             if(num<=5){
    7.                 resolve(num); //执行成功
    8.             }
    9.             else{
    10.                 reject('数字太大了'); //执行失败
    11.             }
    12.         }, 2000);
    13.     });
    14.     return p;            
    15. }
    16. ​
    17. getNumber()
    18. .then(
    19.     function(data){
    20.         console.log('resolved');
    21.         console.log(data);
    22.     }, 
    23.     function(error, data){
    24.         console.log('rejected');
    25.         console.log(error);
    26.     }
    27. );

    getNumber函数用来异步获取一个数字，2秒后执行完成，如果数字小于等于5，我们认为是“成功”了，调用resolve修改Promise的状态。否则我们认为是“失败”了，调用reject并传递一个参数，作为失败的原因。

    运行getNumber并且在then中传了两个参数，then方法可以接受两个参数，第一个对应resolve的回调，第二个对应reject的回调。所以我们能够分别拿到他们传过来的数据。多次运行这段代码，你会随机得到下面两种结果：

     

    （5）catch的用法

    对象内部产生了错误数据或者抛出（throw）了错误信息，catch方法传入的回调函数就会运行

    我们知道Promise对象除了then方法，还有一个catch方法，它是做什么用的呢？其实它和then的第二个参数一样，用来指定reject的回调，用法是这样：

    1. getNumber()
    2. .then(function(data){
    3.     console.log('resolved');
    4.     console.log(data);
    5. }).catch(function(reason){
    6.     console.log('rejected');
    7.     console.log(reason);
    8. });

    效果和写在then的第二个参数里面一样。不过它还有另外一个作用：在执行resolve的回调（也就是上面then中的第一个参数）时，如果抛出异常了（代码出错了），那么并不会报错卡死js，而是会进到这个catch方法中。

    1. getNumber()
    2. .then(function(data){
    3.     console.log('resolved');
    4.     console.log(data);
    5.     console.log(somedata); //此处的somedata未定义
    6. })
    7. .catch(function(reason){
    8.     console.log('rejected');
    9.     console.log(reason);
    10. });

    在resolve的回调中，我们使用了console.log(somedata);而somedata这个变量是没有被定义的。如果我们不用Promise，代码运行到这里就直接在控制台报错了，不往下运行了。但是在这里，会得到这样的结果：

    也就是说进到catch方法里面去了，而且把错误原因传到了reason参数中。即便是有错误的代码也不会报错了，这与我们的try/catch语句有相同的功能。

    执行ajax请求的结构代码：

     

    1.         //catch方法：1、捕获Error抛出的错误  2、捕获n2的错误
    2.         var p1=new Promise(function(n1,n2) {
    3.             var re=new Error("hello")
    4.             //Error 打出是黑色的，抛出是红色的
    5.             throw re
    6.             // n2(100)
    7.         })
    8.         p1.catch(function (e) {
    9.             console.log(typeof e,e)   //object Error: hello   //捕获Error抛出的错误
    10.             // console.log(typeof e,e)   //number 100   捕获n2的错误
    11.         })
    1.         //抛出的错误必须是捕获。产生的错误可以用then的第二个回调函数
    2.         var p1=new Promise(function(n1,n2) {
    3.             var re=new Error("hello")
    4.             throw re
    5.         })
    6.         p1.then(function(data) {
    7.             console.log(data,1)
    8.         },function(err) {
    9.             console.log(err,2)
    10.         })    //会报错
    11.  

    1.  
    2.             //p1对象中产生了错误数据，必须先处理，否则会报错==>Uncaught (in promise) 404
    3.            //处理错误的两种方式：
    4.            //1、catch方法用一个函数将错误数据接收了
    5.            //2、then方法的第二个回调函数
    6.             var p1=new Promise(function(n1,n2) {
    7.                 n2(404)
    8.             })
    9.  
    10.             p1.then(function(err){
    11.                 console.log(err)  //报错：Uncaught (in promise) 404   因为错误数据没处理
    12.             });
    13.  
    14.             p1.catch(function (e) {
    15.                 console.log(typeof e,e)    //number 404    它可以正常运行
    16.             })

    2、async函数

    （1）async

    async 是 ES7 才有的与异步操作有关的关键字，和Promise有很大的关联。

    • 语法：

      async function name(param) { statements }

      参数说明：

      • name: 函数名称。

      • param: 要传递给函数的参数的名称。

      • statements: 函数体语句。

    • 返回值

      async 函数返回一个 Promise 对象，可以使用 then 方法添加回调函数。

      1. async function helloAsync(){
      2.     return "helloAsync";
      3.   }
      4.   
      5. console.log(helloAsync())  // Promise {<resolved>: "helloAsync"}
      6.  
      7. helloAsync().then(data => {
      8.    console.log(data);         // helloAsync
      9. })

    （2）await

    async 函数中可能会有 await 表达式，async 函数执行时，如果遇到 await 就会先暂停执行 ，等到触发的异步操作完成后，恢复 async 函数的执行并返回解析值。

    await 操作符用于等待一个 Promise 对象, 它只能在异步函数 async function 内部使用。如果在 async function 函数体外使用 await ，你只会得到一个语法错误。

    • 语法：

      [return_value] = await expression;

      参数说明：

      • expression: 一个 Promise 对象或者任何要等待的值。

    • 返回值

    返回 Promise 对象的处理结果。如果等待的不是 Promise 对象，则返回该值本身。

    如果一个 Promise 被传递给一个 await 操作符，await 将等待 Promise 正常处理完成并返回其处理结果。

    正常情况下，await 命令后面是一个 Promise 对象，它也可以跟其他值，如字符串，布尔值，数值以及普通函数。

    await针对所跟不同表达式的处理方式：

    • Promise 对象：await 会暂停执行，等待 Promise 对象 resolve，然后恢复 async 函数的执行并返回解析值。

    • 非 Promise 对象：直接返回对应的值。

    示例1： await后面是一个Promise对象(函数调用结果)：

    1. function testAwait() {
    2.     return new Promise((resolve, reject)=>{
    3.         setTimeout(()=>{
    4.             console.log("返回一个promise对象");
    5.             resolve("返回数据")
    6.         }, 2000)
    7.     });
    8. }
    9. async function helloAsync() {
    10.     var a = await testAwait();
    11.     console.log(a);
    12.     console.log("helloAsync");
    13. }
    14. ​
    15. helloAsync();
    16. //执行结果：
    17. //返回一个promise对象
    18. //demo.html:25 返回数据
    19. //demo.html:26 helloAsync

    示例2：await后面是一个Promise对象：

    1. async function haha(){
    2.     await new Promise(function(res,rej){
    3.         setTimeout(function(){
    4.             console.log(1)
    5.             res(123123)
    6.         },2000)
    7.     })
    8.     console.log(2);
    9. }
    10. ​
    11. haha()

  • 相关阅读:
    cmdb运维管理平台，IT资源配置管理
    计算机图形学(三) -- 3D 变换
    IOS 使用BurpSuite抓包
    每日学到 40
    python毕业设计作品基于django框架 多用户商城平台系统毕设成品（7）中期检查报告
    Leetcode128. 最长连续序列
    21、嵌套路由实战操作
    安卓USB模块源码分析（三）- 设备连接断开广播
    微波雷达人体感应器，即时存在感知方案，智能家居人体感应交互
    java 企业工程管理系统软件源码+Spring Cloud + Spring Boot +二次开发+ MybatisPlus + Redis
  • 原文地址：https://blog.csdn.net/qq_52301431/article/details/125457021