ES6 - Promise 對象

gaomysion 發(fā)布于2019-08-21 17:17 / 1716人閱讀

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

前言

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

了解 promise

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

Promise 對象用法

// 創(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底層為我們封裝好的。當我們在 promise對象中成功時調(diào)用reslove函數(shù)，它會觸發(fā)then方法中的第一個函數(shù)，當我們在 promise對象中成功時調(diào)用reject函數(shù)，它會觸發(fā)then方法中的第二個函數(shù)，另外then中的第二個方法我們可以省略。我們可以使用 catch 來接受一些錯誤信息。

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

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

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("出錯了")
    console.log(val)  // 不執(zhí)行
}).catch((val) => {
    console.log(val)  //出錯了 
})

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

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

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

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

Promise 對象的其他用法

1. Promise.all()

該方法用于將多個 Promise 實例，包裝成一個新的 Promise 實例。

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

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

2. Promise.race()

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

Promise.resolve()

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

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

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

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

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

(2)參數(shù)是一個thenable對象

thenable對象就是帶有 then 方法的對象

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


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

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

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

let promiseNew = Promise.resolve(1234) 

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

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

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

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

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

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

console.log(333)

// 333
// 222
// 111

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

Promise.reject()

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

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

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

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

done()

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

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

finally()

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

promise.then()
       .finally() // 不管then() 是否有錯，finally都會執(zhí)行

結(jié)束

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

參考書籍：《ECMAScript 6 入門》

云服務器 GPU云服務器 es6中的promise promise Promise使用 promise用法

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/89348.html

ES6-7

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

mudiyouyou 2019-08-21 18:40 評論0 收藏0
通過 ES6 Promise 和 jQuery Deferred 的異同學習 Promise

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

Yujiaao 2019-08-21 10:39 評論0 收藏0
淺談ES6原生Promise

摘要：如果有錯誤，則到的第二個回調(diào)函數(shù)中，對錯誤進行處理。假設第一個的第一個回調(diào)沒有返回一個對象，那么第二個的調(diào)用者還是原來的對象，只不過其的值變成了第一個中第一個回調(diào)函數(shù)的返回值。 ES6標準出爐之前，一個幽靈，回調(diào)的幽靈，游蕩在JavaScript世界。正所謂：世界本沒有回調(diào)，寫的人多了，也就有了})})})})})。 Promise的興起，是因為異步方法調(diào)用中，往往會出現(xiàn)回調(diào)函數(shù)一...

yedf 2019-08-20 10:30 評論0 收藏0
談談ES6前后的異步編程

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

fizz 2019-08-22 18:25 評論0 收藏0
【前端】ES6入門基礎知識

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

philadelphia 2019-08-21 17:21 評論0 收藏0
es6 promise面試

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

timger 2019-08-23 18:38 評論0 收藏0