理解 Promise

Promise 簡介:

一個 Promise 有3個狀態。他們分別是：

1. Promise 是待定的（pending）： 不確定當前任務是否滿足條件
2. Promise 是已解決的（resolved）：當前任務滿足條件
3. Promise 是被拒絕的（rejected）: 當前任務不滿足條件

創建一個 Promise

/* ES5 */ var Result = false; 
// Promise
var isFulfil = new Promise(
function (resolve, reject) {
if (fulfil) {
var value = 1; (result用value表示)
resolve
 
(value); // 完成了
} else {
var reason = new Error(‘不滿足條件‘);（result用reason表示）
reject(reason); // reject
}

}
);

1. 我們用一個布爾值isfulfil，來定義條件是否滿足。

2. 我們有一個命名為isfulfil的Promise。這個 Promise 可以是 已完成的（resolved）（滿足條件）或者 被拒絕的（rejected） （沒有滿足條件）。

3. 這裏有一個標準的語法來新建一個 Promise，參考MDN 文檔，一個 promise 語法看上去像這樣。

支持的快捷鍵有：

// promise 語法看上去像這樣
 

new Promise(/* executor*/ function (resolve, reject) { ... } );

1. 當條件滿足， promise調用 resolve 函數和 結果變量value。如果不滿足用 reject 函數和一個理由（reason）reject(reason)；

使用 Promise

現在，我們有一個 Promise。來看看怎麽使用它：

/* ES5 */
...
// 調用我們的 Promise
var p = function () {
isFulfil
.then(function (fulfilled) {
// 滿足條件
console.log(fulfilled);
 

// output: value
})
.catch(function (error) {
// 不滿足條件
console.log(error.message);
// output: ‘reson‘
});
};
p();

1. 我們有一個名為p的函數。在這個函數中，我們會使用 Promise isFulfil。
2. 一旦 Promise 被解決（resolved）或者被拒（rejected），我門希望采取些措施。我們用 .then 和 .catch 來實現。
3. 在我們的例子中，.then 之中有個 function(fulfilled) { ... } 。fulfilled 是什麽？fulfilled 就是是你傳入 Promise 的 resolve(your_success_value).因此，在我們例子中就是 value。
4. 我們在 .catch 中有 function(error){ ... }。error 是什麽？正如你猜測的，error 正是你傳入 Promise 中的 reject(your_fail_value)。因此，在我們的例子中就是 reason。

讓我們看看例子運行之後的結果吧！

Demo

串聯 Promise

Promiss 是可串聯的。

也就是說，一個條件滿足了可以判斷下一個條件是否滿足

這就是另一個 Promise 啦。我們來寫一個！

說明:

• 在這個例子中，你可能意識到我們沒有調用 reject。因為這個是可選的參數。

• 我們可以簡化這個樣例就像用 Promise.resolve 代替。

// 簡略
...

// 第二個 promise
var second = function (value) {
var message = ‘second new value‘;
return Promise.resolve(message);
};

讓我們串聯 Promise。你，寶寶只能在isFulfil Promise 實現之後，才能開始 second Promise。

...
// 調用 Promise
var p = function () {
isFulfil
.then(second) // 在這裏串聯
.then(function (fulfilled) {
console.log(fulfilled);
// output: ‘second new value‘
})
.catch(function (error) {
// 不滿足條件
console.log(error.message);
// output: ‘不滿足條件‘
});
};

Promises 是異步的

Promise 是異步的。讓我們在調用 Promise 之前和之後各打印一個信息。

// 調用我們的Ppromise
var p = function () {
console.log(‘判斷條件之前‘); // 運行之前打印
isFulfil
.then(second)
.then(function (fulfilled) {
console.log(fulfilled);
})
.catch(function (error) {
console.log(error.message);
});
console.log(‘判斷條件之後‘); // 運行之後打印
}

輸出順序是這樣的：

1. 判斷條件之前
2. 判斷條件之後
3. second new value

因為JavaScript不等判斷條件。

第一次條件判斷的時候等待著p的承諾（promise 這個我們稱之為 異步（asynchronous）, 代碼不會因為阻塞或等待結果而不運行. 任何想等待 Promise 之後再運行的, 你需要把他們放入 .then

Promise筆記