1、promise鏈?zhǔn)秸{(diào)用

/*** 目標(biāo)：把回調(diào)函數(shù)嵌套代碼，改成Promise鏈?zhǔn)秸{(diào)用結(jié)構(gòu)* 需求：獲取默認(rèn)第一個(gè)省，第一個(gè)市，第一個(gè)地區(qū)并展示在下拉菜單中*/let pname = ''axios({url: 'http://hmajax.itheima.net/api/province',}).then(result => {pname = result.data.list[0]document.querySelector('.province').innerHTML = pname// then方法返回一個(gè)promise對(duì)象 此對(duì)象調(diào)用then中的result為此處返回的結(jié)果return axios({ url: 'http://hmajax.itheima.net/api/city', params: { pname } })}).then(result => {const cname = result.data.list[0]document.querySelector('.city').innerHTML = cnamereturn axios({ url: 'http://hmajax.itheima.net/api/area', params: { pname, cname } })}).then(result => {// 此處result為上面請(qǐng)求返回的promise對(duì)象console.log(result)})// let pname = ''// // 1. 得到-獲取省份Promise對(duì)象// axios({url: 'http://hmajax.itheima.net/api/province'}).then(result => {//   pname = result.data.list[0]//   document.querySelector('.province').innerHTML = pname//   // 2. 得到-獲取城市Promise對(duì)象//   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對(duì)象//   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// })

2、事件循環(huán)
異步代碼交由指定的線程處理, 處理完畢后推入任務(wù)隊(duì)列, 當(dāng)主線程空閑時(shí)就會(huì)循環(huán)從任務(wù)隊(duì)列中取出異步代碼執(zhí)行
3、宏任務(wù)和微任務(wù)
promise本身是同步的，而then和catch回調(diào)函數(shù)是異步的

例題：

答案：1 7 5 6 2 3 4

調(diào)用棧空閑時(shí)，優(yōu)先清空微任務(wù)隊(duì)列中的回調(diào)

4、promise.all 靜態(tài)方法
什么時(shí)候使用：想合并多個(gè)promise對(duì)象，同時(shí)等待大家都成功的結(jié)果，然后做后續(xù)處理的場(chǎng)景

  <script>/*** 目標(biāo)：掌握Promise的all方法作用，和使用場(chǎng)景* 業(yè)務(wù)：當(dāng)我需要同一時(shí)間顯示多個(gè)請(qǐng)求的結(jié)果時(shí)，就要把多請(qǐng)求合并* 例如：默認(rèn)顯示"北京", "上海", "廣州", "深圳"的天氣在首頁查看* code：* 北京-110100* 上海-310100* 廣州-440100* 深圳-440300*/// 1. 請(qǐng)求城市天氣，得到Promise對(duì)象const bjPromise = axios({ url: 'http://hmajax.itheima.net/api/weather', params: { city: '110100' } })const shPromise = axios({ url: 'http://hmajax.itheima.net/api/weather', params: { city: '310100' } })const gzPromise = axios({ url: 'http://hmajax.itheima.net/api/weather', params: { city: '440100' } })const szPromise = axios({ url: 'http://hmajax.itheima.net/api/weather', params: { city: '440300' } })// 2. 使用Promise.all，合并多個(gè)Promise對(duì)象const p = Promise.all([bjPromise, shPromise, gzPromise, szPromise])p.then(result => {// 注意：結(jié)果數(shù)組順序和合并時(shí)順序是一致console.log(result)const htmlStr = result.map(item => {return `<li>${item.data.data.area} --- ${item.data.data.weather}</li>`}).join('')document.querySelector('.my-ul').innerHTML = htmlStr}).catch(error => {console.dir(error)})</script>

5、axios返回的是一個(gè)promise對(duì)象，axios.then方法也返回一個(gè)新promise對(duì)象

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script>const p = axios({url: 'http://hmajax.itheima.net/api/weather',params: { city: '110100' }})console.log(typeof p)const p2 = p.then(result => {console.log(result)})console.log(p2 === p)console.log(typeof p === typeof p2)</script>

6、案例：
需求：同時(shí)展示數(shù)據(jù)

返回的是一個(gè)個(gè)promise對(duì)象組成的數(shù)組
${}中放一個(gè)表達(dá)式，map函數(shù)調(diào)用也是一個(gè)表達(dá)式
在模板字符串中如何體現(xiàn)循環(huán)操作

<script>//一級(jí) 二級(jí) 及所有商品要一起展示axios({url: 'http://hmajax.itheima.net/api/category/top'}).then(result => {// console.log(result)const arr = result.data.dataconst pArr = arr.map(item => {return axios({url: 'http://hmajax.itheima.net/api/category/sub',params: {id: item.id}})})//返回一個(gè)promise對(duì)象組成的數(shù)組const p = Promise.all(pArr)p.then(result => {// console.log(result)document.querySelector('.sub-list').innerHTML = result.map(item => {const itemData = item.data.dataconst children = itemData.children// console.log(children)return `<div class="item"><h3>${itemData.name}</h3><ul>${children.map(item => {return `<li><a href="javascript:;"><img src=${item.picture}><p>${item.name}</p></a></li>`}).join('')}</ul></div>`}).join('')})})// /**//  * 目標(biāo)：把所有商品分類“同時(shí)”渲染到頁面上//  *  1. 獲取所有一級(jí)分類數(shù)據(jù)//  *  2. 遍歷id，創(chuàng)建獲取二級(jí)分類請(qǐng)求//  *  3. 合并所有二級(jí)分類Promise對(duì)象//  *  4. 等待同時(shí)成功后，渲染頁面// */// // 1. 獲取所有一級(jí)分類數(shù)據(jù)// axios({//   url: 'http://hmajax.itheima.net/api/category/top'// }).then(result => {//   console.log(result)//   // 2. 遍歷id，創(chuàng)建獲取二級(jí)分類請(qǐng)求//   const secPromiseList = result.data.data.map(item => {//     return axios({//       url: 'http://hmajax.itheima.net/api/category/sub',//       params: {//         id: item.id // 一級(jí)分類id//       }//     })//   })//   console.log(secPromiseList) // [二級(jí)分類請(qǐng)求Promise對(duì)象，二級(jí)分類請(qǐng)求Promise對(duì)象，...]//   // 3. 合并所有二級(jí)分類Promise對(duì)象//   const p = Promise.all(secPromiseList)//   p.then(result => {//     console.log(result)//     // 4. 等待同時(shí)成功后，渲染頁面//     const htmlStr = result.map(item => {//       const dataObj = item.data.data // 取出關(guān)鍵數(shù)據(jù)對(duì)象//       return `<div class="item">//     <h3>${dataObj.name}</h3>//     <ul>//       ${dataObj.children.map(item => {//         return `<li>//         <a href="javascript:;">//           <img src="${item.picture}">//           <p>${item.name}</p>//         </a>//       </li>`//       }).join('')}//     </ul>//   </div>`//     }).join('')//     console.log(htmlStr)//     document.querySelector('.sub-list').innerHTML = htmlStr//   })// })</script>