JS中的async与await怎么使⽤
⽬录
⼀、async
⼆、await:
await和async使用方法
三、综合应⽤
⼀、async
async创建⼀个异步函数来定义⼀个代码块，在其中运⾏异步代码;
怎样变成异步函数呢？以async 这个关键字开始，它可以被放置在⼀个函数前⾯
async function f() {
return 1;
}
f().then(alert); // 1
//上下结果⼀样
async function f() {
solve(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 = ateObjectURL(myBlob);
let image = ateElement('img');
image.src = objectURL;
document.body.appendChild(image);
}
A()
.catch(e => {
console.log('问题: ' + e.message);
});
⽤更少的.then()块来封装代码，同时它看起来很像同步代码，所以它⾮常直观。这样⽤的很爽！
到此这篇关于JS的async/await怎么使⽤的⽂章就介绍到这了，更多相关JS的async/await ⽤法内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。