本文實例講述了ES6 Promise對象的應用。分享給大家供大家參考，具體如下：
The Promise object represents the eventual completion (or failure) of an asynchronous operation, and its resulting value.
Promise 對象用于一個異步操作的最終完成（或失敗）及其結果值的表示。簡單點說，它就是用于處理異步操作的，異步處理成功了就執行成功的操作，異步處理失敗了就捕獲錯誤或者停止后續操作。
在promise之前處理異步回調的方式
function asyncFun(a,b,callback) { setTimeout(function () { callback(a+b); },200); } asyncFun(1,2, function (res) { if(res > 2) { asyncFun(res, 2, function (res) { if(res > 4) { asyncFun(res, 2, function (res) { console.log('ok'); console.log(res); }) } }) } });從上面可以看出所謂的”回調地獄”的可怕
使用promise來優雅的處理異步
function asyncFun(a,b) { return new Promise(function (resolve, reject) { setTimeout(function() { resolve(a + b); },200); })}asyncFun(1,2).then(function (res) { if(res > 2) { return asyncFun(res, 2); }}).then(function (res) { if(res > 4) { return asyncFun(res, 2); }}).then(function (res) { console.log('ok'); console.log(res);}).catch(function (error) { console.log(error);});使用promise處理內部異常的舉例
function asyncFun(a,b) { return new Promise(function (resolve, reject) { // 模擬異常判斷 if(typeof a !== 'number' || typeof b !== 'number') { reject(new Error('no number')); } setTimeout(function() { resolve(a + b); },200); })}asyncFun(1,2).then(function (res) { if(res > 2) { return asyncFun(res, 2); }},function (err) { console.log('first err: ', err);}).then(function (res) { if(res > 4) { return asyncFun(res, 'a'); }},function (err) { console.log('second err: ', err);}).then(function (res) { console.log('ok'); console.log(res);},function (err) { console.log('third err: ', err);});從上面可以看出通過then的第二個回調函數處理promise對象中的異常，通過reject返回異常的promise對象
通過catch統一處理錯誤，通過finally執行最終必須執行的邏輯
function asyncFun(a,b) { return new Promise(function (resolve, reject) { // 模擬異常判斷 if(typeof a !== 'number' || typeof b !== 'number') { reject(new Error('no number')); } setTimeout(function() { resolve(a + b); },200); })}asyncFun(1,2).then(function (res) { if(res > 2) { return asyncFun(res, 2); }}).then(function (res) { if(res > 4) { return asyncFun(res, 'a'); }}).then(function (res) { console.log('ok'); console.log(res);}).catch(function (error) { console.log('catch: ', error);}).finally(function () { console.log('finally: ', 1+2);});通過Promise.all()靜態方法來處理多個異步
function asyncFun(a,b) { return new Promise(function (resolve, reject) { setTimeout(function() { resolve(a + b); },200); })}var promise = Promise.all([asyncFun(1,2), asyncFun(2,3), asyncFun(3,4)])promise.then(function (res) { console.log(res); // [3, 5, 7]});通過Promise.race()靜態方法來獲取多個異步中最快的一個
function asyncFun(a,b,time) { return new Promise(function (resolve, reject) { setTimeout(function() { resolve(a + b); },time); })}var promise = Promise.race([asyncFun(1,2,10), asyncFun(2,3,6), asyncFun(3,4,200)])promise.then(function (res) { console.log(res); // 5});通過Promise.resolve() 靜態方法來直接返回成功的異步對象
var p = Promise.resolve('hello');p.then(function (res) { console.log(res); // hello});等同于，如下：
var p = new Promise(function (resolve, reject) { resolve('hello2');})p.then(function (res) { console.log(res); // hello2});通過Promise.reject() 靜態方法來直接返回失敗的異步對象
var p = Promise.reject('err')p.then(null, function (res) { console.log(res); // err});等同于，如下：
var p = new Promise(function (resolve, reject) { reject('err2');})p.then(null, function (res) { console.log(res); // err});通過一個小例子來測試Promise在面向對象中應用
'use strict';class User{ constructor(name, password) { this.name = name; this.password = password; } send() { let name = this.name; return new Promise(function (resolve, reject) { setTimeout(function () { if(name === 'leo') { resolve('send success'); }else{ reject('send error'); } }); }); } validatePwd() { let pwd = this.password; return new Promise(function (resolve, reject) { setTimeout(function () { if(pwd === '123') { resolve('validatePwd success'); }else{ reject('validatePwd error'); } }); }) }}let user1 = new User('Joh');user1.send() .then(function (res) { console.log(res); }) .catch(function (err) { console.log(err); });let user2 = new User('leo');user2.send() .then(function (res) { console.log(res); }) .catch(function (err) { console.log(err); });let user3 = new User('leo', '123');user3.validatePwd() .then(function (res) { return user3.validatePwd(); }) .then(function (res) { console.log(res); }) .catch(function(error) { console.log(error); });let user4 = new User('leo', '1234');user4.validatePwd() .then(function (res) { return user4.validatePwd(); }) .then(function (res) { console.log(res); }) .catch(function(error) { console.log(error); });希望本文所述對大家JavaScript程序設計有所幫助。
新聞熱點
疑難解答
