JavaScript的異步處理

提到JavaScript的異步處理，也許很多人和我一樣想到利用回調(diào)函數(shù)。

例如：

firstAsync(function(data){//處理得到的 data 數(shù)據(jù)//....secondAsync(function(data2){//處理得到的 data2 數(shù)據(jù)//....thirdAsync(function(data3){//處理得到的 data3 數(shù)據(jù)//....});}); });

但是回調(diào)函數(shù)一旦嵌套層級(jí)過多，就會(huì)引發(fā)“回調(diào)地獄”的問題，而Promise作為一種異步解決方案，就可以很好的解決這個(gè)問題。

例如上面的例子用Promise實(shí)現(xiàn)的話：

firstAsync() .then(function(data){//處理得到的 data 數(shù)據(jù)//....return secondAsync(); }) .then(function(data2){//處理得到的 data2 數(shù)據(jù)//....return thirdAsync(); }) .then(function(data3){//處理得到的 data3 數(shù)據(jù)//.... });

什么是 Promise？

Promise是一個(gè)對(duì)象，用于表示一個(gè)異步操作的最終狀態(tài)(完成或失敗)，以及其返回的值。它作為ES6最重要的特性之一，目前已經(jīng)被Firefox和Chrome等主流瀏覽器所支持，具體情況可以在Can I use里查看。如果想要做瀏覽器的兼容，只需要在瀏覽器中加載Polyfill類庫即可。

Promise 的狀態(tài)

• 等待（pending）：初始狀態(tài)。
• 已完成（fulfilled）：意味著操作成功完成。
• 已失敗（rejected）：意味著操作失敗。

Promise對(duì)象的狀態(tài)只可能處于這三種之一，它的狀態(tài)改變只可能是兩種可能：從 Pending 變?yōu)?fulfilled 和從 Pending 變?yōu)?Rejected。一旦狀態(tài)發(fā)生改變，就不會(huì)再變，這也是Promise[承諾]這個(gè)名字的由來。

then 鏈?zhǔn)讲僮骱?resolve 方法

Promise.prototype.then 方法返回的是一個(gè)新的 Promise 對(duì)象，因此可以采用鏈?zhǔn)綄懛āＴ摲椒ń邮諆蓚€(gè)參數(shù)，第一個(gè)是成功的回調(diào)，第二個(gè)是失敗的回調(diào)。

下面用setTimeout模擬異步操作：

function runAsync1(){var p = new Promise(function(resolve, reject){setTimeout(function(){console.log('異步操作1執(zhí)行完畢！');resolve('異步操作1成功回調(diào)數(shù)據(jù)');}, 1000);});return p; } function runAsync2(){var p = new Promise(function(resolve, reject){setTimeout(function(){console.log('異步操作2執(zhí)行完畢!');resolve('異步操作2成功回調(diào)數(shù)據(jù)');}, 1000);});return p; }

使用 Promise.prototype.then 方法鏈?zhǔn)秸{(diào)用這兩個(gè)方法：

runAsync1() .then(function(data){console.log(data);return runAsync2(); }) .then(function(data){console.log(data); });

運(yùn)行結(jié)果如下：

你也可以在 then 方法中直接return數(shù)據(jù)而不是Promise對(duì)象：

runAsync1() .then(function(data){console.log(data);return runAsync2(); }) .then(function(data){console.log(data);return '直接返回?cái)?shù)據(jù)' }) .then(function(data){console.log(data) });

運(yùn)行結(jié)果如下：

reject 方法

上面我們通過 Promise.resolve() 把Promise的狀態(tài)置為已完成（Resolved）， 然后通過 then 方法捕捉到變化，并執(zhí)行“成功”情況的回調(diào)，而 Promise.reject() 的作用就是將Promise的狀態(tài)置為已失敗（rejected），同樣通過 then 方法來執(zhí)行“失敗”情況的回調(diào)。

function runAsync1(num){var p = new Promise(function(resolve, reject){ setTimeout(function(){console.log('異步操作1執(zhí)行完畢！');if(num < 10) {resolve('異步操作1成功回調(diào)數(shù)據(jù)');}else{reject('異步操作1失敗回調(diào)數(shù)據(jù)'); }}, 1000);});return p; }

運(yùn)行結(jié)果如下：

catch 方法

Promise.prototype.catch 和 Promise.prototype.then 方法的第二個(gè)參數(shù)一樣，用來指定reject的回調(diào)，二者都返回 promise 對(duì)象， 因此都可以被鏈?zhǔn)秸{(diào)用。

此外 catch 還可以捕獲異常：

all 方法

Promise.all(iterable) 返回一個(gè)新的promise對(duì)象，該promise對(duì)象只有在iterable參數(shù)對(duì)象里所有的promise對(duì)象都成功的時(shí)候才會(huì)觸發(fā)成功，并所有promise返回值以數(shù)組的形式返回。

以上面的 runAsync1() 和 runAsync1() 為例：

Promise .all([runAsync1(),runAsync2()]) .then(function(results){console.log(results); });

返回結(jié)果如下：

race 方法

Promise.race() 方法，race即競(jìng)賽，顧名思義，這是一個(gè)比誰跑得快的規(guī)則。

function runAsync1(){var p = new Promise(function(resolve, reject){setTimeout(function(){console.log('異步操作1執(zhí)行完畢！');resolve('異步操作1成功回調(diào)數(shù)據(jù)');}, 2000);});return p; } function runAsync2(){var p = new Promise(function(resolve, reject){setTimeout(function(){console.log('異步操作2執(zhí)行完畢!');resolve('異步操作2成功回調(diào)數(shù)據(jù)');}, 1000);});return p; } Promise .race([runAsync1(),runAsync2()]) .then(function(results){console.log(results); });

運(yùn)行結(jié)果如下：

可以看到，只要runAsync1、runAsync2中的任何一個(gè)率先改變狀態(tài)，父Promise的狀態(tài)就跟著改變。而那個(gè)率先改變狀態(tài)的子Promise的返回值，就是傳遞給父Promise的返回值。

總結(jié)

Promise的基本使用方法就是這樣，之前看過一篇文章，用做飯(cook)吃飯(eat)洗碗(wash)為例，形象地演示了Promise的用法，地址戳戳戳這里。

• 參考文檔

更多專業(yè)前端知識(shí)，請(qǐng)上 【猿2048】www.mk2048.com

總結(jié)

以上是生活随笔為你收集整理的关于ES6的Promise的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。