首頁  >  文章  >  web前端  >  Promise的基本使用方法教程

Promise的基本使用方法教程

小云云
小云云原創
2018-02-28 13:59:273537瀏覽

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

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

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

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

回呼。 <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>race的用法<pre class="brush:php;toolbar:false">const p = Promise.race([p1, p2, p3]); p.then(result =&gt; {     console.log(result); })</pre>

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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn