ES6中async函数与await表达式的基本用法举例

 更新时间:2022年07月27日 11:09:37   作者:小余努力搬砖  
async和await是我们进行Promise时的一个语法糖,async/await为了让我们书写代码时更加流畅,增强了代码的可读性,下面这篇文章主要给大家介绍了关于ES6中async函数与await表达式的基本用法,需要的朋友可以参考下

一、async 函数

概念:  

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

举例:

async function demo(){
// 1:当返回值不是promise对象 当调用函数的时候就是已成功的值
// return "succ";
// 2:当返回的是promise对象 那么函数(promise对象)的结果与返回的promise状态一致
return  new Promise((resolve,reject)=>{   //Promise 内容请参考上期作品,关注专栏。
            let flag = true;
                if(flag){
                resolve("succ");
            }else{
                reject("error");
                }
                })
            }
const MyPromise = demo();
MyPromise.then((resolve)=>{
    console.log(resolve);
},(reject)=>{
    console.log(reject);
})

二、await表达式

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

1.await必须放在async函数中

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

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

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

举例:

// 1:await需要写在async函数的内部    
// 2:await 修饰的Promise 返回的值就是resolve的值
// 3:后面的代码需要等待 await后的结果
async function demo(){
const a = await "a";
const b = await new Promise((resolve,reject)=>{
    setTimeout(()=>{
        console.log("定时器执行了....");
    resolve("b");
        },3000);
    });
const c =  await "c";
console.log(a,b,c);
            }
            demo();

举例:失败的代码 await 错误的代码 需要用try catch捕获

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

三、async await ajax 基础使用

function mark (url){
return new Promise((resolve,reject)=>{
      const ajax = new XMLHttpRequest();
      ajax.open("GET",url)
      ajax.send();
      ajax.onreadystatechange=function(){
if(ajax.readyState==4){
      if(ajax.status==200){
       resolve(JSON.parse(ajax.response));
                        }
                    }
                }
            })
        }
async function demo(){
const res = await mark("http://127.0.0.1:5500/test.json")

补充:async await ajax使用

首先要创建对象,用get的方法请求后面传入的地址,再发送请求,通过判断出输出有无数据。

function sendajax(url){
    return new Promise((resolve,reject)=>{                
          const http =  new XMLHttpRequest();//创建对象
          http.open("GET",url);//用get方法请求地址
          http.send();//发送请求                
          http.onreadystatechange = function(){                      
              if(http.readyState==4){                              
                  if(http.status==200){
                      resolve(JSON.parse(http.response));
                  }                              
              }                          
          }                                            
    })                
}            
async function demo(){                
    const res = await sendajax("http://127.0.0.1:8848/web2209/ES6/test.json");
    if(res.code==200){
        console.log("有数据");
    }else{
        console.log("无数据");
    }        
}
demo();

总结

到此这篇关于ES6中async函数与await表达式的基本用法的文章就介绍到这了,更多相关ES6 async函数与await表达式内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 针对BootStrap中tabs控件的美化和完善(推荐)

    针对BootStrap中tabs控件的美化和完善(推荐)

    这篇文章主要介绍了针对BootStrap中tabs控件的美化和完善的相关资料,非常不错,具有参考借鉴价值,感兴趣的朋友一起学习吧
    2016-07-07
  • Bootstrap零基础入门教程(三)

    Bootstrap零基础入门教程(三)

    Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。本文重点给大家介绍Bootstrap零基础入门教程(三) ,非常不错,具有参考借鉴价值,感兴趣的朋友一起学习吧
    2016-07-07
  • 详解ES6数组方法find()、findIndex()的总结

    详解ES6数组方法find()、findIndex()的总结

    这篇文章主要介绍了详解ES6数组方法find()、findIndex()的总结,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-05-05
  • 如何在TypeScript中处理日期字符串

    如何在TypeScript中处理日期字符串

    这篇文章主要介绍了如何在TypeScript中处理日期字符串,主要通过输入日期字符串来改善开发者的体验并减少潜在的错误,下文实现操作的分享需要的小伙伴可以参考一下
    2022-04-04
  • 小程序中手机号识别的示例

    小程序中手机号识别的示例

    这篇文章主要介绍了小程序中手机号识别的示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-12-12
  • layui 对table中的数据进行转义的实例

    layui 对table中的数据进行转义的实例

    今天小编就为大家分享一篇layui 对table中的数据进行转义的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • JavaScript设计模式之职责链模式详解

    JavaScript设计模式之职责链模式详解

    职责链模式的定义是:使多个对象都有机会处理请求,从而避免请求的发送者和接收者之间的耦合关系,将这些对象连成一条链,并沿着这条链传递该请求,直到有一个对象处理它为止
    2022-08-08
  • utf-8编码引起js输出中文乱码的解决办法

    utf-8编码引起js输出中文乱码的解决办法

    utf-8编码引起document.writeln输出中文乱码的解决办法
    2010-06-06
  • JavaScript实现复选框全选功能

    JavaScript实现复选框全选功能

    这篇文章主要为大家详细介绍了JavaScript实现复选框全选功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-04-04
  • bootstrap datepicker限定可选时间范围实现方法

    bootstrap datepicker限定可选时间范围实现方法

    这篇文章主要介绍了bootstrap datepicker限定可选时间范围的实现方法,本文涉及到相关知识点,通过实例给大家介绍的非常详细,需要的朋友可以参考下
    2016-09-09

最新评论