ES6中Promise的使用方法實(shí)例總結(jié)
本文實(shí)例講述了ES6中Promise的使用方法。分享給大家供大家參考，具體如下：
在javascript中，代碼是單線程執(zhí)行的，對于一些比較耗時(shí)的IO操作，都是通過異步回調(diào)函數(shù)來實(shí)現(xiàn)的。
但是這樣會(huì)存在一個(gè)問題，當(dāng)下一個(gè)的操作需要上一個(gè)操作的結(jié)果時(shí)，我們只能把代碼嵌到上一個(gè)操作的回調(diào)函數(shù)里，這樣一層嵌一層，最終形成回調(diào)地獄。
$.get('/login.php', function (login) {
$.get('/user.php', function (user) {
$.get('/info.php', function (info) {
//代碼就這樣一層嵌一層，不夠直觀，維護(hù)也麻煩
});
});
});
為了解決這種問題，ES6中就提供了Promise方法來解決這種問題。
Promise是一個(gè)構(gòu)造函數(shù)，通過它，我們可以創(chuàng)建一個(gè)Promise實(shí)例對象。
let p = new Promise(function (resolve, reject) {
setTimeout(() => {
console.log('OK');
resolve('OK');
}, 1000);
});
Promise構(gòu)造函數(shù)接受一個(gè)函數(shù)作為參數(shù)，這個(gè)函數(shù)有兩個(gè)參數(shù)，resolve和reject。
resolve函數(shù)是將Promise的狀態(tài)設(shè)置為fulfilled(完成)，reject函數(shù)是將Promise的狀態(tài)設(shè)置為rejected(失敗)。
上述代碼，我們并沒有進(jìn)行任何調(diào)用，當(dāng)運(yùn)行時(shí)，間隔1秒后輸出了'OK'。所以這里需要注意，我們通常使用Promise時(shí)，需要在外層再包裹一層函數(shù)。
let p = function () {
return new Promise(function (resolve, reject) {
setTimeout(() => {
console.log('OK');
resolve('OK');
}, 1000);
});
};
p();
上面的代碼p();返回的是一個(gè)Promise實(shí)例對象，Promise對象上有 then() , catch() , finally() 方法。
then方法有兩個(gè)參數(shù)，onFulfilled和onRejected，都是函數(shù)。
onFulfilled用于接收resolve方法傳遞過來的數(shù)據(jù)，onRejected用于接收reject方法傳遞過來的數(shù)據(jù)。
let p = function () {
return new Promise(function (resolve, reject) {
setTimeout(() => {
if (Math.random() > 0.5) {
resolve('OK');
} else {
reject('ERR');
}
}, 1000);
});
};
p().then(function (data) {
console.log('fulfilled', data);
}, function (err) {
console.log('rejected', err);
});
then()方法總是會(huì)返回一個(gè)Promise實(shí)例，這樣我們就可以一直調(diào)用then()。
在then方法中，你既可以return 一個(gè)具體的值 ，還可以return 一個(gè)Promise對象。
如果直接return的是一個(gè)數(shù)據(jù)，那then方法會(huì)返回一個(gè)新Promise對象，并以該數(shù)據(jù)進(jìn)行resolve。
let p = function () {
return new Promise(function (resolve, reject) {
resolve(1);
});
};
p().then(function (data) {
console.log(`第 ${data} 次調(diào)用`);
//注意這里直接返回的值
//then會(huì)創(chuàng)建一個(gè)新的Promise對象，并且以返回的值進(jìn)行resolve
//那么該值會(huì)被下面的then方法的onFulfilled回調(diào)拿到
return ++data;
}).then(function (data) {
console.log(`第 ${data} 次調(diào)用`);
return ++data;
}).then(function (data) {
console.log(`第 ${data} 次調(diào)用`);
return ++data;
});
如果返回的是一個(gè)Promise對象，請看下面代碼。
let p = function () {
return new Promise(function (resolve, reject) {
resolve(1);
});
};
p().then(function (data) {
console.log(`第 ${data} 次調(diào)用`);
return new Promise(function (resolve, reject) {
resolve(++data);
});
}).then(function (data) {
console.log(`第 ${data} 次調(diào)用`);
return new Promise(function (resolve, reject) {
resolve(++data);
});
}).then(function (data) {
console.log(`第 ${data} 次調(diào)用`);
return new Promise(function (resolve, reject) {
resolve(++data);
});
});
其實(shí)效果與直接返回值的是一樣的。
即然then()可以進(jìn)行鏈?zhǔn)讲僮鳎俏覀冏钤缰暗幕卣{(diào)地獄寫法，就可以通過它進(jìn)行改進(jìn)了。
function login() {
return new Promise(function (resolve, reject) {
$.get('/login.php', function (result) {
resolve(result);
});
});
}
function user(data) {
return new Promise(function (resolve, reject) {
$.get('/user.php', function (result) {
resolve(result);
});
});
}
function info(data) {
return new Promise(function (resolve, reject) {
$.get('/info.php', function (result) {
resolve(result);
});
});
}
login().then(function (data) {
console.log('處理login');
//把login異步處理獲取的數(shù)據(jù)，傳入到下一個(gè)處理中。
return user(data);
}).then(function (data) {
console.log('處理user');
//把user異步處理獲取的數(shù)據(jù)，傳入到下一個(gè)處理中。
return info(data);
}).then(function (data) {
console.log('處理info');
});
這樣修改后，回調(diào)地獄層層嵌套的結(jié)構(gòu)就變的清晰多了。上述代碼是偽代碼。
Promise對象還有一個(gè)catch方法，用于捕獲錯(cuò)誤，該方法與 then(null, onRejected) 等同，是一個(gè)語法糖。
let p = function () {
return new Promise(function (resolve, reject) {
resolve('開始');
});
};
p().then(function (data) {
console.log('1');
return new Promise(function (resolve, reject) {
reject('錯(cuò)誤1');
});
}).then(function (data) {
console.log('2');
return new Promise(function (resolve, reject) {
reject('錯(cuò)誤2');
});
}).then(function (data) {
console.log('3');
return new Promise(function (resolve, reject) {
reject('錯(cuò)誤3');
});
}).catch(function (reason) {
console.log(reason);
});
注意，一旦操作中有錯(cuò)誤發(fā)生，則會(huì)進(jìn)入到catch中，后面的操作將不再執(zhí)行。
Promise對象內(nèi)部自帶了try catch，當(dāng)代碼運(yùn)行時(shí)錯(cuò)誤，會(huì)自動(dòng)以錯(cuò)誤對象為值reject，并最終被catch捕獲。
let p = function () {
return new Promise(function (resolve, reject) {
resolve('開始');
});
};
p().then(function (data) {
//注意這里打印了一個(gè)未定義的變量
console.log(a);
}).catch(function (reason) {
//這里會(huì)捕獲到錯(cuò)誤
console.log('rejected');
console.log(reason);
});
Promise還提供了，all()，race()，reject()，resolve()等在構(gòu)造函數(shù)上的方法，調(diào)用這些方法并不需要實(shí)例化對象。
all()方法，可以讓我們并行的執(zhí)行異步操作，直到所有操作完成了，才執(zhí)行回調(diào)。
function fn1() {
return new Promise(function (resolve, reject) {
setTimeout(function () {
resolve('fn1');
}, 1000);
});
}
function fn2() {
return new Promise(function (resolve, reject) {
setTimeout(function () {
resolve('fn2');
}, 2000);
});
}
function fn3() {
return new Promise(function (resolve, reject) {
setTimeout(function () {
resolve('fn3');
}, 3000);
});
}
//all會(huì)等待所有操作完成，會(huì)把所有操作的結(jié)果放到一個(gè)數(shù)組中，傳給then。
Promise.all([fn1(), fn2(), fn3()]).then(function (data) {
console.log(data);
});
race()方法是誰先處理完，就以誰為準(zhǔn)，把最先處理完的結(jié)果傳給then。
function fn1() {
return new Promise(function (resolve, reject) {
setTimeout(function () {
resolve('fn1');
}, 1000);
});
}
function fn2() {
return new Promise(function (resolve, reject) {
setTimeout(function () {
resolve('fn2');
}, 2000);
});
}
function fn3() {
return new Promise(function (resolve, reject) {
setTimeout(function () {
resolve('fn3');
}, 3000);
});
}
//race是以誰先處理完，就以誰為準(zhǔn)，fn1最先處理完，那fn1的結(jié)果會(huì)傳給then
//注意這里fn2和fn3還是會(huì)執(zhí)行，不過不會(huì)進(jìn)入then了
Promise.race([fn1(), fn2(), fn3()]).then(function (data) {
console.log(data);
});
reject()方法，返回一個(gè)帶有拒絕原因reason參數(shù)的Promise對象。
// Promise.reject('錯(cuò)誤')
// 等同于
// new Promise(function(resolve, reject) {
// reject('錯(cuò)誤');
// });
let p = Promise.reject('錯(cuò)誤');
p.then(function (data) {
}).catch(function (reason) {
console.log(reason);
});
resolve()方法，根據(jù)傳入的值返回一個(gè)Promise對象。
//如果傳入的參數(shù)是普通值，則返回一個(gè)新Promise對象，并以該值resolve
let p1 = Promise.resolve('OK');
p1.then(function (data) {
console.log(data);
});
//如果傳入的參數(shù)是一個(gè)Promise對象，則原封不動(dòng)的返回該P(yáng)romise對象
let obj = new Promise(function (resolve, reject) {
resolve('我是Promise對象');
});
let p2 = Promise.resolve(obj);
p2.then(function (data) {
console.log(data);
console.log(p2 === obj);
});
//如果傳入的參數(shù)是一個(gè)thenable對象(帶有then方法)，
//會(huì)轉(zhuǎn)換成Promise對象，并執(zhí)行thenable對象的then方法
let then = {
then(resolve, reject) {
resolve('我是thenable對象');
}
}
let p3 = Promise.resolve(then);
p3.then(function (data) {
console.log(data);
});
//如果什么參數(shù)都不傳入，則返回狀態(tài)為resolved的Promise對象
let p4 = Promise.resolve();
p4.then(function (data) {
console.log(data);
}).catch(function (reason) {
console.log(reason);
});
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼運(yùn)行效果。
更多關(guān)于JavaScript相關(guān)內(nèi)容可查看本站專題：《JavaScript操作DOM技巧總結(jié)》、《JavaScript頁面元素操作技巧總結(jié)》、《JavaScript事件相關(guān)操作與技巧大全》、《JavaScript查找算法技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計(jì)有所幫助。
相關(guān)文章
這篇文章主要幫助大家理解javascript中Map代替循環(huán)，感興趣的小伙伴們可以參考一下2016-02-02
這篇文章主要介紹了一個(gè)封裝好的萬能檢測表單的方法,非常的好用，使用也很方便，這里推薦給小伙伴們。2015-01-01
js去除重復(fù)字符串兩種實(shí)現(xiàn)方法
js去除重復(fù)字符串在項(xiàng)目開發(fā)中很實(shí)用，接下來詳細(xì)介紹實(shí)現(xiàn)方法，感興趣的朋友可以參考下2013-01-01
js單頁hash路由原理與應(yīng)用實(shí)戰(zhàn)詳解
本篇文章主要介紹了js單頁hash路由原理與應(yīng)用實(shí)戰(zhàn)詳解，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-08-08
Angular組件拿不到@Input輸入屬性問題探究解決方法
最近在工作中實(shí)現(xiàn)一個(gè)feature的時(shí)候，碰到一個(gè)小問題：Angular組件拿不到@Input輸入屬性的問題，盡管對這些問題都比較了解，但是找問題是需要一個(gè)過程的，所以還是把這個(gè)問題總結(jié)記錄了下2023-01-01
Bootstrap項(xiàng)目實(shí)戰(zhàn)之子欄目資訊內(nèi)容
Bootstrap項(xiàng)目實(shí)戰(zhàn)之資訊內(nèi)容，本文主要學(xué)習(xí)制作一下子欄目資訊內(nèi)容，感興趣的小伙伴們可以參考一下2016-04-04
JavaScript返回當(dāng)前會(huì)話cookie全部鍵值對照的方法
這篇文章主要介紹了JavaScript返回當(dāng)前會(huì)話cookie全部鍵值對照的方法,涉及javascript操作cookie的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-04-04
微信小程序全局配置之tabBar實(shí)戰(zhàn)案例
tabBar相對而言用的還是比較多的,但是用起來并沒有難,下面這篇文章主要給大家介紹了關(guān)于微信小程序全局配置之tabBar的相關(guān)資料,文中通過圖文以及示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08
JavaScript中的new的使用方法與注意事項(xiàng)
JavaScript中的new的使用方法與注意事項(xiàng)...2007-05-05
如何使用proxy實(shí)現(xiàn)一個(gè)簡單完整的MVVM庫的示例代碼
這篇文章主要介紹了如何使用proxy實(shí)現(xiàn)一個(gè)簡單完整的MVVM庫的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09