异步神器async-await

async-await和Promise的关系

async-await是建立在promise机制之上 ,async-await是promise和generator的语法糖。增强了代码的可读性,让代码书写起来更加流畅。

基本语法

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

basicDemo();
// 0.6484863241051226
// Promise {[[PromiseStatus]]: "resolved", [[PromiseValue]]: underfined}

上述代码就是async-await的基本使用形式。有两个陌生的关键字async、await,同时函数执行结果似乎返回了一个promise对象。

async

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

async function demo01() {
  return 123;
}
demo01().then(val => {
  console.log(val); // 123
});

若async定义的函数有返回值,return 123;相当于Promise.resolve(123),没有声明式的return则相当于执行了Promise.resolve();

await

await可以理解为是async wait的简写。await必须出现在async函数内部,不能单独使用。

function notAsyncFunc() {
    await Math.random();
}
notAsyncFunc();//Uncaught SyntaxError: Unexpected identifier

await后面可以跟任何的JS表达式。虽然说await可以等待很多类型的东西,但是它最主要的意图是用来等待Promise对象的状态被resolved。如果await的是promise对象会造成异步函数停止执行并且等待promise的解决,如果等的是正常的表达式则立即执行。

function sleep(second) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(' enough sleep~');
        }, second);
    })
}
function normalFunc() {
    console.log('normalFunc');
}
async function awaitDemo() {
    await normalFunc();
    console.log('something, ~~');
    let result = await sleep(2000);
    console.log(result);// 两秒之后会被打印出来
}
awaitDemo();
// normalFunc
// VM4036:13 something, ~~
// VM4036:15  enough sleep~
Like (0)
Donate 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
ZEROZERO
Previous 2019年5月31日
Next 2019年6月6日

相关推荐

  • typeof 和 instanceof的区别

    在前端开发过程中,typeof与instanceof是经常要用到的, 了解两者的区别是每一个合格前端工程师所要掌握的。 JavaScript中typeof和instanceof常用…

    2019年6月18日
    1.6K
  • HTTP 常见的面试题图解

    前言 在面试过程中,HTTP 被提问的概率还是比较高的。小林我搜集了 5 大类 HTTP 面试常问的题目,同时这 5 大类题跟 HTTP 的发展和演变关联性是比较大的,通…

    2020年3月17日
    1.5K
  • CSS布局之圣杯与双飞翼布局

    所谓圣杯布局和双飞翼布局其实解决的问题是相同的,都是解决左右两栏固定宽度,中间部分自适应,其中某部分内容比其他内容高的时候,保证三者元素等高。他俩的区别就是:圣杯用padding。…

    2019年6月18日
    1.8K
  • Angular与vue对比

    Vue.js 是开源的 JavaScript 框架,能够帮助开发者构建出美观的 Web 界面。当和其它网络工具配合使用时,Vue.js 的优秀功能会得到大大加强。如今,已有许多开发…

    2019年6月13日
    1.7K
  • 浏览器渲染机制

    为什么要了解浏览器渲染页面机制?主要是还是性能的优化。 了解浏览器如何进行加载,我们可以在引用外部样式文件、外部JS时,将它们放到合适的位置,是浏览器以最快的速度,将文件加载完毕。…

    2019年5月31日
    1.6K
  • HTTP三次握手与四次挥手详解

    前端工程师面试的时候,关于HTTP三次握手是最常被询问的一个知识点,往往很多人,都是知道其原理及过程,就是用话语表达不出来,正式一点,就是词不达意。今天浏览到一篇关于HTTP三次握…

    2019年12月6日
    1.6K
  • 一道前端函数面试题

    这题的规则是这样的 拿到这种题目,我先来说说我自己的做题流程,一般会去找它最简单的形态。我们一步一步来拆解。 先去掉 sumOf() 变成了以下形态 嗯&#82…

    2020年11月22日
    1.1K
  • 简单酷炫的hover效果,值得收藏

    在浏览B站的时候,发现一个简单酷炫的hover效果的制作视频。浏览完之后,发现其中包含的知识点蛮经典的,特此收藏。 HTMl结构布局很普通,就是简单的一个水平垂直方向居中的表单,代…

    2020年7月20日
    1.8K
  • vue开发小程序项目总结

    最近全权负责一个小程序的前端开发工作,之前小程序使用原生技术开发过一版,当时由于进入项目组晚,且项目开发周期短,没有详细了解项目的各种情况,导致后期开发过程中出现各种各样的让人烦心…

    2020年11月24日
    1.4K
  • Webpack入门,打包第一个工程

    简介 Webpack是一个开源的JavaScript模块打包工具,其最核心的功能是解决模块之间的依赖,把各个模块按照特定的规则和顺序组织在一起,最终合并为一个JS文件(有时会多个)…

    2022年11月8日
    410

发表回复

Please Login to Comment