Promise async await 總結(jié)

Promise

new Promise((resolve, reject) => {
    var param = 'Promise 執(zhí)行完后返回的數(shù)據(jù)';
    var error = 'Promise 異步執(zhí)行異常';
    if( error ) {
        reject(new Error('Promise 異步執(zhí)行異常'));
    } else {
        resolve(param);
    }
}).then((res) => {
//  這里res就是Promise中的param參數(shù)
    console.log(res);  //  Promise 執(zhí)行完后返回的數(shù)據(jù)
    var param = '第一個then 執(zhí)行完后返回的數(shù)據(jù)';
    return param;
}).then((res) => {
//  這里的res就不是Promise中resolve的param參數(shù)了,而是上一個then中的返回值
    console.log(res);  //  第一個then 執(zhí)行完后返回的數(shù)據(jù)
}).catch((error) => {
//  這里是Promise執(zhí)行reject方法中的參數(shù)
    console.log(error); //  Promise 異步執(zhí)行異常
});

第一個then()觸發(fā)條件:是 Promise() 實例化時resolve()觸發(fā)甲脏,resolve(param)

第二個及以后的then() 觸發(fā)條件是第一個then()執(zhí)行完成狰右,并且將return值作為下一個then的參數(shù)两波。

catch()觸發(fā)條件是執(zhí)行了reject()
需要注意的是resolvereject只能執(zhí)行一個埃唯。也就是說如果不加入判斷的話免糕,某一個先執(zhí)行了善镰,后面的就自動忽略了。


async & await

由于剛開始接觸這方面的內(nèi)容谤饭,僅做最簡單的描述标捺,可能存在很多誤區(qū),以后慢慢更正揉抵。

前端經(jīng)常要和異步打交道亡容,過去都是通過回調(diào)函數(shù)來處理異步數(shù)據(jù)。

var res = 0;

setTimeout(function () {
    res = 10;
}, 1000);

console.log(res);

上面是一個很典型的異步方法冤今,其實這段代碼我們想要的結(jié)果是 10闺兢;
但是由于異步的原因,導(dǎo)致結(jié)果還沒有變更戏罢,我們已經(jīng)把原始數(shù)據(jù)打印出來了屋谭。
那么,我們過去可能會通過回調(diào)的辦法來解決這個問題龟糕。
把執(zhí)行打印的代碼放到回調(diào)函數(shù)中桐磁,在回調(diào)中處理數(shù)據(jù)。

var res = 0;

setTimeout(function () {
    res = 10;
    console.log(res);
}, 1000);

雖然這樣不失為解決問題的辦法讲岁,但是實際業(yè)務(wù)中各個異步返回的數(shù)據(jù)中可能互相之間有利用關(guān)系我擂,那么各種嵌套回調(diào)的問題也就隨之而來了。

var res1 = 0, res2 = 0, res3 = 0;

setTimeout(function () {
    res1 = 10;
    setTimeout(function () {
        res2 = 20;
        setTimeout(function () {
            res3 = 30;
            console.log(res1 + res2 + res3);
        }, 1000);
    }, 1000);
}, 1000);

像上面這樣的情況在實際業(yè)務(wù)中很常見缓艳。
我們有3個數(shù)據(jù)接口校摩,最終我們要將3個接口返回的數(shù)據(jù)合并,就只能一層一層的嵌套下去郎任。
那么如果有5個秧耗、10個這樣的接口呢备籽?我想從代碼的閱讀方面就是個災(zāi)難吧舶治。
當然我們可以把請求改為同步的,但是车猬!同步就意味著阻塞霉猛。這里不做討論。
終于到asyncawait 上場了......

;(async ()=> {
    var res1 = await new Promise((resolve, reject)=>{
        setTimeout(()=>{
            resolve(10);
        }, 1000);
    });
    var res2 = await new Promise((resolve, reject) => {
        setTimeout(()=>{
            resolve(20);
        }, 1000);
    });
    var res3 = await new Promise((resolve, reject) => {
        setTimeout(()=>{
            resolve(30);
        }, 1000);
    });
    console.log(res1 + res2 + res3);
})();

同樣的結(jié)果珠闰,但是我們的代碼仿佛變成的同步模式一樣惜浅。再也沒有無限嵌套了!

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末伏嗜,一起剝皮案震驚了整個濱河市坛悉,隨后出現(xiàn)的幾起案子伐厌,更是在濱河造成了極大的恐慌,老刑警劉巖裸影,帶你破解...
    沈念sama閱讀 219,539評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件挣轨,死亡現(xiàn)場離奇詭異,居然都是意外死亡轩猩,警方通過查閱死者的電腦和手機卷扮,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,594評論 3 396
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來均践,“玉大人晤锹,你說我怎么就攤上這事⊥” “怎么了鞭铆?”我有些...
    開封第一講書人閱讀 165,871評論 0 356
  • 文/不壞的土叔 我叫張陵,是天一觀的道長焦影。 經(jīng)常有香客問我衔彻,道長,這世上最難降的妖魔是什么偷办? 我笑而不...
    開封第一講書人閱讀 58,963評論 1 295
  • 正文 為了忘掉前任艰额,我火速辦了婚禮,結(jié)果婚禮上椒涯,老公的妹妹穿的比我還像新娘柄沮。我一直安慰自己,他們只是感情好废岂,可當我...
    茶點故事閱讀 67,984評論 6 393
  • 文/花漫 我一把揭開白布祖搓。 她就那樣靜靜地躺著,像睡著了一般湖苞。 火紅的嫁衣襯著肌膚如雪拯欧。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,763評論 1 307
  • 那天财骨,我揣著相機與錄音镐作,去河邊找鬼。 笑死隆箩,一個胖子當著我的面吹牛该贾,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播捌臊,決...
    沈念sama閱讀 40,468評論 3 420
  • 文/蒼蘭香墨 我猛地睜開眼杨蛋,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起逞力,我...
    開封第一講書人閱讀 39,357評論 0 276
  • 序言:老撾萬榮一對情侶失蹤曙寡,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后寇荧,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體卵皂,經(jīng)...
    沈念sama閱讀 45,850評論 1 317
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,002評論 3 338
  • 正文 我和宋清朗相戀三年砚亭,在試婚紗的時候發(fā)現(xiàn)自己被綠了灯变。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,144評論 1 351
  • 序言:一個原本活蹦亂跳的男人離奇死亡捅膘,死狀恐怖添祸,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情寻仗,我是刑警寧澤刃泌,帶...
    沈念sama閱讀 35,823評論 5 346
  • 正文 年R本政府宣布,位于F島的核電站署尤,受9級特大地震影響耙替,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜曹体,卻給世界環(huán)境...
    茶點故事閱讀 41,483評論 3 331
  • 文/蒙蒙 一俗扇、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧箕别,春花似錦铜幽、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,026評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至母截,卻和暖如春到忽,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背清寇。 一陣腳步聲響...
    開封第一講書人閱讀 33,150評論 1 272
  • 我被黑心中介騙來泰國打工喘漏, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人颗管。 一個月前我還...
    沈念sama閱讀 48,415評論 3 373
  • 正文 我出身青樓陷遮,卻偏偏與公主長得像,于是被迫代替她去往敵國和親垦江。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 45,092評論 2 355

推薦閱讀更多精彩內(nèi)容

  • title: promise總結(jié) 總結(jié)在前 前言 下文類似 Promise#then、Promise#resolv...
    JyLie閱讀 12,252評論 1 21
  • 本文適用的讀者 本文寫給有一定Promise使用經(jīng)驗的人比吭,如果你還沒有使用過Promise绽族,這篇文章可能不適合你,...
    HZ充電大喵閱讀 7,311評論 6 19
  • Promise 對象 Promise 的含義 Promise 是異步編程的一種解決方案衩藤,比傳統(tǒng)的解決方案——回調(diào)函...
    neromous閱讀 8,707評論 1 56
  • 一吧慢、Promise的含義 Promise在JavaScript語言中早有實現(xiàn),ES6將其寫進了語言標準赏表,統(tǒng)一了用法...
    Alex灌湯貓閱讀 826評論 0 2
  • 簡單介紹下這幾個的關(guān)系為方便起見 用以下代碼為例簡單介紹下這幾個東西的關(guān)系检诗, async 在函數(shù)聲明前使用asyn...
    _我和你一樣閱讀 21,228評論 1 24