JavaScript ES6 Promiss物件

one發表於2019-07-25
JavaScript物件

說明

Node.js中，以非同步(Async)回撥著稱，使用了非同步，提高了程式的執行效率，但是，程式碼可讀性較差的。
假如有幾個非同步操作，後一個操作需要前一個操作的執行完畢之後返回的資料才能執行下去，如果使用Node.js，就需要一層層巢狀下去，Promised物件就是針對此問題所提出來的的解決辦法。

基本概念

Promise物件狀態：

  1. pending
    初始狀態,也稱為未定狀態，就是初始化Promise時，呼叫executor執行器函式後的狀態。
  2. fulfilled
    完成狀態，意味著非同步操作成功。
  3. rejected
    失敗狀態，意味著非同步操作失敗。

狀態轉換隻有這兩種pending->fulfilled pending->，可返回的這個Promise物件的狀態主要是根據promise1.then()方法返回的值：

狀態轉化是單向的，不可逆轉，已經確定的狀態（fulfilled/rejected）無法轉回初始狀態（pending）

當狀態為rejected，該promise無法繼續往下執行，需要新增一個catch獲得異常資訊
回撥函式：

  • resolve
    當pending狀態轉為fulfilled狀態時候回撥（操作成功）
  • reject
    當pending狀態轉為rejected狀態時候回撥（操作失敗）

方法：

  • then()
  • catch()
  • all()
  • race()

基本使用

new Promise(function(resolve,reject){
    //這裡面實現非同步操作,ajax等..
    //獲得結果，回撥傳參
    if(/*success*/){
        resolve();
    }else{
        reject();
    }
});
//雖然沒有去執行setTimeOut函式，但是Promise會自動執行，所以，一般需要將Promise寫在一個function裡面
new Promise(function(resolve,reject){
    setTimeout(function(){
        let num = Math.random();
        //當隨機數小於0.5，當前promise完成了執行
        if(num<0.5){
            resolve(num);
        }else{
            reject("錯誤，num>=0.5");
        }
        console.log('執行完成');
    },2000);
});
let p =new Promise(function(resolve,reject){
    setTimeout(function(){
        let num = Math.random();
        //當隨機數小於0.5，當前promise完成了執行
        if(num<0.5){
            resolve(num);
        }else{
            reject(num);
        }
        console.log('執行完成');
    },2000);
});
p.then(function(data){
    //這裡的data是之前resolve中的回撥引數
    console.log(data);
},function(error){
    //這裡的error是之前resolve中的回撥引數
    console.log("錯誤原因為"+error);
});

進階使用

then()

Promise then(fun(resolve,reject))

p.then(function(data){
    //這裡的data是之前resolve中的回撥引數
    console.log(data);
},function(data){
    //這裡的data是之前resolve中的回撥引數
    console.log("錯誤");
    console.log(data);
});

then方法，可以接收回撥的引數並進行處理，then方法返回的是一個Promise物件。這裡，我們主要關心的是返回的Promise物件的狀態。

可返回的這個Promise物件的狀態主要是根據promise1.then()方法返回的值：

  1. 如果then()方法中返回了一個引數值，那麼返回的Promise將會變成接收狀態。
  2. 如果then()方法中丟擲了一個異常，那麼返回的Promise將會變成拒絕狀態。
  3. 如果then()方法呼叫resolve()方法，那麼返回的Promise將會變成接收狀態。
  4. 如果then()方法呼叫reject()方法，那麼返回的Promise將會變成拒絕狀態。
  5. 如果then()方法返回了一個未知狀態(pending)的Promise新例項，那麼返回的新Promise就是未知狀態。
  6. 如果then()方法沒有明確指定的resolve(data)/reject(data)/return data時，那麼返回的新Promise就是接收狀態，可以一層一層地往下傳遞。
let p =new Promise(function(resolve,reject){
    setTimeout(function(){
        let num = Math.random();
        //當隨機數小於0.5，當前promise完成了執行
        if(num<0.5){
            resolve(num);
        }else{
            reject(num);
        }
        console.log('執行完成');
    },2000);
});
p.then(function(data){
    //用上次獲得的資料執行相關的非同步操作
},function(error){
    //出現錯誤，處理錯誤資訊
});
let p =new Promise(function(resolve,reject){
    setTimeout(function(){
        resolve("hello");
        console.log('執行完成');
    },2000);
});
p.then(function(data){
    console.log(data);
}).then(function(){
    setTimeout(function(){
        console.log("過了5s，繼續執行");
    },5000);
});

catch()

catch()方法和then()方法一樣，都會返回一個新的Promise物件，它主要用於捕獲非同步操作時出現的異常。

因此，我們通常省略then()方法的第二個引數，把錯誤處理控制權轉交給其後面的catch()函式。

下面的兩段程式碼塊，實現的功能是一樣的。

let p =new Promise(function(resolve,reject){
    setTimeout(function(){
        let num = Math.random();
        //當隨機數小於0.5，當前promise完成了執行
        if(num<0.5){
            resolve(num);
        }else{
            reject(num);
        }
        console.log('執行完成');
    },2000);
});
p.then(function(data){
    //用上次獲得的資料執行相關的非同步操作
},function(error){
    //出現錯誤，處理錯誤資訊
});
let p =new Promise(function(resolve,reject){
    setTimeout(function(){
        let num = Math.random();
        if(num<0.5){
            resolve(num);
        }else{
            reject(num);
        }
        console.log('執行完成');
    },2000);
});
p.then(function(data){
    //用上次獲得的資料執行相關的非同步操作
}).catch(function(error){
    //處理錯誤資訊
});

race()

傳入引數為可迭代的物件，如陣列

兩個非同步任務同時向同一個url傳送請求，誰先得到資料，另外的那個非同步任務獲得的資料就會被丟棄

//2s後輸出“執行完成1”
let p =new Promise(function(resolve){
    setTimeout(function(){
        resolve("hello");
        console.log('執行完成1');
    },2000);
});
//1s後輸出“執行完成2”
let p1 =new Promise(function(resolve){
    setTimeout(function(){
        resolve("hello 2");
        console.log('執行完成2');
    },1000);
});
//兩個非同步任務同時開始
let mixedPromisesArray = [p,p1];
let p3 = Promise.race(mixedPromisesArray).then(data=>{
    //這裡的data為hello 2,hello被丟棄
    console.log(data);
});

all()

引數也是可迭代的物件，如陣列

一般用於幾個任務同時並行執行的情況

當某個任務失敗，狀態就會變為reject

//2s後輸出“執行完成1”
let p =new Promise(function(resolve){
    setTimeout(function(){
        resolve("hello");
        console.log('執行完成1');
    },2000);
});
//1s後輸出“執行完成2”
let p1 =new Promise(function(resolve){
    setTimeout(function(){
        resolve("hello 2");
        console.log('執行完成2');
    },1000);
});
//兩個非同步任務同時開始
let mixedPromisesArray = [p,p1];
let p3 = Promise.all(mixedPromisesArray).then(data=>{
    //這裡的data陣列，存放著之前兩個非同步回撥傳的資料
    console.log(data);
});

參考

ES6關於Promise的用法
MDN Promise

相關文章