ES6新特性六：promise對象實例詳解
本文實例講述了ES6新特性之promise對象。分享給大家供大家參考，具體如下：
1. promise 介紹
它是一個對象，也就是說與其他JavaScript對象的用法，沒有什么兩樣；其次，它起到代理作用（proxy），充當(dāng)異步操作與回調(diào)函數(shù)之間的中介。它使得異步操作具備同步操作的接口，使得程序具備正常的同步運(yùn)行的流程，回調(diào)函數(shù)不必再一層層嵌套。
它的思想是，每一個異步任務(wù)立刻返回一個Promise對象，由于是立刻返回，所以可以采用同步操作的流程。這個Promises對象有一個then方法，允許指定回調(diào)函數(shù)，在異步任務(wù)完成后調(diào)用。
異步操作f1返回一個Promise對象，它的回調(diào)函數(shù)f2寫法如下
(new Promise(f1)).then(f2);
2. promise 對象的三種狀態(tài)
① 異步操作未完成（pending）
② 異步操作已完成（resolved）
③ 異步操作失?。╮ejected）
3. 工作過程
Promise對象使用then方法添加回調(diào)函數(shù)。then方法可以接受兩個回調(diào)函數(shù)，第一個是異步操作成功時（變?yōu)閞esolved狀態(tài)）時的回調(diào)函數(shù)，第二個是異步操作失?。ㄗ?yōu)閞ejected）時的回調(diào)函數(shù)（可以省略）。一旦狀態(tài)改變，就調(diào)用相應(yīng)的回調(diào)函數(shù)，這兩個回調(diào)函數(shù)都接受異步操作傳回的值作為參數(shù)。
promise.then( console.log, console.error );
4. then 的鏈?zhǔn)绞褂?/strong>
① 首先then方法返回的一個新的promise對象，因此可以采用鏈?zhǔn)綄懛ā?/p>
② then方法的第一個參數(shù)是Resolved狀態(tài)的回調(diào)函數(shù)，第二個參數(shù)（可選）是Rejected狀態(tài)的回調(diào)函數(shù)。
③ 如下，promise的狀態(tài)一旦變?yōu)閞esolved，就依次調(diào)用后面每一個then指定的回調(diào)函數(shù)，每一步都必須等到前一步完成，才會執(zhí)行。最后一個then方法的回調(diào)函數(shù)console.log和console.error，用法上有一點重要的區(qū)別。console.log只顯示回調(diào)函數(shù)step3的返回值，console.error可以顯示step1、step2、step3之中任意一個發(fā)生的錯誤，Promises對象的錯誤有傳遞性。
promise .then(step1) .then(step2) .then(step3) .then( console.log, console.error );
5. promise 對象的使用
var promise = new Promise(function(resolve, reject) { // promise的構(gòu)造函數(shù)，Promise構(gòu)造函數(shù)接受一個函數(shù)作為參數(shù)，該函數(shù)的兩個參數(shù)分別是resolve和reject
// 異步操作的代碼
if (/* 異步操作成功 */){
resolve(value);//將異步的操作結(jié)果作為參數(shù)傳遞出去
} else {
reject(error);
}
});
其中resolve和reject它們是兩個函數(shù)，由JavaScript引擎提供，不用自己部署。
resolve函數(shù)的作用：將Promise對象的狀態(tài)從“未完成”變?yōu)椤俺晒Α保磸腜ending變?yōu)镽esolved），在異步操作成功時調(diào)用，并將異步操作的結(jié)果，作為參數(shù)傳遞出去；
reject函數(shù)的作用：將Promise對象的狀態(tài)從“未完成”變?yōu)椤笆 保磸腜ending變?yōu)镽ejected），在異步操作失敗時調(diào)用，并將異步操作報出的錯誤，作為參數(shù)傳遞出去。
① 下面是一個用Promise對象實現(xiàn)的Ajax操作的例子
var getJSON = function(url) {
var promise = new Promise(function(resolve, reject){
var client = new XMLHttpRequest();
client.open("GET", url);
client.onreadystatechange = handler;
client.responseType = "json";
client.setRequestHeader("Accept", "application/json");
client.send();
function handler() {
if (this.readyState !== 4) {
return;
}
if (this.status === 200) {
resolve(this.response);//會將參數(shù)傳遞給回調(diào)函數(shù)
} else {
reject(new Error(this.statusText));
}
};
});
return promise;
};
getJSON("/posts.json").then(function(json) {
console.log('Contents: ' + json);
}, function(error) {
console.error('出錯了', error);
});
② resolve函數(shù)的參數(shù)除了正常的值以外，還可能是另一個Promise實例，即一個異步操作的結(jié)果是返回另一個異步操作。
var p1 = new Promise(function (resolve, reject) {
// ...
});
var p2 = new Promise(function (resolve, reject) {
// ...
resolve(p1);
})
6.Promise.prototype.catch()
① 一個 Promise 對象,如果異步操作拋出錯誤,狀態(tài)就會變?yōu)镽ejected,就會調(diào)用catch方法指定的回調(diào)函數(shù),處理這個錯誤。
promise.then(function(posts) {
// ...
}).catch(function(error) {
// 處理 getJSON 和 前一個回調(diào)函數(shù)運(yùn)行時發(fā)生的錯誤
console.log('發(fā)生錯誤！', error);
});
② 另外,then方法指定的回調(diào)函數(shù),如果運(yùn)行中拋出錯誤，也會被catch方法捕獲。
var promise = new Promise(function(resolve, reject) {
throw new Error('test');
});
promise.catch(function(error) {
console.log(error);
});
// Error: test
③ 另外兩種寫法
// 寫法一
var promise = new Promise(function(resolve, reject) {
try {
throw new Error('test');
} catch(e) {
reject(e);
}
});
promise.catch(function(error) {
console.log(error);
});
// 寫法二
var promise = new Promise(function(resolve, reject) {
reject(new Error('test'));//reject方法的作用，等同于拋出錯誤
});
promise.catch(function(error) {
console.log(error);
});
④ Promise 在resolve語句后面再拋出錯誤不會被捕獲。因為 Promise 的狀態(tài)一旦改變,就永久保持該狀態(tài),不會再變了。
var promise = new Promise(function(resolve, reject) {
resolve('ok');
throw new Error('test');
});
promise
.then(function(value) { console.log(value) })
.catch(function(error) { console.log(error) });
// ok
7 Promise.all()
參數(shù)為Promise 對象的數(shù)組；將多個Promisre 對象包裝成一個新的Promise 對象，如果數(shù)組中不是Promise 對象，就會自動調(diào)用 Promise.resolve方法，將參數(shù)轉(zhuǎn)為Promise實例，再進(jìn)一步處理。（Promise.all方法的參數(shù)可以不是數(shù)組，但必須具有Iterator接口，且返回的每個成員都是Promise實例）
var p = Promise.all(promises).then(function (posts) {
// ...
}).catch(function(reason){
// ...
});
① 只要promises之中有一個狀態(tài)變?yōu)閞ejected，p的狀態(tài)就變成rejected，此時第一個被reject的實例的返回值，會傳遞給p的回調(diào)函數(shù)。
② 如果全部都變?yōu)閞esolved；此時 promises 數(shù)組中所有對象的返回值組成一個數(shù)組，傳遞給p的回調(diào)函數(shù)。
8 Promise.resolve()
將現(xiàn)有對象轉(zhuǎn)為 Promise對象，Promise.resolve方法就起到這個作用。
Promise.resolve('foo')
// 等價于
new Promise(resolve => resolve('foo'))
① 參數(shù)為Priomise 對象，Promise.resolve() 不做任何處理。
② 參數(shù)是一個具有 then 方法的對象：Promise.resolve方法會將這個對象轉(zhuǎn)為Promise對象，然后就立即執(zhí)行thenable對象的then方法。
let thenable = {
then: function(resolve, reject) {
resolve(42);
}
};
let p1 = Promise.resolve(thenable);//p1為一個狀態(tài)已經(jīng)是resolved 的promise對象.
p1.then(function(value) {
console.log(value); // 42
});
③ 參數(shù)不是具有then方法的對象，或根本就不是對象
該參數(shù)變?yōu)樯傻?Promise 對象的 resolve() 的參數(shù)。
var p = Promise.resolve('Hello');//Hello 會傳遞給 p 的resolve()
p.then(function (s){
console.log(s)
});
// Hello
希望本文所述對大家ECMAScript程序設(shè)計有所幫助。
- ES6中非常實用的新特性介紹
- JavaScript ES6的新特性使用新方法定義Class
- JavaScript中的Reflect對象詳解(ES6新特性)
- 深入淺出ES6新特性之函數(shù)默認(rèn)參數(shù)和箭頭函數(shù)
- 簡單談?wù)凟S6的六個小特性
- ES6新特性之Symbol類型用法分析
- ES6(ECMAScript 6)新特性之模板字符串用法分析
- ES6新特性之變量和字符串用法示例
- ES6新特性之模塊Module用法詳解
- ES6新特性之字符串的擴(kuò)展實例分析
- ES6新特性二：Iterator(遍歷器)和for-of循環(huán)詳解
- ES6新特性七：數(shù)組的擴(kuò)充詳解
- ES6新特性八：async函數(shù)用法實例詳解
- ES6新特性之類(Class)和繼承(Extends)相關(guān)概念與用法分析
- 讓微信小程序支持ES6中Promise特性的方法詳解
- ES6新特性：使用export和import實現(xiàn)模塊化詳解
- es6新特性之 class 基本用法解析
- ES6 13個新特性總結(jié)
相關(guān)文章
JS不同地圖坐標(biāo)系經(jīng)緯度轉(zhuǎn)換方法(天地圖、高德地圖、百度地圖、騰訊地圖)
這篇文章主要給大家介紹了關(guān)于JS不同地圖坐標(biāo)系經(jīng)緯度轉(zhuǎn)換的相關(guān)資料,分別包括天地圖、高德地圖、百度地圖、騰訊地圖,需要的朋友可以參考下2024-07-07
使用Math.max,Math.min獲取數(shù)組中的最值實例
下面小編就為大家?guī)硪黄褂肕ath.max,Math.min獲取數(shù)組中的最值實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-04-04
基于JavaScript實現(xiàn)生成名片、鏈接等二維碼
本文使用javascript技術(shù)實現(xiàn)生成名片、鏈接等二維碼的代碼，代碼簡單易懂并附有注釋，需要的朋友可以參考下本文2015-09-09
javascript document.compatMode兼容性
文檔模式在開發(fā)中貌似很少用到，最常見的是就是在獲取頁面寬高的時候，比如文檔寬高，可見區(qū)域?qū)捀叩取?/div> 2010-02-02
微信小程序是一種不需要下載安裝即可使用的應(yīng)用,它實現(xiàn)了應(yīng)用“觸手可及”的夢想,用戶掃一掃或者搜一下即可打開應(yīng)用,下面這篇文章主要給大家介紹了關(guān)于如何通過一文讀懂微信小程序頁面導(dǎo)航的相關(guān)資料,需要的朋友可以參考下2022-11-11
一段js代碼遇到一個bug，由于中間的隱式全局變量造成的，通過谷歌瀏覽器的js調(diào)試器才找到問題所在，下面將代碼與大家分享下2014-04-04
模塊熱替換(HMR)的作用是，在應(yīng)用運(yùn)行時，無需刷新頁面，便能替換、增加、刪除必要的模塊，本篇文章主要介紹了webpack熱模塊替換（HMR）/熱更新的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
本篇文章主要介紹了微信小程序登錄換取token的教程，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
這篇文章主要為大家詳細(xì)介紹了JavaScript的setter與getter方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-11-11
詳解用原生JavaScript實現(xiàn)jQuery的某些簡單功能
本篇文章主要對用原生JavaScript實現(xiàn)jQuery的某些簡單功能進(jìn)行詳細(xì)全面的講解，具有很好的參考價值，需要的朋友一起來看下吧2016-12-12最新評論