成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

ES6 - Promise 對(duì)象

gaomysion / 1740人閱讀

摘要：前言的正式版后，我們看到新增加了一個(gè)對(duì)象它是用來(lái)處理異步操作的，以前的異步操作書(shū)寫(xiě)并不是很美觀，而且在回調(diào)函數(shù)中和并不會(huì)帶到我們想要的狀態(tài)。另外我們還可以在的回調(diào)函數(shù)中去使用調(diào)用另一對(duì)象。

前言

ECMAScript 6 的正式版后，我們看到新增加了一個(gè)對(duì)象Promise,它是用來(lái)處理異步操作的，以前的異步操作書(shū)寫(xiě)并不是很美觀，而且在回調(diào)函數(shù)中 return和 throw 并不會(huì)帶到我們想要的狀態(tài)。而Promise 很好的解決了這些問(wèn)題。

了解 promise

promise 對(duì)象存在三種狀態(tài)，進(jìn)行中、結(jié)束、失敗。當(dāng)從進(jìn)行中到結(jié)束狀態(tài)或從進(jìn)行中到失敗狀態(tài)時(shí)，會(huì)觸發(fā)reslove、reject函數(shù)。

Promise 對(duì)象用法 
// 創(chuàng)建 promise
let promise = new Promise(function(reslove,reject){
    
    if(/ * 成功 */){  
       reslove(values) // 成功調(diào)用reslove函數(shù)
    }else{
       reject(values)  // 失敗調(diào)用 reject函數(shù)
    }
})


// 調(diào)用

promise.then(function(val){
   // 調(diào)用reslove() 函數(shù)
},function(val){
   調(diào)用 reject() 函數(shù)
})

reslove 和 reject 函數(shù)并不我們自己聲明的，而是js底層為我們封裝好的。當(dāng)我們?cè)?promise對(duì)象中成功時(shí)調(diào)用reslove函數(shù)，它會(huì)觸發(fā)then方法中的第一個(gè)函數(shù)，當(dāng)我們?cè)?promise對(duì)象中成功時(shí)調(diào)用reject函數(shù)，它會(huì)觸發(fā)then方法中的第二個(gè)函數(shù)，另外then中的第二個(gè)方法我們可以省略。我們可以使用 catch 來(lái)接受一些錯(cuò)誤信息。

promise.then((val) =>{
    // 成功處理
}).catch((val) =>{
    // 錯(cuò)誤處理
})

在創(chuàng)建的promise構(gòu)造函數(shù)里或then的回調(diào)函數(shù)里遇到的錯(cuò)誤信息都會(huì)被catch捕獲到，我們來(lái)看一個(gè)例子

let promise = function(time){

    return new Promise(function(relove, reject){
      if(typeof time == "number"){
        setTimeout(relove,time,"調(diào)用成功");
      }else{
          reject("調(diào)用失敗")
      }
       
    })
}


promise(100).then((val) =>{
    console.log(val)  // 調(diào)用成功
})

promise("fda").then((val) =>{
    console.log(val)  // 調(diào)用失敗
})

promise(100).then((val) =>{
    new throw("出錯(cuò)了")
    console.log(val)  // 不執(zhí)行
}).catch((val) => {
    console.log(val)  //出錯(cuò)了 
})

現(xiàn)在我們應(yīng)該對(duì)promise有一定的了解，使用promise還有一定的好處是，我們可以在then回調(diào)函數(shù)中去使用 return 語(yǔ)句和 throw 語(yǔ)句，上面我們已經(jīng)使用了throw 語(yǔ)句。另外我們還可以在then的回調(diào)函數(shù)中去使用調(diào)用另一 promise 對(duì)象。這樣比我們使用AJAX交互時(shí)嵌套訪問(wèn)清晰的多。

promiseOne.then(()=>{
    promiseTwo.then(() =>{

    })
}).catch(() =>{
    
})

另外，我們應(yīng)該知道，then 方法和 catch 方法是綁定到了 promise對(duì)象的原型上邊了。

Promise 對(duì)象的其他用法

1. Promise.all()

該方法用于將多個(gè) Promise 實(shí)例，包裝成一個(gè)新的 Promise 實(shí)例。

let promise = Promise.all([promiseOne,promiseTwo]);

這種情況下當(dāng) promiseOne 和 promiseTwo 都成功調(diào)用 promise 才會(huì)被成功調(diào)用，

2. Promise.race()

該方法同樣是將多個(gè)Promise實(shí)例，包裝成一個(gè)新的Promise實(shí)例。只不過(guò)在這種情況下，只要其中一個(gè)被成功調(diào)用，promise 就會(huì)被成功調(diào)用。

Promise.resolve()

將對(duì)象轉(zhuǎn)換為 Promise,這里有四中情況

(1)參數(shù)是一個(gè)Promise實(shí)例

let promise = new Promise(function(relove,reject){
    
})

// 返回promise
let promiseNew = Promise.resolve(promise)

如果參數(shù)是Promise實(shí)例，那么Promise.resolve將不做任何修改、原封不動(dòng)地返回這個(gè)實(shí)例。

(2)參數(shù)是一個(gè)thenable對(duì)象

thenable對(duì)象就是帶有 then 方法的對(duì)象

let obj ={
    then(relove,reject){
        relove(111)
    }
}


let promiseNew = Promise.resolve(obj) 
promiseNew.then((val) =>{
    console.log(val)  // 111
})

這時(shí)Promise.resolve(obj) 會(huì)將obj轉(zhuǎn)化為Promise對(duì)象，并立即執(zhí)行then方法

(3)參數(shù)不是具有then方法的對(duì)象，或根本就不是對(duì)象

let promiseNew = Promise.resolve(1234) 

promiseNew.then((val) =>{
    console.log(val) // 1234
})

(4)不帶有任何參數(shù)

// 返回一個(gè) relove狀態(tài)的Promise對(duì)象
let promiseNew = Promise.resolve()

需要注意的是，立即resolve的Promise對(duì)象，實(shí)在事件循環(huán)結(jié)束時(shí)，而不是開(kāi)始時(shí)，如：

setTimeout(function(){
    console.log(111)
})

Promise.resolve().then(() =>{
    console.log(222)
})

console.log(333)

// 333
// 222
// 111

setTimeout 是在下一個(gè)事件循環(huán)時(shí)執(zhí)行，Promise.reslove 是在事件循環(huán)結(jié)束是調(diào)用， console 是立即調(diào)用

Promise.reject()

Promise.reject(reason)方法也會(huì)返回一個(gè)新的 Promise 實(shí)例，該實(shí)例的狀態(tài)為rejected。

var p = Promise.reject("出錯(cuò)了");
// 等同于
var p = new Promise((resolve, reject) => reject("出錯(cuò)了"))

p.then(null, function (s) {
  console.log(s)
});
// 出錯(cuò)了

注意，Promise.reject()方法的參數(shù)，會(huì)原封不動(dòng)地作為reject的理由，變成后續(xù)方法的參數(shù)。這一點(diǎn)與Promise.resolve方法不一致。

done()

該方法是Promise 對(duì)象的回調(diào)鏈，不管以then方法或catch方法結(jié)尾，要是最后一個(gè)方法拋出錯(cuò)誤，都有可能無(wú)法捕捉到（因?yàn)镻romise內(nèi)部的錯(cuò)誤不會(huì)冒泡到全局）。因此，我們可以提供一個(gè)done方法，總是處于回調(diào)鏈的尾端，保證拋出任何可能出現(xiàn)的錯(cuò)誤。

promise.then()
       .catch()
       .then()
       .catch()
       .done() // 接收錯(cuò)誤，并向全局拋出

finally()

finally方法用于指定不管Promise對(duì)象最后狀態(tài)如何，都會(huì)執(zhí)行的操作。它與done方法的最大區(qū)別，它接受一個(gè)普通的回調(diào)函數(shù)作為參數(shù)，該函數(shù)不管怎樣都必須執(zhí)行。

promise.then()
       .finally() // 不管then() 是否有錯(cuò)，finally都會(huì)執(zhí)行
結(jié)束

promise 對(duì)象的使用并不是很難，這里我參考了阮一峰老師的書(shū)籍。

參考書(shū)籍：《ECMAScript 6 入門(mén)》

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/89348.html

相關(guān)文章

  • ES6-7

    摘要：的翻譯文檔由的維護(hù)很多人說(shuō)，阮老師已經(jīng)有一本關(guān)于的書(shū)了入門(mén)，覺(jué)得看看這本書(shū)就足夠了。前端的異步解決方案之和異步編程模式在前端開(kāi)發(fā)過(guò)程中，顯得越來(lái)越重要。為了讓編程更美好，我們就需要引入來(lái)降低異步編程的復(fù)雜性。 JavaScript Promise 迷你書(shū)（中文版） 超詳細(xì)介紹promise的gitbook，看完再不會(huì)promise...... 本書(shū)的目的是以目前還在制定中的ECMASc...

    mudiyouyou 評(píng)論0 收藏0

  • 通過(guò) ES6 Promise 和 jQuery Deferred 的異同學(xué)習(xí) Promise

    摘要：和和都有和，但是略有不同。實(shí)際上返回的是一個(gè)對(duì)象。和添加的回調(diào)，添加的回調(diào)。所以在調(diào)用成功的情況下執(zhí)行添加的回調(diào)，調(diào)用失敗時(shí)執(zhí)行添加的回調(diào)。，產(chǎn)生對(duì)象并，產(chǎn)生對(duì)象并，然后繼續(xù)處理，的語(yǔ)法糖，和的差不多但不同。 Deferred 和 Promise ES6 和 jQuery 都有 Deffered 和 Promise，但是略有不同。不過(guò)它們的作用可以簡(jiǎn)單的用兩句話來(lái)描述 Deffere...

    Yujiaao 評(píng)論0 收藏0

  • 淺談ES6原生Promise

    摘要：如果有錯(cuò)誤，則到的第二個(gè)回調(diào)函數(shù)中，對(duì)錯(cuò)誤進(jìn)行處理。假設(shè)第一個(gè)的第一個(gè)回調(diào)沒(méi)有返回一個(gè)對(duì)象，那么第二個(gè)的調(diào)用者還是原來(lái)的對(duì)象，只不過(guò)其的值變成了第一個(gè)中第一個(gè)回調(diào)函數(shù)的返回值。 ES6標(biāo)準(zhǔn)出爐之前，一個(gè)幽靈，回調(diào)的幽靈，游蕩在JavaScript世界。 正所謂： 世界本沒(méi)有回調(diào)，寫(xiě)的人多了，也就有了})})})})})。 Promise的興起，是因?yàn)楫惒椒椒ㄕ{(diào)用中，往往會(huì)出現(xiàn)回調(diào)函數(shù)一...

    yedf 評(píng)論0 收藏0

  • 談?wù)?em>ES6前后的異步編程

    摘要：回調(diào)函數(shù)這是異步編程最基本的方法。對(duì)象對(duì)象是工作組提出的一種規(guī)范，目的是為異步編程提供統(tǒng)一接口。誕生后，出現(xiàn)了函數(shù)，它將異步編程帶入了一個(gè)全新的階段。 更多詳情點(diǎn)擊http://blog.zhangbing.club/Ja... Javascript 語(yǔ)言的執(zhí)行環(huán)境是單線程的，如果沒(méi)有異步編程，根本沒(méi)法用，非卡死不可。 為了解決這個(gè)問(wèn)題，Javascript語(yǔ)言將任務(wù)的執(zhí)行模式分成兩種...

    fizz 評(píng)論0 收藏0

  • 【前端】ES6入門(mén)基礎(chǔ)知識(shí)

    摘要：關(guān)于的入門(mén)了解新增模板字符串為提供了簡(jiǎn)單的字符串插值功能箭頭函數(shù)操作符左邊為輸入的參數(shù)，而右邊則是進(jìn)行的操作以及返回的值。將對(duì)象納入規(guī)范，提供了原生的對(duì)象。增加了和命令，用來(lái)聲明變量。 關(guān)于ES6的入門(mén)了解 新增模板字符串（為JavaScript提供了簡(jiǎn)單的字符串插值功能）、箭頭函數(shù)（操作符左邊為輸入的參數(shù)，而右邊則是進(jìn)行的操作以及返回的值Inputs=>outputs。）、for-o...

    philadelphia 評(píng)論0 收藏0

  • es6 promise面試

    摘要：執(zhí)行函數(shù)會(huì)返回一個(gè)遍歷器對(duì)象，每一次函數(shù)里面的都相當(dāng)一次遍歷器對(duì)象的方法，并且可以通過(guò)方法傳入自定義的來(lái)改變函數(shù)的行為。函數(shù)可以通過(guò)配合函數(shù)更輕松更優(yōu)雅的實(shí)現(xiàn)異步編程和控制流管理。它和構(gòu)造函數(shù)的不同點(diǎn)類(lèi)的內(nèi)部定義的所有方法，都是不可枚舉的。 let const的命令 在ES6之前，聲明變量只能用var，var方式聲明變量其實(shí)是很不合理的，準(zhǔn)確的說(shuō)，是因?yàn)镋S5里面沒(méi)有塊級(jí)作用域是很不合...

    timger 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<