async函数
时间:2020-04-17
本文章向大家介绍async函数,主要包括async函数使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
什么是async函数?
Generator的语法糖,让异步操作变得更加方便
const asyncFunc = async funtion(){ const f1 = await readFile('./a.txt') const f2 = await readFile('./b.txt') console.log(f1.toString()) console.log(f2.toString()) }
相比于Generator的改进
- Generator的执行必须依靠执行器,这也就造成了co模块的出现。而async函数中自带执行器,调用时只需要一行--asyncFunc()。而Generator需要首先获得遍历器,再执行next()或者使用co模块,才能真正调用
- Generator的yield后只能跟Promise对象或Thunk函数,而async函数的await后可以跟Promise对象和原始类型的数据(会自动转成立即执行resolved的Promise)
- 返回值是Promise对象,可以直接对其进行.then调用。而Generator返回iterator接口,很麻烦。
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('jack').then(); // 箭头函数 const foo = async () => {};
返回Promise对象
async funtion foo(){ return 'hello' } foo().then(resolved => console.log(resolved))
// hello
当抛出异常时,导致返回的Promise对象状态变为rejected,错误对象会被rejected处理函数捕获
async function foo() { throw new Error('出错了') } foo().then( v => console.log(v), e => {console.log(e)} )
Promise对象的状态变化
当async函数中存在多个await语句时,会等到所有await一个个执行完,才会改变状态,执行.then(除非遇到错误异常或return语句)
async function foo(url) { let response = await fetch(url); let html = await response.text(); return html.match(/<title>([\s\S]+)<\/title>/i)[1]; } foo('').then(console.log)
以上代码中,只有等到fetch请求结束、获取响应文本结束、匹配结束,才会改变promise状态,执行.then
await命令
通常情况下,await命令后跟一个promise对象,返回该对象的结果。如果不是,就返回对应的值
还有一种情况,await后是一个定义then的方法,也会被当做是promise对象处理
当await后面的promise状态变为rejected时,就会被catch捕捉。只要某个await后的promise状态变为rejected,后面的await不会继续执行
async function foo() { await Promise.reject('出错了') // ‘出错了’ await Promise.resolve('hello world') // 不会执行 } foo() .then(v=>{ console.log(v) }) .catch(e=>{ console.log(e) })
如果想要前一个异步操作失败不影响后面异步操作的执行,可以通过以下两种方式
async function foo() { try{ await Promise.reject('出错了') }catch(e){ } return await Promise.resolve('hello world') } foo() .then(v=>{ console.log(v) }) async function foo() { await Promise.reject('出错了').catch(e => console.log(e)) return await Promise.resolve('hello world') } foo() .then(v=>{ console.log(v) })
顶层await
通常情况下await命令只能在async函数中使用,而为了达到模块异步加载问题,目前有一个语法提案,允许在async函数外部写await。
当加载某个模块时,如果其中包含异步操作,加载方无法确定被加载模块是否执行结束。因此在导出对象时添加await,直到异步操作完成才能被其他模块导入。
const dynamic = import(someMission); const data = fetch(url); export const output = someProcess((await dynamic).default, await data);
使用注意
- 因为await后面跟着的promise对象,只要reject就会执行catch代码,中止继续执行。因此最好将所有await放在try..catch...代码块中
- await只能在async函数中使用,否则报错
- 如果有多个await,且后面的异步操作不存在继发关系,最好同时触发
-
async function foo(){ await Promise.all([getfoo(), getimg()]) }
-
原文地址:https://www.cnblogs.com/ashen1999/p/12719840.html
- 群体智能算法-黏菌寻找食物最优路线行为模拟
- finecms设置伪静态后分享到微信不能访问怎么处理
- composer安装其实可以很简单 两行命令就解决了
- 章神的私房菜之数据预处理
- 如何调用finecms指定栏目的描述关键词
- finecms栏目文章页seo设置
- Logistic回归实战篇之预测病马死亡率(一)
- DedeCMS后台500错误一种原因是不支持PHP5.3、5.4及以上版本
- finecms指定从第几篇文章开始调用5条记录,并调用文章所在栏目
- finecms如何调用多个栏目的子栏目
- 从傅立叶变换到Gabor滤波器
- 三个小时学会wordpress模板制作
- The each() function is deprecated报错的解决方法
- 书接上文:薛定谔的猫是如何诞生的?
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Go语言 | 从并发模式看channel使用技巧
- 字节码文件 Krains 2020-08-04
- 为WordPress添加自定义设置上传头像功能
- 229. 求众数 II Krains 2020-08-04 16:03:03 数学
- 部署 Consul服务实现Docker容器跨主机通信
- 【测试】 Java如何优雅的生成测试数据
- Spring事物的传播行为案例分析
- Ingress-nginx灰度发布功能详解
- [885]Tensorflow设置CUDA_VISIBLE_DEVICES来控制GPU的使用
- Windows10:启用或禁用休眠、保留的存储
- 基于Vue SEO的四种方案
- 一道SQL问题,你来试试的?
- 利用DNSLOG测试Fastjson远程命令执行漏洞
- goldengate classic模式在空闲数据库上抽取和应用数据延迟问题
- gorm jion查询映射(扫描scan)到新的结构体,必须使用select规定字段,与xorm的jion对比