JS中的async与await怎么使用
作者:前端老实人 时间:2024-05-02 16:19:31
目录
一、async
二、await:
三、综合应用
一、async
async
创建一个异步函数来定义一个代码块,在其中运行异步代码;
怎样变成异步函数呢?以 async
这个关键字开始,它可以被放置在一个函数前面
async function f() {
return 1;
}
f().then(alert); // 1
//上下结果一样
async function f() {
return Promise.resolve(1);
}
f().then(alert); // 1
//也可以用箭头函数
let hello = async () => { return "1" };
hello().then((value) => console.log(value))
//返回值也可以简化成这样
hello().then(console.log)
异步函数的特征之一:保证函数的返回值为 promise
。
将 async
关键字加到函数申明中,可以告诉它们返回的是 promise
,而不是直接返回值。此外,它避免了同步函数为支持使用 await
带来的任何潜在开销。
二、await:
await
只在异步函数里面才起作用。它可以放在任何异步的,关键字 await
让 JavaScript
引擎等待直到 promise
完成并返回结果。在等待promise
的同时,其他正在等待执行的代码就有机会执行了。
您可以在调用任何返回Promise
的函数时使用 await
,包括Web API
函数。
async function f() {
let promise = new Promise((resolve, reject) => {
setTimeout(() => resolve("咚!"), 1000)
});
let result = await promise; // 等待执行,直到 promise resolve 执行完
alert(result); // "咚!"
}
f();//拿到 result 作为结果继续往下执行。所以上面这段代码在1秒后显示 “咚!”。
注意:await 实际上会暂停函数的执行,直到 promise 状态变为 完成,然后以 promise 的结果继续执行。这个行为不会耗费任何 CPU 资源,因为 JavaScript 引擎可以同时处理其他任务:执行其他脚本,处理事件等。
三、综合应用
有了async/await
就去除了到处都是 .then()
代码块,因为await
会等待了。
async function A() {
let response = await fetch('c.jpg');
let myBlob = await response.blob();
let objectURL = URL.createObjectURL(myBlob);
let image = document.createElement('img');
image.src = objectURL;
document.body.appendChild(image);
}
A()
.catch(e => {
console.log('问题: ' + e.message);
});
用更少的.then()
块来封装代码,同时它看起来很像同步代码,所以它非常直观。这样用的很爽!
来源:https://blog.51cto.com/u_15453248/4845084
标签:JS,async,await
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
JavaScript实现DOM对象选择器
2024-05-05 09:15:35
![](https://img.aspxhome.com/file/2023/7/129567_0s.jpg)
四个Python操作Excel的常用脚本分享
2023-12-04 07:04:27
![](https://img.aspxhome.com/file/2023/2/135002_0s.jpg)
python 用所有标点符号分隔句子的示例
2022-09-18 01:41:57
使用fdopen实现对Python进程产生的文件进行权限最小化配置
2021-04-20 15:49:05
THREE.JS入门教程(5)你应当知道的十件事
2024-04-18 10:52:01
微信小程序上传图片功能(附后端代码)
2023-07-24 04:21:40
![](https://img.aspxhome.com/file/2023/9/55969_0s.jpg)
python实现数据写入excel表格
2023-07-04 00:39:41
使table也能overflow:hidden
2008-08-18 21:04:00
使用Python手工计算x的算数平方根,来自中国古人的数学智慧
2021-12-07 01:29:53
![](https://img.aspxhome.com/file/2023/6/107666_0s.png)
淘宝搜索框研究报告
2010-07-27 12:49:00
![](https://img.aspxhome.com/file/UploadPic/20107/27/2010727125528102s.png)
详解Python并发编程之创建多线程的几种方法
2023-03-31 19:34:37
.net 6精简版webapi教程及热重载、代码自动反编译演示
2024-05-05 09:13:12
![](https://img.aspxhome.com/file/2023/0/129800_0s.jpg)
Python利用多线程枚举实现获取wifi信息
2021-12-05 03:58:12
用Dreamweaver设计Wordpress留言板教程(一)
2010-03-17 15:44:00
![](https://img.aspxhome.com/file/UploadPic/20103/19/201031995050152s.gif)
mpvue跳转页面及注意事项
2024-05-02 16:09:57
![](https://img.aspxhome.com/file/2023/2/132902_0s.png)
python版DDOS攻击脚本
2022-08-29 04:16:25
Python 字符串与数字输出方法
2021-09-01 09:01:59
如何安装控制器JavaScript生成插件详解
2024-04-10 10:51:51
![](https://img.aspxhome.com/file/2023/1/136891_0s.png)
简单了解django文件下载方式
2022-10-31 08:48:32
使用正则表达式找出不包含特定字符串的条目
2010-03-02 22:06:00
![](https://img.aspxhome.com/file/UploadPic/20103/2/image_thumb-80s.png)