1. 程式人生 > >Promise—javascript非同步操作的潮流

Promise—javascript非同步操作的潮流

對讀書學知識感興趣的同學,可以關注一下我業餘時間做的公眾號“精粹微閱讀”(搜尋微信號"jcwyd2016"或者直接搜尋公眾號名字),和讀書有關的,更新經濟、政治、運動、法律、設計、溝通、管理等等各個方面的書籍知識總結~感興趣的同學歡迎來看一下喲~

一、Javascript中的非同步

在Javascript中,經常需要使用非同步操作。一般的非同步實現方法有三種,包括:

使用回撥函式

事件監聽

釋出/訂閱模式

這三種實現非同步的方法很常用,但是都存在一些問題。例如,使用回撥函式方法實現非同步時,如果存在多個需要非同步的操作,會導致程式碼特別混亂,維護困難。

Promise是一種全新的實現非同步的方式。最開始在社群首先出現Promise模式,後來被一些主流瀏覽器支援原生物件,現在已經是ES6的標準了。也就是說,現在可以使用ES6的語言,使用原生Promise物件,來實現非同步了。

二、Promise的原理

所謂 Promise,就是一個物件,用來傳遞非同步操作的訊息。它代表了某個未來才會知道結果的事件(通常是一個非同步操作),並且這個事件提供統一的 API,可供進一步處理。
Promise 物件有以下兩個特點。
1.物件的狀態不受外界影響。Promise 物件代表一個非同步操作,有三種狀態:Pending(進行中)、Resolved(已完成,又稱 Fulfilled)和 Rejected(已失敗)。只有非同步操作的結果,可以決定當前是哪一種狀態,任何其他操作都無法改變這個狀態。這也是 Promise 這個名字的由來,它的英語意思就是「承諾」,表示其他手段無法改變。
2.一旦狀態改變,就不會再變,任何時候都可以得到這個結果。Promise 物件的狀態改變,只有兩種可能:從 Pending 變為 Resolved 和從 Pending 變為 Rejected。只要這兩種情況發生,狀態就凝固了,不會再變了,會一直保持這個結果。

三、如何在ES6中使用Promise

ES6種提供了內建的Promise物件,幫助我們實現Promise模式。接下來,直接通過一個示例程式碼來學習Promise的用法。

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物件編寫的非同步載入圖片的例子。這段程式碼的功能是:非同步載入圖片,當圖片載入成功時,為圖片指定src屬性,如果圖片載入失敗,就丟擲異常。

首先,要想讓一個方法能夠稱為Promise模式的,需要讓它返回一個Promise物件,這樣方便後面的鏈式呼叫。上面的程式碼中,就返回一個新建的Promise物件。Promise物件的初始化需要傳入一個回撥函式,這個回撥函式有兩個函式引數:resolve表示將狀態從等待變為完成,reject表示將狀態從等待變為失敗。這兩個函式是Promise物件內建的函式,不需要我們定義,只要呼叫就可以了。

接下來,進行圖片的非同步載入。當通過image.onload進行監聽,如果圖片成功載入,就呼叫resolve()方法,將狀態變為完成態。如果監聽到error,就呼叫reject()方法,將狀態變為終止態。

方法定義完了,如何呼叫呢?每一個Promise物件都有一個then方法,then方法傳入兩個函式,第一個函式當狀態由等待變為完成時執行(也就是呼叫了resolve()方法之後執行),第二個函式當狀態由等待變為終止時執行(也就是呼叫了reject()方法之後執行)。第二個函式引數可以省略。也就是說,不論Promise的狀態變成什麼樣,我們都能通過then()方法捕獲它,並進行不同的處理,從而達到非同步的效果。

上面介紹的只是Promise模式的皮毛,後續還會對Promise物件進行更深入的學習。靈活運用Promise,能夠很大提升我們js程式碼的效能。感興趣的同學可以加我的qq號:3365250280多多交流~

什麼都懂一點,生活才多彩些。這是一個帶你讀書學知識的公眾號~