本文主要和大家分享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('out of range');
}
})
}
paramTest().then((number) => {
console.log('resolved');
console.log(number);
},(reason) => {
console.log('rejected');
console.log(reason);
})登入後複製
Promise 有三種狀態：pending（進行中）、fulfilled（已成功）和rejected（已失敗）
paramTest() 範例有兩種情況：
paramTest()
的執行結果：
#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);
})登入後複製
方法其實就是.then(null, rejection) 的別名，也是用來處理失敗失敗的回呼函數，但是還有一個作用：當resolve 回呼中如果出現錯誤了，不會堵塞，會執行catch
中的回呼。
all的用法
const p = Promise.all([p1, p2, p3]);
p.then(result => {
console.log(result);
})登入後複製
方法接收一個數組參數，數組中每一項返回的都是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) => {
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><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 => {
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中文網其他相關文章！
