1.Promise的含義
Promise是異步編程的一種解決方案,比傳統的解決方案(回調函數和事件)更合理更強大。
所謂Promise,簡單說就是一個容器,裏面保存着某個未來纔會結束的事件 (通常是一個異步操作)的結果。從語法上說,Promise是一個對象,從它可以獲取異步操作的消息。
Promise對象有以下2個特點:
1.對象的狀態不受外界影響。Promise對象代表一個異步操作,有三種狀態:Pending(進行中)、Resolved(已完成)和Rejected(已失敗)。只有異步操作的結果,可以決定當前是哪一種狀態,任何其他操作都無法改變這個狀態。這也是Promise這個名字的由來,它的英語意思就是“承諾”,表示其他手段無法改變。
2.一旦狀態改變,就不會再變,任何時候都可以得到這個結果。Promise對象的狀態改變,只有兩種可能:從Pending變爲Resolved;從Pending變爲Rejected。只要這兩種情況發生,狀態就凝固了,不會再變了,會一直保持這個結果。就算改變已經發生了,你再對Promise對象田靜回調函數,也會立即得到這個結果。這與事件(Event)完全不同,事件的特點是,如果你錯過了它,再去監聽,是得不到結果的。
有了Promise對象,就可以把異步操作以同步操作的流程表達出來,避免了層層嵌套的回調函數。此外,Promise對象提供了統一的接口,使得控制異步操作更加容易。
2.基本用法
ES6規定,Promise對象是一個構造函數,用來生成Promise實例
var promise = new Promise(function(resolve,reject){ // ... some code if(/* 異步操作成功 */){ resolve(value); }else{ reject(error); } });
Promise構造函數接受一個函數作爲參數,該函數的兩個參數分別是resolve和reject。它們是兩個函數,又JavaScript引擎提供,不是自己部署。
resolve函數的作用,將Promise對象的狀態從“未完成”變成“成功”(即從Pending變爲Resolved),在異步操作成功時調用,並將異步操作的結果,作爲參數傳遞出去;
reject函數的作用是,在異步操作失敗時調用,並將異步操作報出的錯誤,作爲參數傳遞出去。
Promise實例生成以後,可以用then方法分別制定Resolved狀態和Rejected狀態的回調函數
promise.then(function(value){ // sucess },function(error){ // failure });
then
方法可以接受2個回調函數作爲參數,第二個函數是可選的,不一定要提供。這兩個函數都接受Promise對象傳出的值作爲參數。
下面是一個Promise對象的簡單例子:
function timeout(ms){ return new Promise((resolve,reject)=>{ setTimeout(resolve,ms,'done'); }); } timeout(100).then((value)=>{ console.log(value); });
上面代碼中,timeout
方法返回一個Promise實例,表示一段事件以後纔會發生的結果。過了指定的時間(ms
參數)以後,Promise實例的狀態變爲Resolved,就會觸發then
方法綁定的回調函數。
Promise新建後就會立即執行
let promise = new Promise(function(resolve,rejeact){ console.log('Promise'); resolve(); }); promise.then(function(){ console.log('Resolved'); }); console.log('Hi'); // Promise // Hi // Resolved
上面代碼中,Promise新建後立即執行,所以首先輸出的是”Promise”,然後then
方法指定的回調函數,將在當前腳本所有同步任務執行完纔會執行,所以”Resolved”最後輸出。
下面是異步加載圖片的例子:
function loadImageAsync(url){ return new Promise(function(resolve,reject){ var image = new Image(); image.onload = function(){ resolve(image); }; image.onerror = function(){ reject(new Error('Could not load image at' + url)); }; image.src = url; }); }
下面是一個用Promise對象實現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); }else{ reject(new Error(this.statusText)); } } }); return promise; }; // getJSON('/posts.jons').then(function(json){ consoloe.log(json); },function(error){ console.log('出錯了'); });
本文轉載至https://blog.csdn.net/github_26672553/article/details/53762054