参考: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 学习与示例的更多相关文章

  1. C# async await 学习笔记2

    C# async await 学习笔记1(http://www.cnblogs.com/siso/p/3691059.html) 提到了ThreadId是一样的,突然想到在WinForm中,非UI线程 ...

  2. ES8之async/await学习随笔

    详细学习参考文档: 阮一峰老师的博客,覆盖知识点ES6/7/8/9,本篇学习笔记对阮老师的关于async/await文档中的知识点进行分点总结 在ES8中加入async/await新特性后,很明显带来 ...

  3. async/await学习笔记

    async/await 的目的是简化使用 promises 的写法.     让我们来看看下面的例子: // 一个标准的 JavaScript 函数 function getNumber1() { r ...

  4. C# .net async await 学习

    async/await简单介绍 在处理比较耗时的操作(如图片处理.数据压缩.http请求等)传统的异步方法是直接使用Thread或者Task进行操作,在复杂的应用编写中可能会出现回调的问题,因此C#目 ...

  5. C# async await 学习笔记1

    由于我的开发工具为vs.net 2010(.net 4.0),需先做以下两步才能进行: 1.下载并安装Async CTP (http://www.microsoft.com/en-us/downloa ...

  6. C# async await 死锁问题总结

    可能发生死锁的程序类型 1.WPF/WinForm程序 2.asp.net (不包括asp.net mvc)程序 死锁的产生原理 对异步方法返回的Task调用Wait()或访问Result属性时,可能 ...

  7. .NET异步操作学习之一:Async/Await中异常的处理

    以前的异常处理,习惯了过程式的把出现的异常全部捕捉一遍,然后再进行处理.Async/Await关键字出来之后的确简化了异步编程,但也带来了一些问题.接下来自己将对这对关键字进行学习.然后把研究结果放在 ...

  8. JavaScript基础——深入学习async/await

    本文由云+社区发表 本篇文章,小编将和大家一起学习异步编程的未来--async/await,它会打破你对上篇文章Promise的认知,竟然异步代码还能这么写! 但是别太得意,你需要深入理解Promis ...

  9. 一个真实的Async/Await示例

    译者按: 通过真实的代码示例感受Async/Await的力量. 原文: Async/await - A thorough example 译者: Fundebug 为了保证可读性,本文采用意译而非直译 ...

随机推荐

  1. sql:常用函数

    1.验证是否是null,是则替换ISNULL(Weight, 50) SELECT AVG(ISNULL(Weight, 50))FROM Production.Product; 2.连接多个字符串  ...

  2. IOC之Unity的使用详解

    原文链接:https://www.cnblogs.com/hua66/p/9670639.html Unity作为Microsoft推出IOC容器,其功能是非常丰富的,其中需要注意的地方也不少.以下是 ...

  3. java实现 批量转换文件编码格式

    一.场景说明 不知道大家有没有遇到过之前项目是GBK,现在需要全部换成UTF-8的情况.反正我是遇到了. eclipse可以改变项目的编码格式,但是文件如果直接转换的话里面的中文就会全部乱码,需要先复 ...

  4. Netty中的Channel之数据冲刷与线程安全(writeAndFlush)

    本文首发于本博客,如需转载,请申明出处. GitHub项目地址 InChat 一个轻量级.高效率的支持多端(应用与硬件Iot)的异步网络应用通讯框架 前言 本文预设读者已经了解了一定的Netty基础知 ...

  5. CSS中的一下小技巧1之CSS3三角形运用

    使用CSS3实现三角形: 在前端页面中有很多时候会遇到需要三角形图案的时候,以前不知道可以用CSS3实现三角形的时候,一般都是叫UI把三角形图案切出来. 后来知道原来可以用CSS3实现三角形,可是用过 ...

  6. Skyline Te Pro二次开发技能总结

    前两天项目开发中,忽然一个Imagelabel的参数不会调了,但是前段时间可是很熟悉的.好吧,好记性不如烂笔头! 1. 模型弹出窗调试 这里的模型弹出框指涉及到模型操作的,比如监听模型选定事件.根据窗 ...

  7. Android 网页打开app(或者打开指定页面)并且接收参数

    网页打开app 现实描述场景: 1.短信通知中通知内容,比如信息中一个咨询详情,流程步骤,信息中的地址打开的是一个网页,网页打开就指定app或者app中的指定页面 html代码 <html> ...

  8. ARDC连接设备异常之ADB version mismatch的处理

    如果ARDC提示ADB version mismatch,说明系统当前运行的adb server与client不匹配.此时如果在cmd.exe中运行adb devices命令则会出现类似如下的提示信息 ...

  9. 第五篇Scrum冲刺博客

    一.Daily Scrum Meeting照片 二.每个人的工作 成员 ItemID 已完成工作 明天计划完成的工作 遇到的困难 张鸿 o1 整合界面至游戏中 将其他剩余功能进行整合 游戏状态的切换 ...

  10. MyDAL - in && not in 条件 使用

    索引: 目录索引 一.API 列表 C# 代码中 接口 IList.Contains() 方法生成 SQL 对应的 in(val1,val2,... ...) 如:.Queryer<Agent& ...