es6中Promise 物件基本功能與用法例項分析
本文例項講述了es6中Promise 物件基本功能與用法。分享給大家供大家參考,具體如下:
Promise 是非同步程式設計的一種解決方案,解決——回撥函式和事件
ES6 規定,Promise物件是一個建構函式,用來生成Promise例項。
下面程式碼創造了一個Promise例項。
基本用法
ES6 規定,Promise物件是一個建構函式,用來生成Promise例項。
const promise = new Promise(function(resolve,reject) { //resolve (data) 成功 //reject (error )失敗 });
Promise例項生成以後,可以用then方法分別指定resolved狀態和rejected狀態的回撥函式。
promise.then(function(value) { // success },function(error) { // err });
then方法可以接受兩個回撥函式作為引數。第一個回撥函式是Promise物件的狀態變為resolved時呼叫,第二個回撥函式是Promise物件的狀態變為rejected時呼叫。其中,第二個函式是可選的,不一定要提供。這兩個函式都接受Promise物件傳出的值作為引數。
下面是一個Promise物件的簡單例子
function fun(ms){ return new promise((res,rej) => { setTimeout(res,ms) }) } fun(100).then((val) => { console.log(val) })
promise還可以用來載入圖片
function loadImageAsync(url) { return new Promise(function(resolve,reject) { const image = new Image(); image.onload = function() { resolve(image); }; image.onerror = function() { reject(new Error('Could not load image at ' + url)); }; image.src = url; }); }
上面程式碼中,使用Promise包裝了一個圖片載入的非同步操作。如果載入成功,就呼叫resolve方法,否則就呼叫reject方法。
2,用Promise物件實現的 Ajax 操作的例子。
const getJSON = function(url) { const promise = new Promise(function(resolve,reject){ const handler = function() { if (this.readyState !== 4) { return; } if (this.status === 200) { resolve(this.response); } else { reject(new Error(this.statusText)); } }; const client = new XMLHttpRequest(); client.open("GET",url); client.onreadystatechange = handler; client.responseType = "json"; client.setRequestHeader("Accept","application/json"); client.send(); }); return promise; }; getJSON("/posts.json").then(function(json) { console.log('Contents: ' + json); },function(error) { console.error('出錯了',error); });
注意,呼叫resolve或reject並不會終結 Promise 的引數函式的執行。
Promise.prototype.finally()
finally方法用於指定不管 Promise 物件最後狀態如何,都會執行的操作。該方法是 ES2018 引入標準的。
promise .then(result => {···}) .catch(error => {···}) .finally(() => {···});
上面程式碼中,不管promise最後的狀態,在執行完then或catch指定的回撥函式以後,都會執行finally方法指定的回撥函式,finally本質上是then方法的特例。
Promise.resolve()
//有時需要將現有物件轉為 Promise 物件,Promise.resolve方法就起到這個作用。 const jsPromise = Promise.resolve($.ajax('/whatever.json'));
上面程式碼將 jQuery 生成的deferred物件,轉為一個新的 Promise 物件。
Promise.resolve等價於下面的寫法。
Promise.resolve('foo') // 等價於 new Promise(resolve => resolve('foo')) //Promise.resolve方法的引數分成四種情況。
感興趣的朋友可以使用線上HTML/CSS/JavaScript程式碼執行工具:http://tools.jb51.net/code/HtmlJsRun測試上述程式碼執行效果。
更多關於JavaScript相關內容可檢視本站專題:《JavaScript操作DOM技巧總結》、《JavaScript頁面元素操作技巧總結》、《JavaScript事件相關操作與技巧大全》、《JavaScript查詢演算法技巧總結》、《JavaScript資料結構與演算法技巧總結》、《JavaScript遍歷演算法與技巧總結》及《JavaScript錯誤與除錯技巧總結》
希望本文所述對大家JavaScript程式設計有所幫助。