1. 程式人生 > >ES6 Promise 用法

ES6 Promise 用法

方法 截圖 spa 狀態 src img 捕捉 問題 數據

用多了異步回調函數,起初看Promise也是一頭霧水....其實也很簡單:

由淺入深先看下面:

技術分享圖片

Promise其實是一個構造函數; 用new操作符; Promise接收一個函數作為參數;先不看resolve和reject;

在這裏只想說明一點的是:new 一個Promise之後 ,promise中的函數的代碼會自動運行;(打開瀏覽器試試)

但是更多的是做一些異步操作,而不是直接輸出console.log(" ");

技術分享圖片

說來說去這到底跟resovle,和reject這兩個有啥關系呢,我們可以用了幹嘛?

再看:

技術分享圖片

先來說一下:Promise對象上有 then,catchall三大方法

技術分享圖片

第三個截圖中:我們寫了一個resolve("代表一個數據");其實現在可以大概明白,resovle是我們自己定義的

,你想幹嘛就幹嘛,甚至你可以寫一個reject("我代表一個失敗的數據..");在下圖就會在fail函數中輸出;如果在Promise中使用了reject("reject"),那麽then必須有第二個參數來接收失敗的回調;沒有的話就強制性報錯了 ;

技術分享圖片

這一步可以先總結一下:就是then函數中的函數參數,可以接收promise中的數據(resolve的,或reject的);比如你可以在Promise中$.get({ })一個後端數據,然後把後端返回的數據放到resolve中(或者reject中) ;在我看來,resovle和reject沒有區別(都說了什麽狀態是成功是失敗,寫reject,還是寫resolve是右你自己決定的);只是then接收的時候有區別

為了理解resovle和reject是自己定義的我們看看下圖就明白了:

(我們把p這個Promise封裝在一個函數中,等到想要的時候再調用, 因為文章前面說了, new一個Promise會馬上被執行..)

函數asy接收參數num;如果num<10 就調用resolve( );否則認為是reject的數據; 接收結果分別在then的兩個函數中;

技術分享圖片

Promise的then方法還可以返回一個promise(),這樣可以鏈式調用;

比如 promise_a.then().then();每個then都會接收前面promise返回的數據;

promise.catch().會捕捉前面promise產生的異常.而不至於程序真正報錯,像 try...catch那樣;

下面說說promise的重頭戲: 意思是把所有的異步請求集合到一起,得到結果...

Promise.all( ) : 不說了,看代碼就明白:

function asy1(num) {

    var p = new Promise(function (resolve, reject) {
        //做一些異步操作
        if (num < 10) {
            setTimeout(function () {
                resolve("數據正常 asy1....")
            }, 2000);
        }else{
            reject("數據異常asy1....")
        }
    })
    return  p;
}

function asy2(num) {

    var p = new Promise(function (resolve, reject) {
        //做一些異步操作
        if (num < 10) {
            setTimeout(function () {
                resolve("數據正常 asy2....")
            }, 2000);
        }else{
            reject("asy2....")
        }
    })
    return  p;
}

function asy3(num) {

    var p = new Promise(function (resolve, reject) {
        //做一些異步操作
        if (num < 10) {
            setTimeout(function () {
                resolve("數據正常 asy3....")
            }, 2000);
        }else{
            reject("asy3....")
        }
    })
    return  p;
}
Promise.all([asy3(
7),asy3(8),asy3(9)]).then( res=>{console.log(res)})

現在的理解就這麽多,夠用以後再發現問題;

ES6 Promise 用法