75 lines
2.0 KiB
HTML
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>
|