HTML/Html-Javascript/34-异步代码同步化async await.html
2023-05-01 19:37:40 +08:00

75 lines
2.0 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 异步代码同步化
// 函数体内 无异步 (只正对于 返回Promise的对象)
// 将异步api封装成Promise对象
function func() { // 正常 异常
return new Promise((resolve, reject) => {
setTimeout(() => {
let data = { n: "想不到吧, 我三秒后才出现, 你们抓不到我的" }
if (Math.random() > 0.5) {
resolve(((data)));
} else {
reject("完蛋了, bbq");
}
}, 1000);
});
}
// 函数体内 无异步 async await
// 00- 基本
// async 加在要将函数体内无异步的函数最前面
// (async () => {
// // await 加在Promise对象之前
// let data = await func(); // 异步1
// console.log(data);
// let data1 = await func(); // 异步2
// let data2 = await func(); // 异步3
// })();
// 01- 进阶
// 如果其中一个异步挂了, 函数直接不执行了
(async function () {
try {
let data = await func(); // 异步1
console.log(data);
} catch (e) {
console.log(e);
}
try {
let data1 = await func(); // 异步2
console.log(data1);
} catch (error) {
console.log(error);
}
try {
let data2 = await func(); // 异步3
console.log(data2);
} catch (error) {
console.log(error);
}
})();
</script>
</body>
</html>