async函数用法

目录

1.概念

2.本质

3.语法

4.特点

5.async基本使用

6.async里的await普通函数返回值

7.async里的await Promise函数成功返回值

 8.async里的await Promise函数失败返回值

 9.解决async里的await Promise函数失败后不执行下面内容


1.概念

真正意义上解决异步回调的问题,同步流程表达异步操作

2.本质

Generator的语法糖

3.语法

async function foo(){
    await 异步操作;
    await 异步操作;
}

4.特点

1、不需要像Generator去调用next 方法,遇到await等待,当前的异步操作完成就往下执行

2、返回的点是promise对象,可以用then 万法进行下一步操作

3、async取代Generator西数的星号*,await取Generator的yield

4、语意上更为明确,使用简单

5.async基本使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
  // async 基本用法
  async function foo(){
    return new Promise(resolve => {
      setTimeout(resolve,2000)
    })
  }

  async function testAsync(){
    console.log("开始执行",new Date().toTimeString())
    await foo();
    console.log("开始执行",new Date().toTimeString())
  }
  testAsync();

</script>
</body>
</html>

6.async里的await普通函数返回值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>async</title>
</head>
<body>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
  function test2(){
    return {code:200,data:{}}
  }
  // async 里面 await 返回值
  async function asyncPrint(){
    let res = await test2();
    console.log(res)
  }
  asyncPrint()
</script>
</body>
</html>

7.async里的await Promise函数成功返回值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>async</title>
</head>
<body>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
  // async 里面 await 返回值
  async function asyncPrint(){
    let res = await Promise.resolve({"key":"value"});
    console.log(res)
  }
  asyncPrint()
</script>
</body>
</html>

 8.async里的await Promise函数失败返回值

解决报错后面代码不执行,

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>async</title>
</head>
<body>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
  // async 里面 await 返回值
  async function asyncPrint(){
    let res = await Promise.reject({"code":"400"});
    console.log(res)
  }
  asyncPrint()
</script>
</body>
</html>

 

 9.解决async里的await Promise函数失败后不执行下面内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>async</title>
</head>
<body>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
    async  function test(obj){
        return new Promise((resolve,reject)=>{
            // 模拟异常
            // key=1为异常,异常处理也用resolve()函数
            if(obj.key==1){
                resolve(false);
            }else{
                resolve({code:200})
            }

        })
    }
  // async 里面 await 返回值
  async function asyncPrint(){
    let res = await test({key:1});
    console.log(res)
    console.log("12313")
  }
  asyncPrint()

</script>
</body>
</html>

 

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值