JS中的async与await怎么使用
更新时间：2021年12月29日 11:23:05 作者：前端老实人
这篇文章主要介绍了JS的async/await怎么使用,简单来说，async/await是基于promises的语法糖，使异步代码更易于编写和阅读,下面来看详细的介绍内容吧。需要的小伙伴也可以参考一下
一、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()块来封装代码，同时它看起来很像同步代码，所以它非常直观。这样用的很爽！
到此这篇关于JS的async/await怎么使用的文章就介绍到这了,更多相关JS的async/await 用法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
ES6为我们在函数的使用上也提供了许多的便捷的东西,下面这篇文章主要给大家介绍了关于ES6学习笔记之let、箭头函数和剩余参数的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2022-09-09
本篇文章主要分享了javascript实现导航栏中英文切换效果的示例代码，具有很好的参考价值，下面跟着小编一起来看下吧2017-01-01
这篇文章主要介绍了elementui的select实现多选添加功能,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-03-03
html+javascript+bootstrap实现层级多选框全层全选和多选功能
想做一个先按层级排序并可以多选的功能，首先倾向于用多层标签式的，直接选定加在文本域里，接下来通过本文给大家介绍html+javascript+bootstrap实现层级多选框全层全选和多选功能，需要的朋友参考下2017-03-03
用JS实现的radio图片选择按钮效果2010-01-01
微信小程序使用scroll-view标签实现自动滑动到底部功能的实例代码
本文通过实例代码给大家介绍了微信小程序使用scroll-view标签实现自动滑动到底部功能，代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧2018-11-11
这篇文章主要介绍了webpack实现一个行内样式px转vw的loader示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了ExpressJS使用express-ws的实例代码,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-09-09
这篇文章主要介绍了JavaScript 九种跨域方式实现原理，什么是跨域，以及有哪几种跨域方式，这是本文要探讨的内容。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-02-02
这篇文章主要给大家介绍了js执行字符串代码的具体实现,需要的朋友可以参考下2024-06-06
最新评论