【精讲】async，await简介及与Ajax合用案例（内含面试内容）

共创splendid--与您携手

已于 2022-07-20 14:46:38 修改

阅读量1.1k

点赞数 4

分类专栏： es6 JavaScript 前端

于 2022-07-20 14:32:15 首次发布

关注博主，为您提供更优质的作品与最全的知识内容

本文链接：https://blog.csdn.net/m0_59505309/article/details/125890713

版权

async await Promise 异步编程 Ajax

关键词由CSDN通过智能技术生成

前端同时被 3 个专栏收录

63 篇文章 3 订阅

订阅专栏

JavaScript

32 篇文章 0 订阅

订阅专栏

es6

16 篇文章 0 订阅

订阅专栏

内含面试内容，建议，熟练掌握该功能的理论及步骤讲解。想了解更多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();