go-course/go18
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

补充async await

Browse Source
This commit is contained in:
yumaojun03 2025-07-20 14:48:17 +08:00
parent 42bb490180
commit 066b9f7ad2
2 changed files with 126 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
skills/javascript/async.drawio Normal file
View File

@ -0,0 +1,57 @@
<mxfile host="65bd71144e">
<diagram id="0WS3t2Fnvb50-m555Ywn" name="第 1 页">
<mxGraphModel dx="1176" dy="389" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="827" pageHeight="1169" math="0" shadow="0">
<root>
<mxCell id="0"/>
<mxCell id="1" parent="0"/>
<mxCell id="2" value="事件触发器" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
<mxGeometry x="180" y="70" width="40" height="410" as="geometry"/>
</mxCell>
<mxCell id="3" value="fna" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
<mxGeometry x="240" y="90" width="120" height="50" as="geometry"/>
</mxCell>
<mxCell id="4" value="fnb" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
<mxGeometry x="360" y="120" width="120" height="50" as="geometry"/>
</mxCell>
<mxCell id="5" value="fnc" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
<mxGeometry x="480" y="140" width="120" height="50" as="geometry"/>
</mxCell>
<mxCell id="6" value="fnd" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
<mxGeometry x="600" y="160" width="120" height="50" as="geometry"/>
</mxCell>
<mxCell id="7" value="async fna" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
<mxGeometry x="280" y="270" width="120" height="50" as="geometry"/>
</mxCell>
<mxCell id="8" value="async fnb" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
<mxGeometry x="280" y="350" width="120" height="50" as="geometry"/>
</mxCell>
<mxCell id="9" value="async fnc" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
<mxGeometry x="280" y="430" width="120" height="50" as="geometry"/>
</mxCell>
<mxCell id="10" value="async fnd" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
<mxGeometry x="280" y="510" width="120" height="50" as="geometry"/>
</mxCell>
<mxCell id="13" style="edgeStyle=none;html=1;exitX=0;exitY=0.5;exitDx=0;exitDy=0;entryX=1;entryY=1;entryDx=0;entryDy=0;" edge="1" parent="1" source="11" target="7">
<mxGeometry relative="1" as="geometry"/>
</mxCell>
<mxCell id="16" value="await" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];" vertex="1" connectable="0" parent="13">
<mxGeometry x="0.3011" y="1" relative="1" as="geometry">
<mxPoint as="offset"/>
</mxGeometry>
</mxCell>
<mxCell id="15" style="edgeStyle=none;html=1;exitX=0;exitY=0.75;exitDx=0;exitDy=0;entryX=1;entryY=1;entryDx=0;entryDy=0;" edge="1" parent="1" source="11" target="8">
<mxGeometry relative="1" as="geometry"/>
</mxCell>
<mxCell id="11" value="excutor(&lt;div&gt;aysnc executor)&lt;/div&gt;" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
<mxGeometry x="590" y="270" width="120" height="290" as="geometry"/>
</mxCell>
<mxCell id="12" style="edgeStyle=none;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0.017;entryY=0.31;entryDx=0;entryDy=0;entryPerimeter=0;" edge="1" parent="1" source="7" target="11">
<mxGeometry relative="1" as="geometry"/>
</mxCell>
<mxCell id="14" style="edgeStyle=none;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=-0.025;entryY=0.652;entryDx=0;entryDy=0;entryPerimeter=0;" edge="1" parent="1" source="8" target="11">
<mxGeometry relative="1" as="geometry"/>
</mxCell>
</root>
</mxGraphModel>
</diagram>
</mxfile>

69
skills/javascript/promise.js Normal file
View File

@ -0,0 +1,69 @@
function testApiCall(success, failed) {
var timeOut = Math.random() * 2;
console.log('set timeout to: ' + timeOut + ' seconds.');
setTimeout(function () {
if (timeOut < 1) {
console.log('call resolve()...');
success('200 OK');
}
else {
console.log('call reject()...');
failed('timeout in ' + timeOut + ' seconds.');
}
}, timeOut * 1000);
}
// 通过回调实现的异步方案
// fna()
// fnb()
// fnc()
console.log('start ...')
testApiCall(
// success callback
(data) => {
console.log(data)
},
// failed callback
(error) => {
console.log(error)
}
)
console.log('end ...')
// fna(fnb_sucess(fnc_success(fnd_success)), fnb_error(fnc_error(fnd_error)))
// promise 封装技术, 他让异步成为一种标准, 使用promise的标准方式来处理异常
// promise 像一个接口，他约束了 excutor对象的 实现方式
var p1 = new Promise(testApiCall)
// p1.then((data) => {
// console.log(data)
// // p2.then().catch().finally()
// }).catch((error) => {
// console.log(error)
// }).finally(() => {
// console.log('finnal')
// })
// 异步等待
// 一同步编程的方式，来实现异步代码
var async_await = async () => {
try {
const resp = await p1
console.log(resp)
// const res2 = await p2
// console.log(resp2)
// const res3 = await p3
// console.log(resp2)
} catch (error) {
console.log(error)
}
}
async_await()