ES6之async与await

ES6之async与await

· async – await 是 Promise 和 Generator 的语法糖,目的只是为了让我们书写代码时更加流畅,增强代码的可读性。

· async – await 是建立在Promise机制之上的,并不能取代其地位

基本语法:

async function demo01() {
  let result = await Math.random()
  console.log(result)  
}

demo01()   //  输出一个随机数

async:

  async用来表示函数是异步的,定义的函数会返回一个Promise对象,可以使用then方法添加回调函数

async function demo02() {
  return '返回结果'  
}

demo02().then(res => console.log(res)) // 输出: 返回结果(若 async 定义的函数有返回值,相当于Promise.resolve('返回结果'))

 

await:await必须出现在 async 函数内部,不能单独使用。

  ·await后面可以跟任何js表达式。它最主要的意图是用来等待 Promise 对象的状态被 resolved。

  ·如果await的是 Promise 对象会造成异步函数 停止 执行并且 等待 Promise的解决,如果等的是正常的表达式则立即执行

  使用方法

function sleep(second) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('enough sleep~')
    }, second)
  })
}

async function dome03() {
  await () => {console.log('表达式立即执行')}
  let result = await sleep(2000)
  console.log(result)  //需要等待 sleep 函数执行完成 resolve 才输出(2000毫秒后输出:enough sleep~)       
}

 

  实例1(模拟当一个请求需要依赖上一个请求返回的参数时,async与await的使用实例):

// 模拟异步请求
function sleep(second, param) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(param);
        }, second);
    })
}

async function test() {
    let result1 = await sleep(2000, 'req01')
    // 等待第一个 await 执行完成
    let result2 = await sleep(1000, 'req02' + result1)
    // 等待第二个await 执行完成
    let result3 = await sleep(500, 'req03' + result2)
    // 等待所有的await执行完成
    console.log(`${result3} --- ${result2} --- ${result1}`)
}

test()  // 等待所有的 await 执行完成输出:req01 --- req02req01 --- req03req02req01

 

  实例2(当需要异步发送多个请求且请求都是独立时的实例):

function sleep(second) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('request done! ' + Math.random());
        }, second);
    })
}

// 正确写法
async function correctDemo() {
    let p1 = sleep(1000);
    let p2 = sleep(1000);
    let p3 = sleep(1000);
    // Promise.all('一个可迭代的对象') 将多个 Promise 实例,包装成一个新的 Promise 实例,一次性处理n个Promise对象。
    await Promise.all([p1, p2, p3]);
    console.log('clear the loading~');
}

// 错误写法:以下写法不能实现同步请求,必须等待第一个await接收到sleep的解决才会执行第二个await
async function bugDemo() {
    await sleep(1000)
    await sleep(1000)
    await sleep(1000)
    console.log('clear the loading~')
}

correctDemo()
bugDemo()

 

错误处理:

  处理错误

function sleep(second) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            reject('want to sleep~');
        }, second);
    })
}

async function errorDemoSuper() {
    try {
        let result = await sleep(1000);
        console.log(result);
    } catch (err) {
        console.log(err); // 当await等待的结果为reject时执行
    }
}

errorDemoSuper() // 输出:want to sleep~

  捕捉错误:  

// 定义个抛出异常的方法
function errorTest(second) {
    throw new Error('抛出一个异常!!!')
}

 

  方式1:通过 try … catch捕获

try {
  errorTest()
}catch(error){
  console.log(error)  
}

  方式2: 在then回调中捕获

errorTest().then(
 resolve => console.log(resolve),
 error => console.log(error)   
)

  方式3:在Promise的catch中捕获

errorTest().catch(
  error => console.log(error)
)

 

 

想要逃避总有借口,想要成功总有方法!!!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/2591.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • pycharm清缓存_pycharm安装包很慢

    pycharm清缓存_pycharm安装包很慢解决pycharm缓存文件问题方法一方法二使用pycharm一段时间后,C盘空间也越来越小。这是因为pycharm在C盘生成了大量的缓存文件。解决C盘占用过大,有两个方法:方法一:直接删除pycharm缓存文件(暴力有效)方法二:更改缓存文件路径方法一content.dat.storageData是pycharm的缓存文件,动辄几个G,直接将其删除即可。不会影响pycharm使用。缺点就是每隔一段时间要记得清理,否则C盘可能就要爆炸。content.dat.storageData文件一般存

  • XXX测试用例设计?XXX怎么测试?(行李箱、电梯、水杯、笔、椅子)

    XXX测试用例设计?XXX怎么测试?(行李箱、电梯、水杯、笔、椅子)建议回答内容:功能测试(单个功能、逻辑业务/功能交互)、界面测试、易用性测试、兼容性测试、安全性测试、性能测试行李箱我不知道这个行李箱的具体需求,所以会以我认知的行李箱来思考从功能测试来考虑的话,拉杆箱大小、厚度、容量、各个面(包括拉杆面、脚轮面)承重拉杆承重是否符合质检标准;超出容量、超出承重会有什么影响;拉杆的伸缩收回是否灵活;箱子的开锁解锁是否方便安全;界面测试,我会考虑箱子的材质、颜色、花纹、形状是否符合要求;箱子吊牌logo是否正确易用性方面,箱子拉杆手把是否易握防滑、箱子

  • 词向量:如何评价词向量的好坏

    词向量:如何评价词向量的好坏一、前言词向量、词嵌入或者称为词的分布式表示,区别于以往的独热表示,已经成为自然语言任务中的一个重要工具,对于词向量并没有直接的方法可以评价其质量,下面介绍几种间接的方法。二、评价方法对于词向量的评价更多还是应该考虑对实际任务的收益,脱离的实际任务很难确定A模型就一定比B好,毕竟词向量方法更多是一种工具。1、语义相关性任务这个任务用来评价词向量模型在两个词之间的语义相关性,如:…

  • python浪漫表白源码(附带详细教程)_python浪漫表白源码

    python浪漫表白源码(附带详细教程)_python浪漫表白源码python浪漫表白代码示例代码:importturtleimportrandom#在(x,y)处画爱心lalaladeflove(x,y):lv=turtle.Turtle()lv.hideturtle()lv.up()#定位到(x,y)lv.goto(x,y)#画圆弧defcurvemove():foriinrange(20):lv.r

  • 手机号码归属地查询App

    手机号码归属地查询App结合MVP设计模式和解析Json数据,制作一款“手机号码归属地查询的App小程序(Android)”说明:实现的原理很简单,有多种设计方式和代码编写风格。本文主要是认识、理解MVP设计模式和Json数据的常见解析框架的使用。源码:请点击链接访问我的GitHub进行查看准备工作:AndroidStudio开发工具(谷爹的亲儿子)浏览器(进行测试淘宝开放平台返回给我们的Json数据并进行…

  • Vue和vue全家桶有什么区别_Vue和vue全家桶有什么区别

    Vue和vue全家桶有什么区别_Vue和vue全家桶有什么区别vue全家桶都有什么全家桶,顾名思义,对于开发一个完整的中大型单页面应用项目所必须的所必须的插件和框架。注:此文章主要讲解vue-cli脚手架开发方式,不介绍各插件的具体使用方式,具体使用方式详见其他详细介绍文章。一、vue-clivue-cli也叫脚手架,官方定义为Vue.js开发的标准工具!相比scirpt标签引入,脚手架具有如下特点:1)、功能丰富对Babel、TypeScr…

    2022年10月26日

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号