?(創(chuàng)作不易，感謝有你，你的支持，就是我前行的最大動力，如果看完對你有幫助，請留下您的足跡）
目錄
同步代碼和異步代碼
回調(diào)函數(shù)地獄 ?
Promise - 鏈式調(diào)用 ?
Promise 鏈式應用
async函數(shù)和await
async函數(shù)和await_捕獲錯誤
事件循環(huán)-EventLoop ?
認識 - 事件循環(huán)（EventLoop）
事件循環(huán) - 執(zhí)行過程
總結?
宏任務與微任務
宏任務與微任務 - 執(zhí)行順序?
同步代碼和異步代碼
同步代碼：
異步代碼：
同步代碼： 逐行 執(zhí)行，需 原地等待 結果 后，才繼續(xù)向下執(zhí)行異步代碼：調(diào)用后 耗時 ，不阻塞代碼繼續(xù)執(zhí)行（不必原地等待），在 將來 完成后觸發(fā)一個 回調(diào)函數(shù)
回調(diào)函數(shù)地獄 ?
需求：展示默認第一個省，第一個城市，第一個地區(qū)在下拉菜單中概念：在回調(diào)函數(shù)中 嵌套回調(diào)函數(shù) ，一直嵌套下去就形成了回調(diào)函數(shù)地獄缺點：可讀性差，異常無法捕獲，耦合性嚴重，牽一發(fā)動全身
<body>
<form>
<span>省份：</span>
<select>
<option class="province"></option>
</select>
<span>城市：</span>
<select>
<option class="city"></option>
</select>
<span>地區(qū)：</span>
<select>
<option class="area"></option>
</select>
</form>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
/**
* 目標：演示回調(diào)函數(shù)地獄
* 需求：獲取默認第一個省，第一個市，第一個地區(qū)并展示在下拉菜單中
* 概念：在回調(diào)函數(shù)中嵌套回調(diào)函數(shù)，一直嵌套下去就形成了回調(diào)函數(shù)地獄
* 缺點：可讀性差，異常無法獲取，耦合性嚴重，牽一發(fā)動全身
*/
// 1. 獲取默認第一個省份的名字
axios({url: 'http://hmajax.itheima.net/api/province'}).then(result => {
const pname = result.data.list[0]
document.querySelector('.province').innerHTML = pname
// 2. 獲取默認第一個城市的名字
axios({url: 'http://hmajax.itheima.net/api/city', params: { pname }}).then(result => {
const cname = result.data.list[0]
document.querySelector('.city').innerHTML = cname
// 3. 獲取默認第一個地區(qū)的名字
axios({url: 'http://hmajax.itheima.net/api/area', params: { pname, cname }}).then(result => {
console.log(result)
const areaName = result.data.list[0]
document.querySelector('.area').innerHTML = areaName
})
})
}).catch(error => {
console.dir(error)
})
</script>
</body>Promise - 鏈式調(diào)用 ?
概念：依靠 then() 方法會返回一個 新生成的 Promise 對象 特性，繼續(xù)串聯(lián)下一環(huán)任務，直到結束細節(jié)：then() 回調(diào)函數(shù)中的 返回值 ，會影響新生成的 Promise 對象 最終狀態(tài)和結果好處：通過鏈式調(diào)用，解決回調(diào)函數(shù)嵌套問題
<body>
<script>
/**
* 目標：掌握Promise的鏈式調(diào)用
* 需求：把省市的嵌套結構，改成鏈式調(diào)用的線性結構
*/
// 1. 創(chuàng)建Promise對象-模擬請求省份名字
const p = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('北京市')
}, 2000)
})
// 2. 獲取省份名字
const p2 = p.then(result => {
console.log(result)
// 3. 創(chuàng)建Promise對象-模擬請求城市名字
// return Promise對象最終狀態(tài)和結果，影響到新的Promise對象
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(result + '--- 北京')
}, 2000)
})
})
// 4. 獲取城市名字
p2.then(result => {
console.log(result)
})
// then()原地的結果是一個新的Promise對象
console.log(p2 === p)
</script>
</body>Promise 鏈式應用
目標：使用 Promise 鏈式調(diào)用，解決回調(diào)函數(shù)地獄問題
做法：每個 Promise 對象中管理一個異步任務，用 then 返回 Promise 對象，串聯(lián)起來
<body>
<form>
<span>省份：</span>
<select>
<option class="province"></option>
</select>
<span>城市：</span>
<select>
<option class="city"></option>
</select>
<span>地區(qū)：</span>
<select>
<option class="area"></option>
</select>
</form>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
/**
* 目標：把回調(diào)函數(shù)嵌套代碼，改成Promise鏈式調(diào)用結構
* 需求：獲取默認第一個省，第一個市，第一個地區(qū)并展示在下拉菜單中
*/
let pname = ''
// 1. 得到-獲取省份Promise對象
axios({url: 'http://hmajax.itheima.net/api/province'}).then(result => {
pname = result.data.list[0]
document.querySelector('.province').innerHTML = pname
// 2. 得到-獲取城市Promise對象
return axios({url: 'http://hmajax.itheima.net/api/city', params: { pname }})
}).then(result => {
const cname = result.data.list[0]
document.querySelector('.city').innerHTML = cname
// 3. 得到-獲取地區(qū)Promise對象
return axios({url: 'http://hmajax.itheima.net/api/area', params: { pname, cname }})
}).then(result => {
console.log(result)
const areaName = result.data.list[0]
document.querySelector('.area').innerHTML = areaName
})
</script>
</body>
async函數(shù)和await
定義：
概念： 在 async 函數(shù)內(nèi)，使用 await 關鍵字取代 then 函數(shù)，等待獲取 Promise 對象成功狀態(tài)的結果值
<body>
<form>
<span>省份：</span>
<select>
<option class="province"></option>
</select>
<span>城市：</span>
<select>
<option class="city"></option>
</select>
<span>地區(qū)：</span>
<select>
<option class="area"></option>
</select>
</form>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
/**
* 目標：掌握async和await語法，解決回調(diào)函數(shù)地獄
* 概念：在async函數(shù)內(nèi)，使用await關鍵字，獲取Promise對象"成功狀態(tài)"結果值
* 注意：await必須用在async修飾的函數(shù)內(nèi)（await會阻止"異步函數(shù)內(nèi)"代碼繼續(xù)執(zhí)行，原地等待結果）
*/
// 1. 定義async修飾函數(shù)
async function getData() {
// 2. await等待Promise對象成功的結果
const pObj = await axios({url: 'http://hmajax.itheima.net/api/province'})
const pname = pObj.data.list[0]
const cObj = await axios({url: 'http://hmajax.itheima.net/api/city', params: { pname }})
const cname = cObj.data.list[0]
const aObj = await axios({url: 'http://hmajax.itheima.net/api/area', params: { pname, cname }})
const areaName = aObj.data.list[0]
document.querySelector('.province').innerHTML = pname
document.querySelector('.city').innerHTML = cname
document.querySelector('.area').innerHTML = areaName
}
getData()
</script>
</body>async函數(shù)和await_捕獲錯誤
使用：
語法：
事件循環(huán)-EventLoop ?
認識 - 事件循環(huán)（EventLoop）
概念：
原因：JavaScript 單線程（某一刻只能執(zhí)行一行代碼），為了讓耗時代碼不阻塞其他代碼運行，設計了事件循環(huán)模型
事件循環(huán) - 執(zhí)行過程
定義：執(zhí)行代碼和收集異步任務的模型，在調(diào)用?？臻e，反復調(diào)用任務隊列里回調(diào)函數(shù)的執(zhí)行機制，就叫事件循環(huán)
總結?
1. 什么是事件循環(huán)？???????? 執(zhí)行代碼 和收集異步任務，在調(diào)用?？臻e時，反復調(diào)用任務隊列里回調(diào)函數(shù)執(zhí)行機制2. 為什么有事件循環(huán)？????????JavaScript 是單線程的，為了 不阻塞 JS 引擎 ，設計執(zhí)行代碼的模型3. JavaScript 內(nèi)代碼如何執(zhí)行？????????執(zhí)行同步代碼，遇到 異步代碼 交給 宿主 瀏覽器環(huán)境執(zhí)行????????異步有了結果后，把回調(diào)函數(shù)放入 任務隊列排隊????????當調(diào)用棧 空閑 后，反復調(diào)用任務隊列里的回調(diào)函數(shù)
宏任務與微任務
ES6 之后引入了 Promise 對象， 讓 JS 引擎也可以發(fā)起異步任務異步任務分為：???????? 宏任務 ：由 瀏覽器 環(huán)境執(zhí)行的異步代碼???????? 微任務 ：由 JS 引擎 環(huán)境執(zhí)行的異步代碼
Promise 本身是同步的，而then和catch回調(diào)函數(shù)是異步的
宏任務與微任務 - 執(zhí)行順序?
文章來源：http://www.zghlxwxcb.cn/news/detail-600478.html
文章來源地址http://www.zghlxwxcb.cn/news/detail-600478.html
到了這里，關于AJAX-day03-AJAX進階的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
