ES6基础知识(async 函数)
1.async 函数是什么?一句话,它就是 Generator 函数的语法糖。
const fs = require('fs'); const readFile = function (fileName) {
return new Promise(function (resolve, reject) {
fs.readFile(fileName, function(error, data) {
if (error) return reject(error);
resolve(data);
});
});
}; //Generator 函数
const gen = function* () {
const f1 = yield readFile('/etc/fstab');
const f2 = yield readFile('/etc/shells');
console.log(f1.toString());
console.log(f2.toString());
}; //async函数
const asyncReadFile = async function () {
const f1 = await readFile('/etc/fstab');
const f2 = await readFile('/etc/shells');
console.log(f1.toString());
console.log(f2.toString());
};
async
函数就是将 Generator 函数的星号(*
)替换成async
,将yield
替换成await,
async
函数的返回值是 Promise 对象,这比 Generator 函数的返回值是 Iterator 对象方便多了。你可以用then
方法指定下一步的操作。进一步说,async
函数完全可以看作多个异步操作,包装成的一个 Promise 对象,而await
命令就是内部then
命令的语法糖。
2.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 () => {};
3.只有async
函数内部的异步操作执行完,才会执行then
方法指定的回调函数
async function getTitle(url) {
let response = await fetch(url);
let html = await response.text();
return html.match(/<title>([\s\S]+)<\/title>/i)[1];
}
getTitle('https://tc39.github.io/ecma262/').then(console.log);
上面代码中,函数getTitle
内部有三个操作:抓取网页、取出文本、匹配页面标题。只有这三个操作全部完成,才会执行then
方法里面的console.log
。
4.按顺序完成异步操作,依次远程进行ajax请求,然后按照请求的顺序输出结果
let urls = [
'https://www.easy-mock.com/mock/5c73528306ffee27c6b2f0aa/testAerial/pointarr',
'https://www.easy-mock.com/mock/5b62549fbf26d2748cff3cf4/dashuju/visualize'
]; async function loader1(urls){//所有远程操作都是继发。只有前一个 URL 返回结果,才会去读取下一个 URL
for(let url of urls){
const response = await $.getJSON(url).then((res) => res);
console.log(response);//ajax先后请求并返回结果
}
}
loader1(urls);
5.并发发出远程ajax请求,同时输出结果
let urls = [
'https://www.easy-mock.com/mock/5c73528306ffee27c6b2f0aa/testAerial/pointarr',
'https://www.easy-mock.com/mock/5b62549fbf26d2748cff3cf4/dashuju/visualize'
]; async function loader(urls){//map方法的参数是async函数,但它是并发执行的,因为只有async函数内部是继发执行,外部不受影响。后面的for..of循环内部使用了await,因此实现了按顺序输出
const results = urls.map(async url => {
const response = await $.getJSON(url).then((res) => res);
return response;
}); for(let text of results){
console.log(await text);//ajax一起请求同时返回结果
} }
loader(urls);
6.异步遍历器与同步遍历器
const asyncIterable = createAsyncIterable(['a', 'b']);
const asyncIterator = asyncIterable[Symbol.asyncIterator]();//部署异步遍历器接口 asyncIterator
.next()
.then(iterResult1 => {
console.log(iterResult1); // { value: 'a', done: false }
return asyncIterator.next();
})
.then(iterResult2 => {
console.log(iterResult2); // { value: 'b', done: false }
return asyncIterator.next();
})
.then(iterResult3 => {
console.log(iterResult3); // { value: undefined, done: true }
});
let arr = ['a', 'b', 'c'];
let iter = arr[Symbol.iterator]();//部署同步遍历器 iter.next() // { value: 'a', done: false }
iter.next() // { value: 'b', done: false }
iter.next() // { value: 'c', done: false }
iter.next() // { value: undefined, done: true }
备注:文中多数内容摘自阮一峰老师文章,仅供自我学习查阅。
ES6基础知识(async 函数)的更多相关文章
- es6学习笔记-async函数
1 前情摘要 前段时间时间进行项目开发,需求安排不是很合理,导致一直高强度的加班工作,这一个月不是常说的996,简直是936,还好熬过来了.在此期间不是刚学会了es6的promise,在项目有用到pr ...
- 深入浅出ES6教程『async函数』
大家好,本人名叫苏日俪格,大家叫我 (格格) 就好,在上一章节中我们学到了Symbol & generator的用法,下面我们一起来继续学习async函数: async [ə'zɪŋk]:这个 ...
- php面试笔记(5)-php基础知识-自定义函数及内部函数考点
本文是根据慕课网Jason老师的课程进行的PHP面试知识点总结和升华,如有侵权请联系我进行删除,email:guoyugygy@163.com 在面试中,考官往往喜欢基础扎实的面试者,而函数相关的考点 ...
- [C/C++基础知识] main函数的参数argc和argv
该篇文章主要是关于C++\C语言最基础的main函数的参数知识,是学习C++或C语言都必备的知识点.不知道你是否知道该知识?希望对大家有所帮助.一.main()函数参数通常我们在写主函数时都是void ...
- ES6中的async函数
一.概述 async 函数是 Generator 函数的语法糖 使用Generator 函数,依次读取两个文件代码如下 var fs = require('fs'); var readFile = f ...
- ES6学习之Async函数
定义:Async函数是一个异步操作函数,本质上,Async函数是Generator函数的语法糖.async函数就是将 Generator 函数的星号(*)替换成async,将yield替换成await ...
- 浅谈ES6中的Async函数
转载地址:https://www.cnblogs.com/sghy/p/7987640.html 定义:Async函数是一个异步操作函数,本质上,Async函数是Generator函数的语法糖.asy ...
- ES6基础知识(Generator 函数应用)
1.Ajax 是典型的异步操作,通过 Generator 函数部署 Ajax 操作,可以用同步的方式表达 function* main() { var result = yield request(& ...
- ES6基础知识(Generator 函数)
1.next().throw().return() 的共同点 next().throw().return()这三个方法本质上是同一件事,可以放在一起理解.它们的作用都是让 Generator 函数恢复 ...
随机推荐
- ARC115E-LEQ and NEQ【容斥,dp,线段树】
正题 题目链接:https://atcoder.jp/contests/arc115/tasks/arc115_d 题目大意 \(n\)个数字的序列\(x\),第\(x_i\in [1,A_i]\ca ...
- Docker-Java限制cpu和内存及浅析源码解决docker磁盘挂载失效问题
需求 之前工作流的运行都是用的docker-java提供的api拉起的docker容器直接跑服务,但是最新线上的新业务资源消耗较大,单个容器如果不加控制,CPU和内存都会拉满,导致服务器莫名宕机事故的 ...
- PyTorch模型读写、参数初始化、Finetune
使用了一段时间PyTorch,感觉爱不释手(0-0),听说现在已经有C++接口.在应用过程中不可避免需要使用Finetune/参数初始化/模型加载等. 模型保存/加载 1.所有模型参数 训练过程中,有 ...
- 踩坑系列《十一》完美解决阿里云vod视频点播无法播放音频和视频点播控制台里的媒资库里面的视频无法播放
刚开始项目部署的时候,音频还是正常播放,后面直接报了 获取m3u8文件失败(manifestLoadError) 的错误,原因是 我的域名 xxx.com 这个域名没有解析到点播提供的CNAME上,所 ...
- 感恩笔记之SQL语句操纵数据集基本功能模板
SQL查询_基本功能 一 SQL语句整体架构 SELECT --1 查询数据表 INTO --2 新建数据表 FROM --3 查询数据表 WHERE --4 筛选数据表 ORDER BY --5 排 ...
- AutoCAD云产品平台ForgeViewer格式离线部署思路分析
背景 在上一篇博文中CAD图DWG解析WebGIS可视化技术分析总结提到,利用AutoCAD的自有云产品 Autodesk Forge,能在浏览器中渲染 3D 和 2D 模型数据,实现DWG图形的We ...
- FastAPI 学习之路(八)路径参数和数值的校验
系列文章: FastAPI 学习之路(一)fastapi--高性能web开发框架 FastAPI 学习之路(二) FastAPI 学习之路(三) FastAPI 学习之路(四) FastAPI 学习之 ...
- C++ 与 Visual Studio 2019 和 WSL(三)
头文件 如果不小心修改了 Linux C/C++ 标准头文件,可以下面这样操作进行恢复: 项目 → 重新扫描解决方案
- AIApe问答机器人Scrum Meeting 5.1
Scrum Meeting 5 日期:2021年5月1日 会议主要内容概述:汇报两日工作. 一.进度情况 组员 负责 两日内已完成的工作 后两日计划完成的工作 工作中遇到的困难 李明昕 后端 Task ...
- UltraSoft - Beta - Scrum Meeting 7
Date: May 23rd, 2020. Scrum 情况汇报 进度情况 组员 负责 今日进度 q2l PM.后端 暂无 Liuzh 前端 编写忘记密码界面 Kkkk 前端 暂无 王fuji 前端 ...