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)
)

 

 

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

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

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

赞 (0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • centos下安装python3详细教程

    centos下安装python3详细教程centos7自带有python,版本是python2.7接下来我们手动安装python3,并且配置后可以并存使用。1.首先,你要知道系统现在的python的位置在哪儿:[root@root~]#whereispythonpython:/usr/bin/python2.7/usr/bin/python/usr/lib/python2.7/usr/lib64/pyt…

    2022年6月15日
  • 微信群发sdk「建议收藏」

    微信群发sdk「建议收藏」微信sdk

    2022年5月4日
  • gg修改器读取文件列表失败怎么弄_gg修改器怎么修改金币

    gg修改器读取文件列表失败怎么弄_gg修改器怎么修改金币VoidInitWCB(WCBfar*lpwcb,shortretType,LPSTRlpBuffer,shortcBufferSize);InitWCB的参数说明如下:@@0541701.JPG;表2@@例如,下面这段程序是获取所选区域的字符串字体情况:WCBwcb;//Word的参数和返回值传递的数据区short isbold;InitWCB(&wcb,TypeShort,NULL,0…

    2022年9月5日
  • expandablelistview详解[通俗易懂]

    expandablelistview详解[通俗易懂]我在项目中使用到expandablelistview,然后我就在网上找了很多关于expandablelistview的文章,那么这里,将一些对去进行总结一些,并将自己踩过的坑填上。expandablelistview就是类似QQ分组,点击分类,显示其各个详细的分类信息。下面是一些效果图这样是完成了有父标题,和子标题,实现了分组,接下来看看如何布局的。

    2022年6月18日
  • java中保留两位小数的方法_java float保留两位小数

    java中保留两位小数的方法_java float保留两位小数项目中有一个小需求,两个整数相除,结果需要保留两位小数,即1.00、0.50这种数据格式。以下做法不行,因为两整数相除,小数点以后的数字会被截断,让运算结果为整数类型,intx=10;inty=20;inta=x/y;System.out.println(a);//输出0System.out.println(x/y);//输出0System.out.println((floa…

    2022年9月24日
  • 【深度学习】【语义分割】ASPP

    【深度学习】【语义分割】ASPPASPP空洞空间卷积池化金字塔(atrousspatialpyramidpooling(ASPP))对所给定的输入以不同采样率的空洞卷积并行采样,相当于以多个比例捕捉图像的上下文。上图为deeplabv2的ASPP模块,deeplabv3中向ASPP中添加了BN层,其中空洞卷积的rate的意思是在普通卷积的基础上,相邻权重之间的间隔为rate-1,普通卷积的rate默认为1,所以…

    2022年8月21日

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

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