ES6 promise的用法

時間 2019-11-11

原文原文鏈接

function runAsync(){
    var p = new Promise(function(resolve, reject){
        //作一些異步操做
        setTimeout(function(){
            console.log('執行完成');
            resolve('隨便什麼數據');
        }, 2000);
    });
    return p;            
}
runAsync()

　　接下來調用runAsync()方法javascript

runAsync().then((res)=>{
    console.log(res); // res:隨便什麼數據
})

2.鏈式操做法java

runAsync1()
.then(function(data){
    console.log(data);
    return runAsync2();
})
.then(function(data){
    console.log(data);
    return runAsync3();
})
.then(function(data){
    console.log(data);
});

　　函數寫法數組

function runAsync1(){
    var p = new Promise(function(resolve, reject){
        //作一些異步操做
        setTimeout(function(){
            console.log('異步任務1執行完成');
            resolve('隨便什麼數據1');
        }, 1000);
    });
    return p;            
}
function runAsync2(){
    var p = new Promise(function(resolve, reject){
        //作一些異步操做
        setTimeout(function(){
            console.log('異步任務2執行完成');
            resolve('隨便什麼數據2');
        }, 2000);
    });
    return p;            
}
function runAsync3(){
    var p = new Promise(function(resolve, reject){
        //作一些異步操做
        setTimeout(function(){
            console.log('異步任務3執行完成');
            resolve('隨便什麼數據3');
        }, 2000);
    });
    return p;            
}

3.all的用法：提供了並行執行異步操做的能力，而且在全部異步操做執行完後才執行回調。異步

Promise
.all([runAsync1(), runAsync2(), runAsync3()])
.then(function(results){
    console.log(results);
});

　　用Promise.all來執行，all接收一個數組參數，裏面的值最終都算返回Promise對象。這樣，三個異步操做的並行執行的，等到它們都執行完後纔會進到then裏面。函數

4.race的用法：all方法的效果其實是「誰跑的慢，以誰爲準執行回調」，那麼相對的就有另外一個方法「誰跑的快，以誰爲準執行回調」，這就是race方法，這個詞原本就是賽跑的意思。對象

//請求某個圖片資源
function requestImg(){
    var p = new Promise(function(resolve, reject){
        var img = new Image();
        img.onload = function(){
            resolve(img);
        }
        img.src = 'xxxxxx';
    });
    return p;
}

//延時函數，用於給請求計時
function timeout(){
    var p = new Promise(function(resolve, reject){
        setTimeout(function(){
            reject('圖片請求超時');
        }, 5000);
    });
    return p;
}

Promise
.race([requestImg(), timeout()])
.then(function(results){
    console.log(results);
})
.catch(function(reason){
    console.log(reason);
});

requestImg函數會異步請求一張圖片，我把地址寫爲」xxxxxx」，因此確定是沒法成功請求到的。timeout函數是一個延時5秒的異步操做。咱們把這兩個返回Promise對象的函數放進race，因而他倆就會賽跑，若是5秒以內圖片請求成功了，那麼遍進入then方法，執行正常的流程。若是5秒鐘圖片還未成功返回，那麼timeout就跑贏了，則進入catch，報出「圖片請求超時」的信息。blog