Await/Async
Async其实就是Generator函数的语法糖。
啥是语法糖?就是一种更容易让人理解,代码可读性更高的另外一种语法。
const asyncRead = async function(){
const f1 = await readFile("/etc/fstab");
const f2 = await readFile("etc/shells");
console.log(f1.toString());
console.log(f2.toString());
}
可以跟Generator函数对比:就是把(*)替换成async,将yeild换成了await,仅此而已。
不同点在于:async函数的执行,直接执行函数名 asyncRead(),就会自动执行,不需要像Generator函数那样,调用next方法才执行。
Async函数的返回值时Promise对象,而Generator函数的返回值是Iterator对象,async函数完全是可以看做是多个异步操作,包装成的一个Promise对象,而await命令只是内部then的语法糖。
1,基本用法:
在上一张的一个图中,可以看出,promise,Generator,Async/Awati的强弱关系:
Generator < Promise < Async/Await,可以看出async/await的功能之强大。所以更得好好学习呀~~~
async function timeout(ms){
await new Promise((resolve)=>{
setTimeout(resolve,ms);
})
}
async function asyncPrint(value,ms){
await timeout(ms);
console.log(value);
}
asyncPrint('hello',50)
上面代码指定50毫秒之后输hello world。
Async的多种使用形式:
// 函数声明
async function foo() {} // 函数表达式
const foo = async function () {}; // 对象的方法
let obj = { async foo() {} };
obj.foo().then(...) // Class 的方法
class Storage {
constructor() {
this.cachePromise = caches.open('avatars');
} async getAvatar(name) {
const cache = await this.cachePromise;
return cache.match(`/avatars/${name}.jpg`);
}
} const storage = new Storage();
storage.getAvatar('jake').then(…); // 箭头函数
const foo = async () => {};
1,await命令
正常情况下,await后面是一个promise对象,如果不是,会被转化为一个立即resolve的promise对象。
async function f(){
await Promise.reject('error');
}
f().then(v=>console.log(`success=>${v}`))
.catch(e=>console.log(`fail=>${e}`))
//fail=>error
await命令后面的promise对象如果变成reject状态,reject的方法参数传入了catch的回调里面,此时 整个async函数会中断执行。
如果想要前一个异步不会影响后面的异步,可以将前一个await放在try...catch里面,这样无论这个异步操作是否成功,第二个异步都会执行。或者在前一个await的promise后面加上catch语句进行捕捉reject信息,也是可以不影响后面await的执行。
async function myFunction() {
try {
await somethingThatReturnsAPromise();
} catch (err) {
console.log(err);
}
} // 另一种写法 async function myFunction() {
await somethingThatReturnsAPromise()
.catch(function (err) {
console.log(err);
});
}
注意的另外一点:
如果两个方法不存在继发关系,即两个独立的异步操作,完全可以让它们同时触发。
let foo = await getFoo();
let bar = await getBar(); let [foo,bar] = await Promise.all([getFoo(),getBar()]);
还有:await命令只能用在async函数里面,用在普通函数中会报错。
async函数的实现原理:
就是Generator函数和自动执行器,包装在一个函数里面。主要是这个自动生成器是怎么实现的?
Await/Async的更多相关文章
- javascript异步编程的前世今生,从onclick到await/async
javascript与异步编程 为了避免资源管理等复杂性的问题, javascript被设计为单线程的语言,即使有了html5 worker,也不能直接访问dom. javascript 设计之初是为 ...
- Silverlight项目笔记1:UI控件与布局、MVVM、数据绑定、await/async、Linq查询、WCF RIA Services、序列化、委托与事件
最近从技术支持转到开发岗,做Silverlight部分的开发,用的Prism+MVVM,框架由同事搭好,目前做的主要是功能实现,用到了一些东西,侧重于如何使用,总结如下 1.UI控件与布局 常用的主要 ...
- 5分种让你了解javascript异步编程的前世今生,从onclick到await/async
javascript与异步编程 为了避免资源管理等复杂性的问题,javascript被设计为单线程的语言,即使有了html5 worker,也不能直接访问dom. javascript 设计之初是 ...
- es7 await/async解决异步问题
最近做项目遇到一个问题,前端调用ie浏览器中的ocx的方法去查询数据,查询完之后ocx给一个返回值,然后js将返回值当参数传入到另外的函数中去做数据处理,但是遇到一个问题是前端需要异步去执行这个过程 ...
- promise 的基本概念 和如何解决js中的异步编程问题 对 promis 的 then all ctch 的分析 和 await async 的理解
* promise承诺 * 解决js中异步编程的问题 * * 异步-同步 * 阻塞-无阻塞 * * 同步和异步的区别? 异步;同步 指的是被请求者 解析:被请求者(该事情的处理者)在处理完事情的时候的 ...
- 如何避免 await/async 地狱
原文地址:How to escape async/await hell 译文出自:夜色镇歌的个人博客 async/await 把我们从回调地狱中解救了出来,但是如果滥用就会掉进 async/await ...
- 【.NET异步编程系列1】:await&async语法糖让异步编程如鱼得水
前导 Asynchronous programming Model(APM)异步编程模型以BeginMethod(...) 和 EndMethod(...)结对出现. IAsyncResult Beg ...
- 使用Typescript写的Vue初学者Hello World实例(实现按需加载、跨域调试、await/async)
万事开头难,一个好的Hello World程序可以节省我们好多的学习时间,帮助我们快速入门.Hello World程序之所以是入门必读必会,就是因为其代码量少,简单易懂.但我觉得,还应该做到功能丰富, ...
- C#.NET使用Task,await,async,异步执行控件耗时事件(event),不阻塞UI线程和不跨线程执行UI更新,以及其他方式比较
使用Task,await,async,异步执行事件(event),不阻塞UI线程和不跨线程执行UI更新 使用Task,await,async 的异步模式 去执行事件(event) 解决不阻塞UI线程和 ...
- Vue + WebPack + Typescript初学者VSCode项目 (按需加载、跨域调试、await/async)
万事开头难,一个好的Hello World程序可以节省我们好多的学习时间,帮助我们快速入门.Hello World程序之所以是入门必读必会,就是因为其代码量少,简单易懂.但我觉得,还应该做到功能丰富, ...
随机推荐
- python开发常见应用第一卷(OS遍历文件并存储文件路径到数据库)
之前我们爬取完指定网站的图片后,会将它门保存到服务器或本地的数据库中,真正的工作中大多数是采用分布式的方式来爬取的,所以这些图片会分布在很多的主机上面,当被引用时需要根据IP+图片路径来引用并且加载, ...
- android手机卫士、3D指南针、动画精选、仿bilibli客户端、身份证银行卡识别等源码
Android精选源码 android身份证.银行卡号扫描源码 android仿bilibili客户端 android一款3D 指南针 源码 android手机卫士app源码 android提醒应用, ...
- go proxy转发工作中碰到的问题
A-B 需求是一个中转 A-Proxy-B 读取来源请求A,在proxy读取body作些处理,再转给B,再把返回内容转给A 问题出在proxy这里 如果先把请求给B,再读body res, err : ...
- scala语言yield配合for的用法实例
yield配合for的用法 话不多说见实例 package com.donews.reynold /** * Created by reynold on 2017/3/23. */ object Sc ...
- linux系统开机静态分配ip地址
在/etc/sysconfig/network-scripts/ifcfg-eth0文件中 添加: IPADDR=192.168.1.100(设置静态地址) NETMASK=255.255.255.0 ...
- 关于js中的比较时遇到的坑
关于JavaScript中比较遇到的坑 当你的要比较数字的大小但是你的数字确是字符串时,就会出错比如说: console.log('5' > '6') // fasle consloe.log( ...
- 2015-09-14-初级vector
标准库vector类型 #include<vector> using std::vector; vector为一个类模板. vector的初始化 vector<T> v1; v ...
- 合并cookie,提取json数据
发送的第3个请求需要前两个请求的cookie,需要对cookie进行合并 发送的请求数据来自于json数据中的某个键值. 这里是删除所有的对话主题目录,每一个目录有一个id,发起删除对话主题目录的请求 ...
- Nginx的四层和七层代理
理论部分: 所谓四层负载均衡,也就是主要通过报文中的目标地址和端口,再加上负载均衡设备设置的服务器选择方式,决定最终选择的内部服务器,它一般走的是tcp,udp协议 所谓七层负载均衡,也称为“内 ...
- 读书笔记之 数字图像处理的MATLAB实现(第2版)