說明
ES6 從入門到精通系列（全23講）學習筆記。
解決回調地獄
比如有個需求，需要通過接口
https://v0.yiketianqi.com/api?unescape=1&version=v91&appid=43656176&appsecret=I42og6Lm&ext=&cityid=&city=
先擷取北京的天氣，然後擷取上海的，最後擷取廣州的。
<!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>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>
<body>
<script>.ajax({
url: "https://v0.yiketianqi.com/api?unescape=1&version=v91&appid=43656176&appsecret=I42og6Lm&ext=&cityid=&city=北京",
method: "get",
success(res) {
console.log("res", res);
$.ajax({
url: "https://v0.yiketianqi.com/api?unescape=1&version=v91&appid=43656176&appsecret=I42og6Lm&ext=&cityid=&city=上海",
method: "get",
success(res1) {
console.log("res1", res1);
$.ajax({
url: "https://v0.yiketianqi.com/api?unescape=1&version=v91&appid=43656176&appsecret=I42og6Lm&ext=&cityid=&city=廣州",
method: "get",
success(res2) {
console.log("res2", res2);
// ...
}
})
}
})
}
})</script>
</body>
</html> 
上面就是回調地獄的展示，下面使用 Generator 處理，Generator 能讓異步代碼同步化
<!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>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>
<body>
<script>function* main() {
let res = yield getData("北京");
console.log("res", res);
let res1 = yield getData("上海");
console.log("res1", res1);
let res2 = yield getData("廣州");
console.log("res2", res2);
}
const ite = main();
ite.next();
function getData(city) {
$.ajax({
url: `https://v0.yiketianqi.com/api?unescape=1&version=v91&appid=43656176&appsecret=I42og6Lm&ext=&cityid=&city=${city}`,
method: "get",
success(res) {
ite.next(res);
}
})
}</script>
</body>
</html> 
其他例子：加載效果的異步
function loadUI() {
console.log("加載----loading")
}
function getData() {
setTimeout(() => {
console.log("擷取資料----data")
}, 1000)
}
function hideUI() {
console.log("隐藏----loading")
}
loadUI();
getData();
hideUI(); function* loadMain() {
loadUI();
yield getData();
hideUI();
}
function loadUI() {
console.log("加載----loading")
}
function getData() {
setTimeout(() => {
console.log("擷取資料----data")
ite.next();
}, 1000)
}
function hideUI() {
console.log("隐藏----loading")
}
const ite = loadMain();
ite.next();