?2016-2026 Matools All rights reserved,
粵ICP備17059708號
下面代碼打印結(jié)果是？
setTimeout(()=>{ console.log(1) }) new Promise((resolve,reject)=>{
console.log(2) resolve() }) .then(()=>{ console.log(3) }) new
Promise((resolve,reject)=>{ console.log(4) resolve() }) .then(()=>{
console.log(5) }) setTimeout(()=>{ console.log(6) }) console.log(7) /* 2 4 7 3
5 1 6 */
解析這道題之前我們先了解幾個知識點~~~~
數(shù)據(jù)加載方案
* 同步加載
* 異步加載 : 事件 , 定時器 , ajax
js單線程語言
為什么是單線程語言?
dom操作
* 如果js是多線程語言,第一個線程執(zhí)行把dom對象刪除,另一個線程執(zhí)行把dom對象添加
同步代碼異步代碼加載順序 : event loop (事件循環(huán))
* 先執(zhí)行同步代碼,異步任務(wù)掛起 setTimeout(function(){ console.log(1); },0) console.log(2);
//執(zhí)行結(jié)果 : 2 , 1 -->先執(zhí)行console,log(2) setTimeout異步掛起
宏任務(wù)和微任務(wù)
*
宏任務(wù)一般是：包括整體代碼script，setTimeout，setInterval。
*
微任務(wù)：Promise，process.nextTick。
宏任務(wù)的異步 和微任務(wù)的異步同時都有 優(yōu)先執(zhí)行 微任務(wù)
了解了這些知識，我們回到第一題
1、首先：promise 的創(chuàng)建是同步的，then、catch是異步，所以先執(zhí)行同步打印出2 4 7 2、異步的 1、3、5、6，進(jìn)入事件隊列。
3、setTimeout 為宏任務(wù)，promise為微任務(wù)，先執(zhí)行微任務(wù)，所以3、5先被打印出來，1、6后被打印出來
promise 承諾 是一個對象
異步代碼同步執(zhí)行
1.三個狀態(tài) : pending (進(jìn)行時) resolve (成功狀態(tài)), reject(失敗的狀態(tài)).
2.使用時 需要實例化 new Promise()
3.Promise() 參數(shù)是一個回調(diào)函數(shù)
4.在回調(diào)函數(shù)中有兩個參數(shù)
? resolve reject
5.promise返回值為promise
6.promise的方法
* .then() 兩個參數(shù) 都是回調(diào)函數(shù) 如果promise 執(zhí)行resolve方法 執(zhí)行為.then里面第一個回調(diào) 如果promise
執(zhí)行reject方法 執(zhí)行為.then里面第二個回調(diào)
* .catch() 當(dāng)promise執(zhí)行了reject方法的時候 執(zhí)行的是.catch里面的回調(diào)
* .all()
* .race()
異步
js是單線程，防止被堵塞 node中將所有i/o變成異步
異步的過多嵌套會造成回調(diào)地獄
promise的鏈?zhǔn)秸{(diào)用可以解決回調(diào)地獄
async
* 可以修飾一個函數(shù)，被修飾的函數(shù)返回promise對象
* async 返回值可有也可以沒有，返回的是返回的數(shù)據(jù)就是then 接收的數(shù)據(jù)，不返回數(shù)據(jù)相當(dāng)于undefined async function
text(){ return true } text() .then((data)=>{ console.log("ok") })
.catch((err)=>{ console.log("err") })
await
* 在async函數(shù)內(nèi)部使用，將promise變成同步
* await關(guān)鍵字后面跟Promise對象 //求和操作 function num1(){ return new
Promise((resolve,reject)=>{ setTimeout(()=>{ resolve(1) },1000) }) } function
num2(){ return new Promise((resolve,reject)=>{ setTimeout(()=>{ resolve(2)
},500) }) } async function sum(){ let res1=await num1() let res2=await num2()
reyturn res1 + res2 } sum() .then((data)=>{ console.log(data) })
*
使用async函數(shù)可以讓代碼簡潔很多，不需要像Promise一樣需要些then，不需要寫匿名函數(shù)處理Promise的resolve值，也不需要定義多余的data變量，還避免了嵌套代碼。
熱門工具 換一換