本文主要和大家分享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()
就等於我們之前寫的回調函數。
function paramTest(){ return new Promise((resolve, reject) => { let number = Math.ceil(Math.random() * 10); if (number < 5) { resolve(number); }else{ reject('out of range'); } }) } 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
的執行結果:
rejected | |
---|---|
#resolvedrejected
number
out of range
中的回呼。 all的用法我們繼續呼叫
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
的用法與const p = Promise.all([p1, p2, p3]); p.then(result => { console.log(result); })all
方法接收一個數組參數,數組中每一項返回的都是
Promise對象,只有當
p1, p2, p3都執行完才會進入
then回呼。
p1, p2, p3傳回的資料會以一個陣列的形式傳到
then回呼。
race<pre class="brush:php;toolbar:false">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.all([p1, p2]) .then(result => console.log(result)) .catch(e => console.log(e)); //3秒后输出['p1', 'p2']</pre>
race的用法<pre class="brush:php;toolbar:false">const p = Promise.race([p1, p2, p3]); p.then(result => { console.log(result); })</pre>
all
如出一轍,不同的是all
方法需要參數的每一項都回傳成功了才會執行then
;而
則是只要參數中的某一項回傳成功就執行then 回呼。
以下是race 的例子,和 all
方法對比,可以看到回傳值有很明顯的差異。 ###resloader是基於Promise實現的一個圖片預先載入並展示載入進度的插件,猛戳這裡了解詳情。如果感覺還可以的話,歡迎star######相關推薦:############使用Promise簡化回呼############微信小程式Promise簡化回呼實例分享############jQuery的Promise如何正確使用#######以上是Promise的基本使用方法教程的詳細內容。更多資訊請關注PHP中文網其他相關文章!