Promise 其實很簡單
摘要：
A Promise is an object representing the eventual completion or failure of an asynchronous operation. Essentially, a promise is a returned object yo...
A Promise is an object representing the eventual completion or failure of an asynchronous operation. Essentially, a promise is a returned object you attach callbacks to, instead of passing callbacks into a function.
Promise 是一個表示非同步操作最終完成或失敗的物件，可以直接向其添加回調函式，而不必將回調函式傳進方法。
Promise 有三種狀態：Pending、Resolved、Rejected。初始是 Pendding 狀態，表示非同步操作正在執行。呼叫 resolve 方法可以讓其狀態從 Pendding 變為 Resolved，此時 then 方法中的第一個回撥函式被觸發；呼叫 reject 方法可以讓其狀態從 Pending 變為 Rejected 狀態，此時 then 方法中的第二個回撥函式被觸發。
Promise 的簡單使用
使用方法
const promise = new Promise(function(resolve, reject) {
// 非同步操作，返回之後
// 判斷非同步操作的結果
if (/* 成功 */) {
resolve("Resolved");
} else {reject("Rejected");
}
})
promise.then(onResolved, onRejected)
.catch(e => handleError(e));
// 非同步操作成功的回撥
function onResolved(result) {
console.log(result);
}
// 非同步操作失敗的回撥
function onRejected(reason) {
console.log(reason);
}
// 異常處理函式
function handleError(e) {
throw new Error("Error");
}
複製程式碼
Promise 封裝 XMLHttpRequest
看下面一個封裝 XMLHttpRequest 物件的例子：
const getJSON = function (url) {
const promise = new Promise(function(resolve, reject){
const handler = function () {
if (this.readyState !== 4) {
return;
}
if (this.status === 200) {
resolve(this.response);
} else {
reject(new Errer(this.statusText));
}
};
const client = new XMLHttpRequest();
client.open("GET", url);
client.onreadystatechange = handler;
client.responseType = "json";
client.setRequestHeader("Accept", "application/json");
client.send();
});
};
getJSON("posts.json").then(function(json){
console.log('Contents: ' + json);
}, function(error){
console.log('出錯了', error);
});
複製程式碼
鏈式呼叫
function taskA() {
console.log("Task A");
}
function taskB() {
console.log("Task B");
}
function onRejected(error) {
console.log("Catch Error: A or B", error);
}
var promise = Promise.resolve();
promise
.then(taskA)
.then(taskB)
.catch(onRejected) // 捕獲前面then方法中的異常
複製程式碼
Promise 的靜態方法 all
All 方法用於多個獨立的非同步操作，對多個非同步操作的結果做彙總。
const p1 = new Promise((resolve, reject) => {
resolve(1);
})
const p2 = new Promise((resolve, reject) => {
resolve(2);
});
const p3 = new Promise((resolve, reject) => {
resolve(3);
});
Promise.all([p1, p2, p3]).then(data => {
console.log(data); //[1, 2, 3] 結果順序和promise例項陣列順序是一致的
}, err => {
console.log(err);
});
複製程式碼
Promise 的靜態方法 race
Promise.race 只要有一個 Promise 物件進入 Resolved 或 Rejected 狀態，Promise 就進入相應的狀態。
function timerPromisefy(delay) {
return new Promise(function (resolve, reject) {
setTimeout(function () {
resolve(delay);
}, delay);
});
}
Promise.race([
timerPromisefy(10),
timerPromisefy(20),
timerPromisefy(30)
]).then(function (values) {
console.log(values); // 10
});
複製程式碼
說白了，Promise 就是一個包含了非同步操作結果的物件，它可以根據結果來決定該執行哪個回撥函式。