My promise

Promise是什么般卑?

Promise 是 ES6 中異步編程的一種解決方案爽雄。從語(yǔ)法上講,Promise 是一個(gè)對(duì)象挚瘟,從它可以獲取異步操作的消息;從本意上講本慕,它是承諾,承諾它過(guò)一段時(shí)間會(huì)給你一個(gè)結(jié)果锅尘。 Promise 有三種狀態(tài):pending(等待態(tài))布蔗,fullfilled (resolved成功態(tài)),rejected(失敗態(tài))纵揍;狀態(tài)一旦改變,就不會(huì)再變璧榄。創(chuàng)造 Promise 實(shí)例后吧雹,它會(huì)立即執(zhí)行。

Promise用來(lái)做什么雄卷?

Promise 是用來(lái)解決兩個(gè)問(wèn)題的:
回調(diào)地獄:回調(diào)嵌套非常多,代碼難以維護(hù)妒潭, 常常第一個(gè)的函數(shù)的輸出是第二個(gè)函數(shù)的輸入這種現(xiàn)象。
Promise 可以支持多個(gè)并發(fā)的請(qǐng)求雳灾,獲取并發(fā)請(qǐng)求中的數(shù)據(jù)。

Promise如何使用记靡?

Promise 是一個(gè)構(gòu)造函數(shù)团驱,自己身上有all摸吠、reject嚎花、resolve方法,原型上有then啼止、catch等方法兵罢。

let p = new Promise((resolve, reject) => {
    //做一些異步操作
    setTimeout(() => {
        console.log('執(zhí)行完成');
        resolve('我是成功!卖词!');
    }, 2000);
});

Promise 的構(gòu)造函數(shù)接收一個(gè)參數(shù):函數(shù),并且這個(gè)函數(shù)需要傳入兩個(gè)參數(shù):
resolve :異步操作執(zhí)行成功后的回調(diào)函數(shù)
reject :異步操作執(zhí)行失敗后的回調(diào)函數(shù)

then 鏈?zhǔn)讲僮鞯挠梅?/code>
從表面上看即横,Promise 只是簡(jiǎn)化層層回調(diào)的寫(xiě)法,而實(shí)質(zhì)上东囚,Promise的精髓是“狀態(tài)”,用維護(hù)狀態(tài)页藻、傳遞狀態(tài)的方式來(lái)使得回調(diào)函數(shù)能夠及時(shí)調(diào)用植兰,它比傳遞callback函數(shù)要簡(jiǎn)單、靈活的多钉跷。所以使用Promise的正確場(chǎng)景是這樣的。

p.then((data) => {
    console.log(data);
})
.then((data) => {
    console.log(data);
})
.then((data) => {
    console.log(data);
});復(fù)制代碼

reject的用法
把 Promise 的狀態(tài)置為 rejected彬坏,這樣我們?cè)?then 中就能捕捉到膝晾,然后執(zhí)行“失敗”情況的回調(diào)⊙保看下面的代碼。

    let p = new Promise((resolve, reject) => {
        //做一些異步操作
      setTimeout(function(){
            var num = Math.ceil(Math.random()*10); //生成1-10的隨機(jī)數(shù)
            if(num<=5){
                resolve(num);
            }
            else{
                reject('數(shù)字太大了');
            }
      }, 2000);
    });
    p.then((data) => {
            console.log('resolved',data);
        },(err) => {
            console.log('rejected',err);
        }
    ); 

then 中傳了兩個(gè)參數(shù)落恼,then方法可以接受兩個(gè)參數(shù)离熏,第一個(gè)對(duì)應(yīng)resolve 的回調(diào),第二個(gè)對(duì)應(yīng) reject 的回調(diào)滋戳。所以我們能夠分別拿到他們傳過(guò)來(lái)的數(shù)據(jù)。
catch的用法
Promise 對(duì)象除了 then 方法咪笑,還有一個(gè) catch 方法娄涩,用來(lái)指定 reject 的回調(diào)。用法是這樣:

p.then((data) => {
    console.log('resolved',data);
}).catch((err) => {
    console.log('rejected',err);
});

效果和寫(xiě)在 then 的第二個(gè)參數(shù)里面一樣蓄拣。不過(guò)它還有另外一個(gè)作用:在執(zhí)行 resolve 的回調(diào)(也就是上面 then 中的第一個(gè)參數(shù))時(shí),如果拋出異常了(代碼出錯(cuò)了)孔轴,那么并不會(huì)報(bào)錯(cuò)卡死 js 碎捺,而是會(huì)進(jìn)到這個(gè) catch 方法中。請(qǐng)看下面的代碼

p.then((data) => {
    console.log('resolved',data);
    console.log(somedata); //此處的somedata未定義
})
.catch((err) => {
    console.log('rejected',err);
});

在 resolve 的回調(diào)中收厨,console.log(somedata),而 somedata 這個(gè)變量是沒(méi)有被定義的雁竞。如果我們不用 Promise ,代碼運(yùn)行到這里就直接在控制臺(tái)報(bào)錯(cuò)了碑诉,不往下運(yùn)行了。
all 的用法
誰(shuí)跑的慢德挣,以誰(shuí)為準(zhǔn)執(zhí)行回調(diào)快毛。all 接收一個(gè)數(shù)組參數(shù),里面的值最終都算返回 Promise 對(duì)象唠帝。
Promise 的 all 方法提供了并行執(zhí)行異步操作的能力,并且在所有異步操作執(zhí)行完后才執(zhí)行回調(diào)襟衰。看下面的例子:

let Promise1 = new Promise(function(resolve, reject){})
let Promise2 = new Promise(function(resolve, reject){})
let Promise3 = new Promise(function(resolve, reject){})
 
let p = Promise.all([Promise1, Promise2, Promise3])
 
p.then(funciton(){
  // 三個(gè)都成功則成功  
}, function(){
  // 只要有失敗阀湿,則失敗 
})

有了 all 瑰妄,就可以并行執(zhí)行多個(gè)異步操作,并且在一個(gè)回調(diào)中處理所有的返回?cái)?shù)據(jù)间坐。一些游戲類的素材比較多的應(yīng)用,打開(kāi)網(wǎng)頁(yè)時(shí)劳澄,預(yù)先加載需要用到的各種資源如圖片蜈七、flash以及各種靜態(tài)文件。所有的都加載完后飒硅,我們?cè)龠M(jìn)行頁(yè)面的初始化。
race 的用法
誰(shuí)跑的快庵芭,以誰(shuí)為準(zhǔn)執(zhí)行回調(diào)雀监。
race 的使用場(chǎng)景:可以用 race 給某個(gè)異步請(qǐng)求設(shè)置超時(shí)時(shí)間,并且在超時(shí)后執(zhí)行相應(yīng)的操作好乐,代碼如下

 //請(qǐng)求某個(gè)圖片資源
    function requestImg(){
        var p = new Promise((resolve, reject) => {
            var img = new Image();
            img.onload = function(){
                resolve(img);
            }
            img.src = '圖片的路徑';
        });
        return p;
    }
    //延時(shí)函數(shù)曹宴,用于給請(qǐng)求計(jì)時(shí)
    function timeout(){
        var p = new Promise((resolve, reject) => {
            setTimeout(() => {
                reject('圖片請(qǐng)求超時(shí)');
            }, 5000);
        });
        return p;
    }
    Promise.race([requestImg(), timeout()]).then((data) =>{
        console.log(data);
    }).catch((err) => {
        console.log(err);
    });

requestImg 函數(shù)會(huì)異步請(qǐng)求一張圖片歉提,我把地址寫(xiě)為"圖片的路徑",所以肯定是無(wú)法成功請(qǐng)求到的苔巨。timeout 函數(shù)是一個(gè)延時(shí)5秒的異步操作。我們把這兩個(gè)返回 Promise 對(duì)象的函數(shù)放進(jìn) race礁芦,于是他倆就會(huì)賽跑悼尾,如果5秒之內(nèi)圖片請(qǐng)求成功了,那么遍進(jìn)入 then 方法闺魏,執(zhí)行正常的流程。如果5秒鐘圖片還未成功返回析桥,那么 timeout 就跑贏了,則進(jìn)入 catch埋虹,報(bào)出“圖片請(qǐng)求超時(shí)”的信息娩怎。

摘自:Promise不會(huì)?截亦?看這里!<泵稹谷遂!史上最通俗易懂的PromiseT岵觥!5坝狻(一)

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末窗悯,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子亏钩,更是在濱河造成了極大的恐慌欺旧,老刑警劉巖,帶你破解...
    沈念sama閱讀 216,496評(píng)論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件辞友,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡留拾,警方通過(guò)查閱死者的電腦和手機(jī)鲫尊,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,407評(píng)論 3 392
  • 文/潘曉璐 我一進(jìn)店門(mén),熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)竞帽,“玉大人,你說(shuō)我怎么就攤上這事屹篓〕着” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 162,632評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵谍肤,是天一觀的道長(zhǎng)哗伯。 經(jīng)常有香客問(wèn)我,道長(zhǎng)焊刹,這世上最難降的妖魔是什么恳蹲? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 58,180評(píng)論 1 292
  • 正文 為了忘掉前任俩滥,我火速辦了婚禮,結(jié)果婚禮上错忱,老公的妹妹穿的比我還像新娘挂据。我一直安慰自己以清,他們只是感情好棱貌,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,198評(píng)論 6 388
  • 文/花漫 我一把揭開(kāi)白布婚脱。 她就那樣靜靜地躺著勺像,像睡著了一般障贸。 火紅的嫁衣襯著肌膚如雪吟宦。 梳的紋絲不亂的頭發(fā)上,一...
    開(kāi)封第一講書(shū)人閱讀 51,165評(píng)論 1 299
  • 那天袁波,我揣著相機(jī)與錄音蜗侈,去河邊找鬼。 笑死踏幻,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的夭苗。 我是一名探鬼主播隔缀,決...
    沈念sama閱讀 40,052評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼猾瘸!你這毒婦竟也來(lái)了桥嗤?” 一聲冷哼從身側(cè)響起仔蝌,我...
    開(kāi)封第一講書(shū)人閱讀 38,910評(píng)論 0 274
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎渊鞋,沒(méi)想到半個(gè)月后瞧挤,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,324評(píng)論 1 310
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡执俩,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,542評(píng)論 2 332
  • 正文 我和宋清朗相戀三年癌刽,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片显拜。...
    茶點(diǎn)故事閱讀 39,711評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡远荠,死狀恐怖矮固,靈堂內(nèi)的尸體忽然破棺而出譬淳,到底是詐尸還是另有隱情,我是刑警寧澤守伸,帶...
    沈念sama閱讀 35,424評(píng)論 5 343
  • 正文 年R本政府宣布确虱,位于F島的核電站,受9級(jí)特大地震影響校辩,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜宜咒,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,017評(píng)論 3 326
  • 文/蒙蒙 一故黑、第九天 我趴在偏房一處隱蔽的房頂上張望儿咱。 院中可真熱鬧,春花似錦怠缸、人聲如沸钳宪。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 31,668評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至疚俱,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間呆奕,已是汗流浹背瞧壮。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 32,823評(píng)論 1 269
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留咆槽,地道東北人圈纺。 一個(gè)月前我還...
    沈念sama閱讀 47,722評(píng)論 2 368
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像灯谣,于是被迫代替她去往敵國(guó)和親蛔琅。 傳聞我的和親對(duì)象是個(gè)殘疾皇子胎许,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,611評(píng)論 2 353

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