1. 程式人生 > 程式設計 >es6中Promise 物件基本功能與用法例項分析

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程式設計有所幫助。