async 从字面上看就是“异步”,它放在函数定义之前,是使该函数在调用时开一个子线程,以不影响主线程的运行。

  而 await 经常和 async 组合使用,在 async 定义的函数中来等待需要时间运行的代码(如ajax请求、Promise对象)的运行结果,以做后续的处理。

  如下面的返回Promise对象的函数:

function print(delay, message) {
return new Promise(function (resolve, reject) { // 返回Promise对象
setTimeout(function () { // 延迟执行函数
console.log(message);
resolve();
}, delay);
});
}

  如果需要运行通过,就需要经过then、catch、finally函数来执行响应的代码:

print(1000, "First").then(function () {            // 1秒之后输出“First”
return print(2000, "Second"); // 2秒之后输出“Second”
}).then(function () {
return print(1000, "Third"); // 1秒之后输出“Third”
}).then(function (){
print(2000, "Fourth"); // 2秒之后输出“Fourth”
});

  而使用 async/await 可以实现同样的效果,使用异步操作就像同步操作一样简单:

async function asyncFunc() {
await print(1000, "First");
await print(2000, "Second");
await print(1000, "Third");
await print(2000, "Fourth");
}
asyncFunc();

  而对于 Promise 中的异常处理,使用 try-catch 来实现:

async function asyncFunc() {
try {
await print(1000, "First"); //1秒后输出"First"
});
} catch (err) {
console.log(err); //输出异常错误
}
try {
await print(2000, "Second"); //2秒后输出"Second"
});
} catch (err) {
console.log(err); //输出异常错误
}
try {
await print(1000, "Third"); //1秒后输出"Third"
});
} catch (err) {
console.log(err); //输出异常错误
}
try {
await print(2000, "Fourth"); //2秒后输出"Fourd"
});
} catch (err) {
console.log(err); //输出异常错误
}
}
asyncFunc();

前端异步编程——async/await的更多相关文章

  1. 异步编程Async/await关键字

    异步编程Async \await 关键字在各编程语言中的发展(出现)纪实. 时间 语言版本 2012.08.15 C#5.0(VS2012) 2015.09.13 Python 3.5 2016.03 ...

  2. 抓住异步编程async/await语法糖的牛鼻子: SynchronizationContext

    长话短说,本文带大家抓住异步编程async/await语法糖的牛鼻子: SynchronizationContext 引言 C#异步编程语法糖async/await,使开发者很容易就能编写异步代码. ...

  3. 温故知新,CSharp遇见异步编程(Async/Await),聊聊异步编程最佳做法

    什么是异步编程(Async/Await) Async/Await本质上是通过编译器实现的语法糖,它让我们能够轻松的写出简洁.易懂.易维护的异步代码. Async/Await是C# 5引入的关键字,用以 ...

  4. javascript异步编程 Async/await

    Async/await Async/await 在学习他之前应当补充一定的 promise 知识 它是一种与 promise 相配合的特殊语法,目前被认为是异步编程的终级解决方案 值得我们每一个人学习 ...

  5. [C#] 谈谈异步编程async await

    为什么需要异步,异步对可能起阻止作用的活动(例如,应用程序访问 Web 时)至关重要. 对 Web 资源的访问有时很慢或会延迟. 如果此类活动在同步过程中受阻,则整个应用程序必须等待. 在异步过程中, ...

  6. .net 异步编程async & await关键字的思考

    C# 5.0引入了两个关键字 async和await,这两个关键字在很大程度上帮助我们简化了异步编程的实现代码,而且TPL中的task与async和await有很大的关系 思考了一下异步编程中的asy ...

  7. 异步编程async/await

    什么是异步? 在异步程序中,程序代码不需要按照编写时的顺序严格执行,有时需要一在一个新的线程中运行一部分代码,有时无需创建新的 线程,但是为了更好的利用单个线程的能力,需要改变代码的执行顺序. 进程 ...

  8. c#异步编程async await

    可以代替协程了 但是需要.net4 版本 unity2017以上版本可以用了 再也可以不用蛋疼的没有返回值的协程了 //异步编程,和Task一起用 async void TestAsync(){ // ...

  9. .NetCore 异步编程 - async/await

    前言: 这段时间开始用.netcore做公司项目,发现前辈搭的框架通篇运用了异步编程方式,也就是async/await方式,作为一个刚接触的小白,自然不太明白其中原理,最重要的是,这个玩意如果不明白基 ...

  10. .net 温故知新:【5】异步编程 async await

    1.异步编程 异步编程是一项关键技术,可以直接处理多个核心上的阻塞 I/O 和并发操作. 通过 C#.Visual Basic 和 F# 中易于使用的语言级异步编程模型,.NET 可为应用和服务提供使 ...

随机推荐

  1. 虚拟机问题:VMware Workstation 与 Device/Credential Guard 不兼容。在禁用 Device/Credential Guard 后,可以运行

    解决办法:关闭Hyper-V功能. windows10使用VMware Workstation打开虚拟机时显示 VMware Workstation 与 Hyper-V 不兼容.请先从系统中移除 Hy ...

  2. dedebiz 清理冗余废弃未引用图片方法

    原理描述: 在原有织梦后台菜单中增加"清理冗余图片按钮",实现清理冗余图片的功能. 操作步骤: 1. 打开后台admin\sys_sql_query.php代码 在该文件中搜索如下 ...

  3. 「co-examination - A」

    破壁,组合意义法: 五种颜色 \(\star,a,b,c,d\). 对于 l.h.s. 钦定 \(k\),在 \(3n+k\) 个球中选出 \(2n\) 个球染色,在靠左的 \(n\) 个球中选 \( ...

  4. Solution -「洛谷 P4689」「YunoOI 2016」这是我自己的发明

    Description Link. 给一个树,\(n\) 个点,有点权,初始根是 1. \(m\) 个操作,种类如下: 1 x 将树根换为 \(x\). 2 x y 给出两个点 \(x,y\),从 \ ...

  5. MySQL快速导入千万条数据(2)

    目录 一.导入前1000万条数据 二.导入前2000万条数据 三.导入后面的1000万条数据 四.建索引 五.总结 接上文,继续测试3000万条记录快速导入数据库. 一.导入前1000万条数据 清库. ...

  6. mysql5.5自定义函数-计算并赋值

    mysql自定义函数的写法 特别注意,将全部的定义现在最前面,然后再写其他语句,因为之前将定义变量和赋值混着写,死活报错.最后一个前同事高手"邢哥"解决. DELIMITER $$ ...

  7. AttributeError: module 'sqlalchemy' has no attribute '__all__'

    升级组件 pip install --upgrade flask-sqlalchemy

  8. 解决Few-shot问题的两大方法:元学习与微调

    .center { width: auto; display: table; margin-left: auto; margin-right: auto } 基于元学习(Meta-Learning)的 ...

  9. Weight Balanced Leafy Tree 学习笔记

    前言: 在这里十分十分感谢 \(\text{lxl}\) 和王思齐发明和总结了 \(\text{WBLT}\). 因为网上关于 \(\text{WBLT}\) 的正确讲解(已除去那篇国家集训队论文,不 ...

  10. CSS 也能实现 if 判断?实现动态高度下的不同样式展现

    最近在群里,有个小伙伴问了这么一道很有趣的问题: CSS 能否实现,容器再某个高度下是某种表现,一旦超出某个高度,则额外展示另外一些内容 为了简化实际效果,我们看这么一张示意效果图: 可以看到,当容器 ...