ES7中【async...await...】讲解

简介: 喜欢点赞哦

上一章我们说过了Promise,其实使用上已经足够。就是在理解上,还需要自己多动手敲一些代码;今天来说说另一个异步请求,是ES7中的新方法async...await...

那么我们知道了异步请求的优势,也知道可以使用回调函数或者更好的方法Promise来处理异步,那么为什么还要有引入新的异步方法?

答案是Promise也有缺点:
首先Promise的代码还达不到很简洁的程度(如果有太复杂的异步,代码也会很复杂,可读性不高);
其次不能像同步代码一样方便获取到错误信息;

那么async/await怎么用,我们从字面意思理解:async:异步;await:等待

async 是异步的意思,是一个关键字,将 async 关键字放在函数前边,表示某个函数就是一个异步函数,这样就不会影响下边线程的执行顺序,那么为什么有这个关键字就会变成异步请求?我们打印一下带有关键字的函数看一下:

async function foo(n){
    return n
  }
console.log(foo(222))

控制台会打印出这样:

image

会神奇的发现,打印出来的是一个带有Promise对象,并且resolved完成状态,结果返回了222。

所以,async函数是包装成了Promise对象作为的返回值 => Promise.resolve(value)

await是等待的意思,放在要异步操作的方法前边。在异步函数当中,等待一段要发生的代码,返回后再向下执行,在没返回值之前,当前异步函数中await后的代码暂不执行。我们看两个重要的例子,仔细看一下

// 随便写一个延迟函数
function result() {
    setTimeout(() => {
        console.log('异步请求')
    }, 2000);
}

// 然后使用这个方法,先用一个await
async function foo(){
    console.log('111')
    await result();
    console.log('222');
  }
foo()
console.log('333')

image

打印结果如上,函数照常执行,所以先打印了111,然后遇到了await等待关键字,发起了异步请求,所以222是在333之后打印的,在等待2秒之后,最后打印出“异步请求”。

那么如果我把await关键字去掉会怎么样?

// 随便写一个延迟函数
function result() {
    setTimeout(() => {
        console.log('异步请求')
    }, 2000);
}

// 然后使用这个方法,先用一个await
async function foo(){
    console.log('111')
    result();
    console.log('222');
  }
foo()
console.log('333')

结果是:

image

可以看出,222不再受到await影响,按照了111、222、333正常打印。

问题来了:

  1. 那await加与不加有什么用呢?2秒钟后不都可以打印出“异步请求”四个字吗?
  2. 上边所说的 “ 在异步函数当中,await等待一段要发生的代码,返回后再向下执行,在没返回值之前,当前异步函数中await后的代码暂不执行 ” 这句话也没有得到验证,222照常打印出来,又是什么原因?

原因请注意上述代码,result函数并不是异步函数,仅仅只是个带有延迟的函数,如果我更改一个result函数,加上Promise,使它成为一个异步函数,我们再来看一下:

// 此刻我们写一个异步方法
function result() {
    return new Promise((resolved,reject)=>{
        setTimeout(() => {
            resolved(console.log('异步请求'))
        }, 2000);
    })
}

// 然后使用这个方法,需要用到await
async function foo(){
    console.log('111')
    await result();
    console.log('222');
  }
foo()
console.log('333')

打印结果如下:

image

先打印出111和333,2秒钟过后,打印出“异步请求”和222,所以这也是证明了 async/await 是操作异步方法,在返回结果之前,await后的代码,是不执行的。

async/await可以捕获到错误信息,利用try...catch,只需要在要捕获的地方加上这个方法即可:

function result() {
    return new Promise((resolved,reject)=>{
        setTimeout(() => {
            reject(console.log('异步请求'))
        }, 2000);
    })
}

// 然后使用这个方法,需要用到await
async function foo(){
    console.log('111')
    try{
        await result();
        console.log('222');
    }catch(err){
        console.log(err)
    }
  }
foo()
console.log('333')

image

上边的undefined就是错误信息,只不过这个案例没有错误信息;在实际项目中,有一些错误,我们就可以用这种方式捕获到错误信息,(try...catch语句用于处理代码中可能出现的错误信息),如果用在Promise当中,捕获错误信息就会很麻烦。这也是async的一个优点。

这样看起来 async/await 的写法,很像同步的写法,但是却可以像Promise一样去处理异步,这就是一种代码简洁的好处,如果有多个异步需要处理,不再需要像Promise那样很多 .then 代码横向发展,我们来做一下对比,例如有ABCD四个异步需要触发:
Promise写法

const result = () => {
  return aaa()
    .then(() => A())
    .then(() => B())
    .then(() => C())
    .then(() => D())
}

result()
  .catch(err => {
    console.log(err);
  })

async/await写法

const result = async () => {
  await A()
  await B()
  await C()
  await D()
}

result()
  .catch(err => {
    console.log(err);
  })

上述的代码,只是为了证明async/await写法的可读性会更好,我们在写项目时,在返回的结果中会做很多处理,这种写法在多层嵌套中,你就会发觉它的优势了。

以上就是简单介绍关于async/await的用法,还有很多的用法,例如取中间值,All方法等等,同学们可以进一步去查阅资料,在实际项目中,掌握以上的关键的知识点,是必要的。

有兴趣的同学也可以查询async/await的原理,包括进一步学习关于generator函数,并且可以在评论区留言,共同进步。

weChat:VillinWeChat

欢迎提出宝贵意见

目录
相关文章
|
小程序 搜索推荐 安全
【开题报告】基于uniapp的在线蛋糕商城小程序的设计与实现
【开题报告】基于uniapp的在线蛋糕商城小程序的设计与实现
669 0
|
应用服务中间件 Linux nginx
nginx+nginx-http-flv-module
nginx+nginx-http-flv-module
1038 1
|
算法 安全 PHP
密码学系列之二:密码学基本概念
密码学系列之二:密码学基本概念
1264 0
密码学系列之二:密码学基本概念
|
8月前
|
存储 Java API
Java Optional 完全指南:彻底告别 NullPointerException
Java 8 引入的 `Optional` 类旨在解决 `null` 带来的空指针异常问题,通过提供容器类显式处理可能为空的值,提升代码健壮性和可读性。本文从基础到进阶解析 `Optional` 的用法,涵盖创建、检查、获取值、处理值等核心功能,结合实际应用场景与最佳实践,助你彻底告别 `NullPointerException`,编写更优雅的 Java 代码。
433 0
|
存储 Linux 5G
Linux 基于 LVM 逻辑卷的磁盘管理【简明教程】
这篇文章介绍了LVM(逻辑卷管理)如何提供灵活的磁盘管理方式,允许动态调整逻辑卷的大小而不会丢失数据。
Linux 基于 LVM 逻辑卷的磁盘管理【简明教程】
|
前端开发 Java 网络安全
nacos常见问题之Nacos获取配置文件时报错如何解决
Nacos是阿里云开源的服务发现和配置管理平台,用于构建动态微服务应用架构;本汇总针对Nacos在实际应用中用户常遇到的问题进行了归纳和解答,旨在帮助开发者和运维人员高效解决使用Nacos时的各类疑难杂症。
|
机器人 Shell 开发者
`roslibpy`是一个Python库,它允许非ROS(Robot Operating System)环境(如Web浏览器、移动应用等)与ROS环境进行交互。通过使用`roslibpy`,开发者可以编写Python代码来远程控制ROS节点,发布和订阅话题,以及调用服务。
`roslibpy`是一个Python库,它允许非ROS(Robot Operating System)环境(如Web浏览器、移动应用等)与ROS环境进行交互。通过使用`roslibpy`,开发者可以编写Python代码来远程控制ROS节点,发布和订阅话题,以及调用服务。
|
敏捷开发 Kubernetes 持续交付
阿里云云效产品使用合集之如何将流水线部署到Windows
云效作为一款全面覆盖研发全生命周期管理的云端效能平台,致力于帮助企业实现高效协同、敏捷研发和持续交付。本合集收集整理了用户在使用云效过程中遇到的常见问题,问题涉及项目创建与管理、需求规划与迭代、代码托管与版本控制、自动化测试、持续集成与发布等方面。
|
Go
GO语言的变量与常量
介绍Go语言的变量与常量!
124 5