Promise & await/async 事件循環(huán)

Promise

同步和異步:

同步:一件事做完了才到另一件事(與現(xiàn)實(shí)中的同步相反)

異步:在做一件事請(qǐng)枝恋,這件事還沒(méi)做完就開(kāi)始做另一件事(有一段時(shí)間同時(shí)做兩件事)

異步是非阻塞的创倔,異步邏輯與主邏輯相互獨(dú)立,主邏輯不需要等待異步邏輯完成焚碌,而是可以立即繼續(xù)下去畦攘。怎么理解呢?就是可能有一件事卡住了做不了十电,但是不影響其他事情繼續(xù)下去知押。

所謂 Promise,就是一個(gè)對(duì)象鹃骂,用來(lái)傳遞異步操作的消息台盯。它代表了某個(gè)未來(lái)才會(huì)知道結(jié)果的事件(通常是一個(gè)異步操作),并且這個(gè)事件提供統(tǒng)一的 API畏线,可供進(jìn)一步處理静盅。

new Promise((resolve,reject) => {
    setTimeout(()=>{
        resolve("異步請(qǐng)求成功的數(shù)據(jù)");   //如果請(qǐng)求成功則把參數(shù)傳遞給then
        reject("異步請(qǐng)求失敗了");      //如果請(qǐng)求失敗則把參數(shù)傳遞給catch
    },1000)})
    .then((data) => {               //接收傳輸?shù)臄?shù)據(jù)
        console.log(data);          //處理數(shù)據(jù)
    })
    .catch((err) => {               //接收請(qǐng)求失敗的數(shù)據(jù)
        console.log(err);           //處理
    })
    .finally((all) => {
        console.log(all);
    })
Promise執(zhí)行過(guò)程

.then返回的是一個(gè)promise實(shí)例,所以可以進(jìn)行鏈?zhǔn)秸{(diào)用寝殴。

Promise.all

可以將多個(gè)Promise實(shí)例包裝成一個(gè)新的Promise實(shí)例蒿叠。同時(shí),成功和失敗返回值是不同的蚣常,全部成功時(shí)返回的是結(jié)果數(shù)組市咽,有一個(gè)失敗則返回最先失敗的的promise結(jié)果。

Promise.all([p1,p2,p3...]).then(...)

Promise.all([
    new Promise((resolve,reject)=>{
        setTimeout(()=>{
            resolve("第一個(gè)請(qǐng)求");
        },1000)
    }),
    new Promise((resolve,reject)=>{
        setTimeout(()=>{
            resolve("第二個(gè)請(qǐng)求");
        },2000)
    })
]).then((result)=>{
    console.log(result[0]);
    console.log(result[1]);
})

Promise.race

顧名思義race就是賽跑的意思抵蚊,跟Promise.all差不多施绎,只不過(guò)是就返回那個(gè)最先完成的結(jié)果溯革,不管那個(gè)結(jié)果是成功還是失敗。

Async / await

也是用來(lái)處理異步谷醉,其實(shí)是Generator函數(shù)的改進(jìn)致稀,背后原理就是Promise

async
async function f1(){
    return "abc"
}
/*
async 自動(dòng)包裝成Promise對(duì)象,等價(jià)于
function f1(){
    return new Promise((resolve) => {resolve("abc")})
}
*/

await

await只能放在async函數(shù)里面

async function f1(){
    return new Promise((resolve,reject) => {resolve("f1")})
}

async function f3(){
    try {
        var c = await f1();//下面的代碼阻塞孤紧,只有await完了才能繼續(xù)執(zhí)行
        console.log(c);
    } catch (error) {
        console.log("error");//如果f1是reject豺裆,必須使用trycatch才能繼續(xù)執(zhí)行下面的代碼哦。
    }finally{
    }
    console.log("執(zhí)行完了");
}

宏任務(wù)和微任務(wù)

宏任務(wù):script的整體代碼号显,setTimeout臭猜,setInterval,setImmediate

微任務(wù):promise.then押蚤,process.nextTick

js 是單線程執(zhí)行的蔑歌,js中的任務(wù)按順序一個(gè)一個(gè)的執(zhí)行,但是一個(gè)任務(wù)耗時(shí)太長(zhǎng)揽碘;
那么后面的任務(wù)就需要等待次屠,為了解決這種情況,將任務(wù)分為了同步任務(wù)和異步任務(wù)雳刺;
而異步任務(wù)又可以分為微任務(wù)和宏任務(wù)劫灶。

script代碼塊就是一個(gè)宏任務(wù),執(zhí)行一個(gè)宏任務(wù)掖桦,先執(zhí)行同步代碼本昏,遇到異步代碼(promise,setTimeout等)會(huì)讓他們進(jìn)行排隊(duì)枪汪,分別排兩條隊(duì)涌穆。一條是宏任務(wù)S,一條是微任務(wù)P雀久。執(zhí)行完同步任務(wù)后執(zhí)行微任務(wù)宿稀,同樣同步任務(wù)立即執(zhí)行,遇到異步任務(wù)進(jìn)行排隊(duì)赖捌。把全部微任務(wù)執(zhí)行完就執(zhí)行宏任務(wù)祝沸,宏任務(wù)執(zhí)行完一個(gè)就會(huì)去清理微任務(wù)隊(duì)列,所以在宏任務(wù)里面的微任務(wù)會(huì)比外面的宏任務(wù)先執(zhí)行越庇。

圖解:

事件循環(huán)過(guò)程

舉個(gè)栗子:

例子
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末奋隶,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子悦荒,更是在濱河造成了極大的恐慌,老刑警劉巖嘹吨,帶你破解...
    沈念sama閱讀 217,826評(píng)論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件搬味,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)碰纬,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,968評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門萍聊,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人悦析,你說(shuō)我怎么就攤上這事寿桨。” “怎么了强戴?”我有些...
    開(kāi)封第一講書人閱讀 164,234評(píng)論 0 354
  • 文/不壞的土叔 我叫張陵亭螟,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我骑歹,道長(zhǎng)预烙,這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書人閱讀 58,562評(píng)論 1 293
  • 正文 為了忘掉前任道媚,我火速辦了婚禮扁掸,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘挠蛉。我一直安慰自己脉漏,他們只是感情好箫柳,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,611評(píng)論 6 392
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著牺蹄,像睡著了一般。 火紅的嫁衣襯著肌膚如雪狗热。 梳的紋絲不亂的頭發(fā)上钞馁,一...
    開(kāi)封第一講書人閱讀 51,482評(píng)論 1 302
  • 那天,我揣著相機(jī)與錄音匿刮,去河邊找鬼僧凰。 笑死,一個(gè)胖子當(dāng)著我的面吹牛熟丸,可吹牛的內(nèi)容都是我干的训措。 我是一名探鬼主播,決...
    沈念sama閱讀 40,271評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼光羞,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼绩鸣!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起纱兑,我...
    開(kāi)封第一講書人閱讀 39,166評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤呀闻,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后潜慎,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體捡多,經(jīng)...
    沈念sama閱讀 45,608評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡蓖康,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,814評(píng)論 3 336
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了垒手。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片蒜焊。...
    茶點(diǎn)故事閱讀 39,926評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖科贬,靈堂內(nèi)的尸體忽然破棺而出泳梆,到底是詐尸還是另有隱情,我是刑警寧澤榜掌,帶...
    沈念sama閱讀 35,644評(píng)論 5 346
  • 正文 年R本政府宣布优妙,位于F島的核電站,受9級(jí)特大地震影響唐责,放射性物質(zhì)發(fā)生泄漏鳞溉。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,249評(píng)論 3 329
  • 文/蒙蒙 一鼠哥、第九天 我趴在偏房一處隱蔽的房頂上張望熟菲。 院中可真熱鬧,春花似錦朴恳、人聲如沸抄罕。這莊子的主人今日做“春日...
    開(kāi)封第一講書人閱讀 31,866評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)呆贿。三九已至,卻和暖如春森渐,著一層夾襖步出監(jiān)牢的瞬間做入,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書人閱讀 32,991評(píng)論 1 269
  • 我被黑心中介騙來(lái)泰國(guó)打工同衣, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留竟块,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 48,063評(píng)論 3 370
  • 正文 我出身青樓耐齐,卻偏偏與公主長(zhǎng)得像浪秘,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子埠况,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,871評(píng)論 2 354