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. Maven关联本地已有仓库的方法

    1. 将本地仓库目录localwarehouse进行压缩为localwarehouse.rar. 2. 将localwarehouse.rar解压到D:\maven文件夹中,然后在setting.xm ...

  2. utils工具类整理

    闲暇之余,整理出了项目中常用的一些工具类,不是很全,后续会持续更新--- 全部代码请移植github哦-github地址:https://github.com/yang302/utils

  3. Codeforces Round 882 div.2 B

    Smiling & Weeping ----玫瑰花你拿才好看,风景要和你看才浪漫--<-<-<@ B. Hamon Odyssey time limit per test 1 ...

  4. @Async注解详解 以及 可能遇到的各种问题

    一.简介1)在方法上使用该@Async注解,申明该方法是一个异步任务:2)在类上面使用该@Async注解,申明该类中的所有方法都是异步任务:3)方法上一旦标记了这个@Async注解,当其它线程调用这个 ...

  5. 【接口自动化测试】Eolink Apilkit 安装部署,支持 Windows、Mac、Linux 等系统

    Eolink Apikit 有三种客户端,可以依据自己的情况选择.三种客户端的数据是共用的,因此可以随时切换不同的客户端. 我们推荐使用新推出的 Apikit PC 客户端,PC 端拥有线上产品所有的 ...

  6. 【Python爬虫】python打印本地代理

    在进行网络爬虫时,使用代理是非常重要的.因为爬虫经常会被网站封 IP,而代理可以隐藏你的真实 IP 地址,让你可以更不受限制地爬取数据.本文将介绍如何在 Python 中打印代理,包括代理 IP 的使 ...

  7. Github 组合搜索开源项目 (超详细)

    例如搜索 Spring Boot 相关项目  spring boot (最简单最常用) in:name spring boot (匹配项目名字)  in:name spring boot stars: ...

  8. 本计划在 .NET 8 中推出的 WASI 推迟到 .NET 9

    本计划在 .NET 8 中推出的 WASI  已推迟到 .NET 9,请参阅 Github 上的 WASI 跟踪问题. 在.NET 8 Preview 4 开始支持生成与 WASI 兼容的 .wasm ...

  9. wps 设置 word文档不可被修改,指定区域可以修改

    wps 设置 word文档不可被修改,指定区域可以修改 2021年03月03日09:38:10

  10. Kbaor_2023_9_28_Java第一次实战项目_ELM_V1_食品的实体类、工具类与实现类

    Kbaor_2023_9_28_Java第一次实战项目_ELM_V1_食品的实体类.工具类与实现类 ELM_V1_食品的实体类 package elm_V1; /** * [食品实体类] * * @a ...