Async/Await 学习与示例
es 7 提供了对 promise 对象的更好的操作,省去了很多丧心病狂的链式异步请求,promise 是回调地狱的福音,而 Async/Await 则是 promise 的天使。
另外,关于 event-loop ,请移步 Event-Loop In Js
Await
await 关键字修饰的东西只能用在 async 修饰的函数中,这就意味着,await 的出现一定会有 async 的身影。因此,await 不能工作在顶级作用域中。
await 关键字往往修饰的是 promise 对象。
// 只能在async函数内部使用
let value = await promise
关键词 await
可以让 JavaScript 进行等待,直到一个 promise 执行并返回它的结果,JavaScript才会继续往下执行。
Async
async 用来修饰函数,可以用来修饰内部没有 await 的函数。当然,如果这个函数有 return 语句,js 会自动将返回值包装成 resolved 值(promise 对象)。例如:
async function f() {
return 1
}
f().then(res => console.log(res)) // 1
等价于:
async function f() {
return Promise.resolve(1)
}
f().then(res => console.log(res)) // 1
示例部分:
1.promise 在 1s 之后 resolve 的例子:
async function f() {
let promise = new Promise((resolve, reject) => {
setTimeout(() => resolve('done!'), 1000)
})
let result = await promise // 直到promise返回一个resolve值(*)
console.log(result) // 1s 后打印 字符串 'done!'
}
f()
2.多个 await 完成链式操作:
async function showAvatar() {
// read our JSON
let response = await fetch('/article/promise-chaining/user.json')
let user = await response.json() // read github user
let githubResponse = await fetch(`https://api.github.com/users/${user.name}`)
let githubUser = await githubResponse.json() // 展示头像
let img = document.createElement('img')
img.src = githubUser.avatar_url
img.className = 'promise-avatar-example'
documenmt.body.append(img) // 等待3s
await new Promise((resolve, reject) => {
setTimeout(resolve, 3000)
}) img.remove() return githubUser
} showAvatar()
promise 链式操作版:
function loadJson(url) {
return fetch(url)
.then(response => response.json());
} function loadGithubUser(name) {
return fetch(`https://api.github.com/users/${name}`)
.then(response => response.json());
} function showAvatar(githubUser) {
return new Promise(function(resolve, reject) {
let img = document.createElement('img');
img.src = githubUser.avatar_url;
img.className = "promise-avatar-example";
document.body.append(img); setTimeout(() => {
img.remove();
resolve(githubUser);
}, 3000);
});
} // Use them:
loadJson('/article/promise-chaining/user.json')
.then(user => loadGithubUser(user.name))
.then(showAvatar)
.then(githubUser => alert(`Finished showing ${githubUser.name}`));
// ...
错误处理:
promise 对象可不仅仅会具有 resolved 值,还会产生 rejected 值,当遇到 rejected 的时候,我们可以用两种方式来处理。
- try - catch 捕获:
try {
let response = await fetch('/no-user-here')
let user = await response.json()
} catch(err) {
// 在fetch和response.json中都能捕获错误
alert(err)
} - 链式 catch 捕获:
async function f() {
let response = await new Promise((resolve, reject) => {
setTimeout(() => {
reject('123')
}, 1000)
})
}
// f()变成了一个rejected的promise
f().catch(err => console.log(err)) // 1s 后打印 ‘123’
更多复杂用法详见 es7 文档。
Async/Await 学习与示例的更多相关文章
- C# async await 学习笔记2
C# async await 学习笔记1(http://www.cnblogs.com/siso/p/3691059.html) 提到了ThreadId是一样的,突然想到在WinForm中,非UI线程 ...
- ES8之async/await学习随笔
详细学习参考文档: 阮一峰老师的博客,覆盖知识点ES6/7/8/9,本篇学习笔记对阮老师的关于async/await文档中的知识点进行分点总结 在ES8中加入async/await新特性后,很明显带来 ...
- async/await学习笔记
async/await 的目的是简化使用 promises 的写法. 让我们来看看下面的例子: // 一个标准的 JavaScript 函数 function getNumber1() { r ...
- C# .net async await 学习
async/await简单介绍 在处理比较耗时的操作(如图片处理.数据压缩.http请求等)传统的异步方法是直接使用Thread或者Task进行操作,在复杂的应用编写中可能会出现回调的问题,因此C#目 ...
- C# async await 学习笔记1
由于我的开发工具为vs.net 2010(.net 4.0),需先做以下两步才能进行: 1.下载并安装Async CTP (http://www.microsoft.com/en-us/downloa ...
- C# async await 死锁问题总结
可能发生死锁的程序类型 1.WPF/WinForm程序 2.asp.net (不包括asp.net mvc)程序 死锁的产生原理 对异步方法返回的Task调用Wait()或访问Result属性时,可能 ...
- .NET异步操作学习之一:Async/Await中异常的处理
以前的异常处理,习惯了过程式的把出现的异常全部捕捉一遍,然后再进行处理.Async/Await关键字出来之后的确简化了异步编程,但也带来了一些问题.接下来自己将对这对关键字进行学习.然后把研究结果放在 ...
- JavaScript基础——深入学习async/await
本文由云+社区发表 本篇文章,小编将和大家一起学习异步编程的未来--async/await,它会打破你对上篇文章Promise的认知,竟然异步代码还能这么写! 但是别太得意,你需要深入理解Promis ...
- 一个真实的Async/Await示例
译者按: 通过真实的代码示例感受Async/Await的力量. 原文: Async/await - A thorough example 译者: Fundebug 为了保证可读性,本文采用意译而非直译 ...
随机推荐
- Eureka服务下线后快速感知配置
现在由于eureka服务越来越多,发现服务提供者在停掉很久之后,服务调用者很长时间并没有感知到变化,依旧还在持续调用下线的服务,导致长时间后才能返回错误,因此需要调整eureka服务和客户端的配置,以 ...
- Asp.Net Core 轻松学-从安装环境开始
Asp.Net Core 介绍 Asp.Net Core是微软新一代的跨平台开发框架,基于 C# 语言进行开发,该框架的推出,意味着微软从系统层面正式进击 Linux 服务器平台:从更新速度开 ...
- 告别 hash 路由,迎接 history 路由
博客地址:https://ainyi.com/69 三月来了,春天还会远吗.. 在这里,隆重宣布本博客告别 Vue 传统的 hash 路由,迎接好看而优雅的 history 路由~~ 映照官方说法 v ...
- mysql 盲注二分法python脚本
import urllib import urllib2 def doinject(payload): url = 'xxxxxxxxxxxxxxxxxxxxx' values = {'injecti ...
- Redis分布式队列和缓存更新
原文链接:https://www.cnblogs.com/hua66/p/9600085.html 在使用Redis中,我们可能会遇到以下场景: 例如: 某用户向服务器中发送一个请求,服务器将用户请求 ...
- Ext.isIterable
Ext.isIterable用于判断传入的参数是否为可迭代的 在这4种情况下,函数返回true 1:数组2:函数参数arguments3:HTML collections : NodeList4:HT ...
- vmware完整克隆(linux)
vmware中的完整克隆是基于指定的虚拟机克隆出相同的一份出来,不必再安装 但是我们要保证三个地方不能一样,一个是主机名称(hostname),一个是虚拟网卡设备mac地址,还有一个是ip地址 所以我 ...
- Winserver-默认以管理员运行程序
打开secpol.msc 打开本地安全策略找到安全设置--本地策略--安全选项用户账户控制:以管理员批准模式运行所有管理员---改为禁用保存设置重启电脑
- Python迭代器详解
最近在看两个github项目的代码时对迭代器有些困惑,因此写一篇笔记以理清脉络,经过两天的修改完善对迭代器有了一个初步的理解,相信会比网上绝大多数笔记有用些. 一.基础概念 在进行具体的迭代类和迭代函 ...
- SQL大全基本语法
一.基础 1.说明:创建数据库 CREATE DATABASE database-name 2.说明:删除数据库 drop database dbname 3.说明:备份sql server --- ...