Promise的基本使用方法教程

本文主要和大家分享Promise的基本使用方法教程，個人理解就是使用同步程式設計的寫法完成非同步程式設計操作。希望能幫助大家。

const promise = new Promise((resolve, reject) => {
    //some asynchronous  code
    setTimeout(() => {
        console.log('执行完成');
        resolve('some data');
    }, 2000);
});

Promise 接收一個函數作為參數，函數有兩個參數，resolve 和reject 分別表示非同步操作執行後成功的回調函數和失敗的回呼函數。

Promise 實例後馬上執行。所以通常會採用一個函數包含它

function runAsync() {
    return new Promise((resolve, reject) => {
        //some asynchronous  code
        setTimeout(() => {
            console.log('执行完成');
            resolve('some data');
        }, 2000);
    });
}
runAsync().then((data) => {
    console.log(data);//可以使用异步操作中的数据
})

runAsync() 執行完呼叫then 方法，then() 就等於我們之前寫的回調函數。

resolve 和reject

function paramTest(){
    return new Promise((resolve, reject) => {
        let number = Math.ceil(Math.random() * 10);
        if (number < 5) {
            resolve(number);
        }else{
            reject(&#39;out of range&#39;);
        }
    })
}
paramTest().then((number) => {
    console.log('resolved');
    console.log(number);
},(reason) => {
    console.log('rejected');
    console.log(reason);
})

Promise 有三種狀態：pending（進行中）、fulfilled（已成功）和rejected（已失敗）

paramTest() 範例有兩種情況：

• 當number < 5 時，我們認為是成功情況，將狀態從pending 變成fulfilled

• ##當

  number >= 5 時，我們認為是失敗情況，將狀態從pending 變成rejected

##所以

paramTest()

的執行結果：

fulfilled

rejected

#resolved

rejectednumberout of range

##catch的用法

我們繼續呼叫paramTest 方法舉例

paramTest().then((number) => {
    console.log('resolved');
    console.log(number);
    console.log(data); //data为未定义
},(reason) => {
    console.log('rejected');
    console.log(reason);
}).catch((err) => {
    console.log(err);
})

catch 方法其實就是.then(null, rejection) 的別名，也是用來處理失敗失敗的回呼函數，但是還有一個作用：當resolve 回呼中如果出現錯誤了，不會堵塞，會執行catch

中的回呼。

all的用法

const p = Promise.all([p1, p2, p3]);

p.then(result => {
    console.log(result);
})

all 方法接收一個數組參數，數組中每一項返回的都是Promise 對象，只有當p1, p2, p3 都執行完才會進入then 回呼。 p1, p2, p3 傳回的資料會以一個陣列的形式傳到 then

回呼。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">const p1 = new Promise((resolve, reject) =&gt; {     setTimeout(() =&gt; {         resolve('p1');     }, 1000); }) .then(result =&gt; result) .catch(e =&gt; e); const p2 = new Promise((resolve, reject) =&gt; {     setTimeout(() =&gt; {         resolve('p2');     }, 3000); }) .then(result =&gt; result) .catch(e =&gt; e); Promise.all([p1, p2]) .then(result =&gt; console.log(result)) .catch(e =&gt; console.log(e)); //3秒后输出['p1', 'p2']</pre><div class="contentsignin">登入後複製</div></div>race的用法<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">const p = Promise.race([p1, p2, p3]); p.then(result =&gt; {     console.log(result); })</pre><div class="contentsignin">登入後複製</div></div>

race

的用法與

all

如出一轍，不同的是

all

方法需要參數的每一項都回傳成功了才會執行

then
;而

race

則是只要參數中的某一項回傳成功就執行then 回呼。

以下是

race 的例子，和 all

方法對比，可以看到回傳值有很明顯的差異。

const p1 = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('p1');
    }, 1000);
})
.then(result => result)
.catch(e => e);

const p2 = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('p2');
    }, 3000);
})
.then(result => result)
.catch(e => e);

Promise.race([p1, p2])
.then(result => console.log(result))
.catch(e => console.log(e));
//1秒后输出 'p1'

點擊這裡查看本文中實例原始碼

###resloader是基於Promise實現的一個圖片預先載入並展示載入進度的插件，猛戳這裡了解詳情。如果感覺還可以的話，歡迎star######相關推薦：############使用Promise簡化回呼############微信小程式Promise簡化回呼實例分享############jQuery的Promise如何正確使用#######

以上是Promise的基本使用方法教程的詳細內容。更多資訊請關注PHP中文網其他相關文章！