• 【精讲】async,await简介及与Ajax合用案例(内含面试内容)


    内含面试内容,建议,熟练掌握该功能的理论及步骤讲解。想了解更多Ajax内容,可点击下方链接,内含详细讲解:【精讲】封装Ajax,promise,json为一体的数据转换及获取数据步骤_共创splendid--与您携手的博客-CSDN博客

    第一部分:async

    简介:async 是一个修饰符,async 定义的函数会默认的返回一个Promise对象resolve的值,因此对async函数可以直接进行then操作,返回的值即为then方法的传入函数。

    //async是修饰作用  下面的语句是构造一个函数
                // async function demo(){
                //     //通过return返回一个值(但是下面的语句内包含两个参数,一个是成功,一个是失败)
                //     return new Promise((resolve,reject)=>{
                //         //设置一个开关键
                //         let flag = false;
                //         //利用判断去控制输出内容
                //         if(flag){
                //             resolve("resolve");
                //         }else{
                //             reject("reject");
                //         }
                //     })
                // }     

               //调用函数
                // const mypromis = demo();
                // //利用链接式的方法去接多种返回的不同的值
                // mypromis.then((resolve)=>{
                //    console.log(resolve);
                //  }    
                // },(reject)=>{
                //     console.log(reject)
                // })

    根据理论点理解以下案例:

                  //       async function demo(){
                  //           return new Promise((b,a)=>{
                  //               let flag = false;
                  //               if(flag){
                  //                  a('succ');
                  //               }else{
                  //                  b('error');
                  //               }
                  //           })
                  //       }
                        
                  //       const MyPormise = demo();
                  //       MyPormise.then((a)=>{
                  //           console.log(a);
                  //       })

    (该段代码有异议,可以更好的理解上述async理论知识)

     第二部分:await

    简介:它也是一个修饰符,await 关键字 只能放在 async 函数内部, await关键字的作用 就是获取 Promise中返回的内容, 获取的是Promise函数中resolve或者reject的值。

    1:await必须放在async函数中

    2:await右侧的表达式一般为promise对象

    3:await可以返回的是右侧promise成功的值

    4:await右侧的promise如果失败了,就会抛出异常,需要通过try…catch捕获处理

    // await要与async连用,要么async单独使用,要么await使用就必须使用async,
                // await是在async内部使用的
                // await修饰的是Promise数据,返回的就是resolve值
                //后面的代码需要等待await的结果出来后才能一起打印出来

                // async function demo(){
                //     const a = await "a";
                //     const b = await new Promise((resolve,reject)=>{
                //     setTimeout(()=>{
                //         console.log("定时器执行了....");
                //         resolve("succ");
                //     },3000); 
                //     });
                //     const c=await "c";
                //     console.log(a,b,c);
                // }
                // demo();
                //由该案例结果可得:最终结果并非间隔一段时间后才打印出b的值,而是统一时间一起打印,类似于同步执行
                //以上是成功的案例

                                                                                                     
      
        

    //下面讲述失败的案例,失败的案例在await中很多时候会出现bug所以这个时候就需要我们设置一个try  catch捕获
                //错误的内容,那样数据就不会报错了,跟自己的编写的语法逻辑无关的情况下。

                // async function demo(){
                // try{
                //     const a = await new Promise((resolve,reject)=>{
                //         reject("数据不存在");
                //     })
                // }catch(error){
                //     console.log("error");
                // }
                // }
                // demo();
                //调用

    概括:async与await的使用方向:

    在上面的代码中,也注释了这个使用方向,下面简单整体的讲解一下:async和await两种语法结合可以让异步代码像同步代码一样。

    第三部分:与Ajax连用的案例

        //封装一个函数并且传入地址参数
                function as(url){
                    //return返回一个promise对象  并且promise对象内部有两个参数,一个是成功,一个是失败
                    return new Promise((resolve,reject)=>{
                        //创建对象
                        const obj = new XMLHttpRequest();
                        //利用get请求数据地址
                        obj.open("GET",url);
                        //发送请求
                        obj.send();
                        //存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数onreadystatechange。
                        //处理数据状态的
                        obj.onreadystatechange = ()=>{
                            //判断数据在第几步状态
                            if(obj.readyState == 4){
                                //判断数据是否存在,若存在那就是200(注:正常情况下,我们给定的范围为>=200,<300内都是正常的)
                                //反之小于200或者大于300就非正常现象(说明数据丢失)
                                if(obj.status == 200){
                                    //在上面的判断都符合的情况下,那么就执行下面的语句,将获取的数据转变JSON数据
                                    //从而可适js语言使用

                                    resolve(JSON.parse(obj.response));
                                }
                            }
                        }
                    })
                }
                


                // 封装一个函数 并且采用async 对该函数进行修饰
                async function demo(){
                    //调用数据,传入数据地址
                const res =await as("http://127.0.0.1:8848/js%E6%97%A5%E5%B8%B8%E4%BD%9C%E4%B8%9A5/test.json");
                // 判断数据是否存在,若存在那就是200
                if(res.code == 200){
                   console.log("有数据")    ;
                }else{
                    console.log("无数据");
                }
                }
                demo();

    熟练掌握上面的知识点内容,该部分为面试题主要部分,Ajax内容,可以点击上方地址进行查阅。

    下面再为大家提供几个拓展知识库:

    查看async内容点击下方链接:

    5.3 ES6 async 函数 | 菜鸟教程

    查看await内容点击下方链接:

    5.3 ES6 async 函数 | 菜鸟教程

    查看promise内容点击下方链接:

    JavaScript Promise | 菜鸟教程

  • 相关阅读:
    猫头虎分享 2024 最新版 Navicat 17 下载与安装步骤及演示 (图文版)
    【JVM】类加载器 Bootstrap、Extension、Application、User Define 以及 双亲委派
    数据结构与算法(java版)第二季 - 2 插入排序
    IIS搭建本地电脑服务器:通过内网穿透技术实现公网访问的步骤指南
    C++ —— 类和对象(终)
    C专家编程 第3章 分析C语言的声明 3.7 typedef struct foo{... foo;}的含义
    【Webpack】打包资源的名称路径和清空打包资源
    小程序富文本解析(mp-html组件)
    一款超好用的开源密码管理器?
    【牛客网】BC146 添加逗号
  • 原文地址:https://blog.csdn.net/m0_59505309/article/details/125890713