关于异步处理,ES5的回调使我们陷入地狱,ES6的Promise使我们脱离魔障,终于、ES7的async-await带我们走向光明。今天就来学习一下 async-await。

async-await和Promise的关系

经常会看到有了 async-await、promise 还有必要学习吗async await优于promise的几个特点,接收了这些信息后,就蒙圈了。现在才知道,async-awaitpromisegenerator的语法糖。只是为了让我们书写代码时更加流畅,当然也增强了代码的可读性。简单来说:async-await 是建立在 promise机制之上的,并不能取代其地位。

基本语法

async function basicDemo() {
let result = await Math.random();
console.log(result);
} basicDemo();
// 0.6484863241051226
//Promise {[[PromiseStatus]]: "resolved", [[PromiseValue]]: undefined}

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

async

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

async function demo01() {
return 123;
} demo01().then(val => {
console.log(val);//
});
若 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);// 两秒之后会被打印出来
console.log('--end')
}
awaitDemo();
// normalFunc
// something, ~~
// enough sleep~
// --end
 

实例1

举例说明,你有三个请求需要发生,第三个请求是依赖于第二个请求的结果第二个请求依赖于第一个请求的结果。若用 ES5实现会有3层的回调,若用Promise 实现至少需要3个then。

一个是代码横向发展,另一个是纵向发展。今天指给出 async-await 的实现哈~

//我们仍然使用 setTimeout 来模拟异步请求
function sleep(second, param) {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(param);
}, second);
})
} async function test() {
let result1 = await sleep(2000, 'req01');
let result2 = await sleep(1000, 'req02' + result1);
let result3 = await sleep(500, 'req03' + result2);
console.log(`
${result3}
${result2}
${result1}
`);
} test();
//req03req02req01
//req02req01
//req01

实例2

有三个异步请求需要发送,相互没有关联,只是需要当请求都结束后将界面的 loading 清除掉即可。

async function correctDemo() {
let p1 = sleep(1000);
let p2 = sleep(1000);
let p3 = sleep(1000);
await Promise.all([p1, p2, p3]).then(function (results) {
        console.log(results) // 获得一个Array: ['P1', 'P2'] 
})
console.log('clear the loading~~')

}
correctDemo();// clear the loading~

错误/失败 reject处理

上述的代码好像给的都是resolve的情况,那么reject的时候我们该如何处理呢?

function sleep(second) {
return new Promise((resolve, reject) => {
setTimeout(() => {
reject('want to sleep~');
}, second);
})
} async function errorDemo() {
let result = await sleep(1000);
console.log(result);
}
errorDemo();// VM706:11 Uncaught (in promise) want to sleep~ // 为了处理Promise.reject 的情况我们应该将代码块用 try catch 包裹一下
async function errorDemoSuper() {
try {
let result = await sleep(1000);
console.log(result);
} catch (err) {
console.log(err);
}
} errorDemoSuper();// want to sleep~
// 有了 try catch 之后我们就能够拿到 Promise.reject 回来的数据了。

ES6系列文章 异步神器async-await的更多相关文章

  1. 关于异步执行(Async/await)的理解(转发)

    原文地址: http://blog.jobbole.com/85787/ 同步编程与异步编程 通常情况下,我们写的C#代码就是同步的,运行在同一个线程中,从程序的第一行代码到最后一句代码顺序执行.而异 ...

  2. MVC+Spring.NET+NHibernate .NET SSH框架整合 C# 委托异步 和 async /await 两种实现的异步 如何消除点击按钮时周围出现的白线? Linq中 AsQueryable(), AsEnumerable()和ToList()的区别和用法

    MVC+Spring.NET+NHibernate .NET SSH框架整合   在JAVA中,SSH框架可谓是无人不晓,就和.NET中的MVC框架一样普及.作为一个初学者,可以感受到.NET出了MV ...

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

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

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

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

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

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

  6. .net 异步函数 Async await

    .net  异步函数  Async await 一旦为函数添加async关键字 该函数就是一个异步函数. 异步方法必须返回 void 或 Task<> 类型. public static ...

  7. javascript异步编程 Async/await

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

  8. ES6 系列之异步处理实战

    前言 我们以查找指定目录下的最大文件为例,感受从 回调函数 -> Promise -> Generator -> Async 异步处理方式的改变. API 介绍 为了实现这个功能,我 ...

  9. js异步回调Async/Await与Promise区别 新学习使用Async/Await

    Promise,我们了解到promise是ES6为解决异步回调而生,避免出现这种回调地狱,那么为何又需要Async/Await呢?你是不是和我一样对Async/Await感兴趣以及想知道如何使用,下面 ...

随机推荐

  1. maven(5)--依赖特性

    依赖的子标签中有scope,常用值有compile.provide.test.runtime compile:编译范围有效,即编译和打包时都会将这个依赖存储 provide:编译测试有效,但是打包是将 ...

  2. mysql中的find_in_set的使用

    原文 http://www.php-note.com/article/detail/383 举个例子来说: 有个文章表里面有个type字段,它存储的是文章类型,有 1头条.2推荐.3热点.4图文... ...

  3. mysql 去除重复数据

    1. 问题描述 有时load或者insert操作导致 表数据有重复 2. 解决方案 通过临时表.主键id.倒腾去重 示例 2.1  create table student( name varchar ...

  4. Goodbye Bingshen

    在uoj上打的第二场比赛......还凑合(卧槽C题80分没了QAQ 第一次接触交互题还挺好玩的哈哈 可能是人比较多吧.....rating涨了不少...... 现在我rating正好比lrd高1哈哈 ...

  5. Django—Model

    Django 模型是与数据库相关的,与数据库相关的代码一般写在 models.py 中,Django 支持 Sqlite3.MySQL.PostgreSQL 等数据库,只需要在 settings.py ...

  6. Activiti 配置Oracle不能自动创建表解决方法

    使用配置文件创建工作流表 <bean id="processEngineConfiguration" class="org.activiti.engine.impl ...

  7. Java集合排序

    [ 1.对普通的包装类基本数据类型的list数组排序(Integer,Long,Double) ] Collections.sort(List list) [例] List<Long> m ...

  8. 【转】ArcGIS Server10.1安装常见问题及解决方案

    转载自:http://www.higis.cn/Tech/tech/tId/85/ 最近因为更换系统的原因,重新安装了ArcGISServer 10.1.过程中遇到了几个小问题,虽然都一一解决了,但也 ...

  9. Incorrect string value: '\xE8\xAF\xAD\xE6\x96\x87' for column 'name' at row 1

    报错的原因就是在执行插入时对Name这个字段被赋予了错误的字符串值:’\xE4\xB8\xAD\xE6\x96\x87’ 实际上就函数里面的变量接收到的值编码格式跟它定义的不一致. 使用navicat ...

  10. 微软发布SQL Server on Linux

    本文参考并翻译自:微软云计算与企业执行副总裁Scott Guthrie的博客. 过去的一年,不管是对于微软的数据业务,还是整个行业,都是令人惊喜的一年.在周四刚于纽约举行的Data Driven活动中 ...