ES6之Promise基本用法

1.Promise相關概念

      Promise 是異步編程的一種解決方案,比傳統的解決方案(回調函數和事件)更合理和更強大。它由社區最早提出和實現,ES6將其寫進了語言標準,統一了語法,原生提供了Promise對象。

      所謂Promise ,簡單說就是一個容器,裏面保存着某個未來纔會結束的事件(通常是一個異步操作)的結果。從語法上說,Promise是一個對象,從它可以獲取異步操作的消息。

      有三種狀態:Pending(進行中),Fulfilled(已成功)和Rejected(已失敗)。

      Promise對象的狀態改變,只有兩種可能:從Pending變爲Fulfilled或者從Pending變爲Rejected。

      它有以下兩個特點:

      1.1 對象的狀態不受外界影響;

      1.2 一旦狀態改變就不會再變,任何時候都可以得到這個結果。

2.基本用法

      2.1 ES6規定,Promise對象是一個構造函數,用來生成Promise實例。話不多說,上代碼。

在這裏插入圖片描述

      可以看出,Promise構造函數接受一個函數作爲參數,該函數的兩個參數分別是resolve和reject。它們是兩個函數,由JS引擎提供,不用自己部署。

      resolve函數的作用是,將Promise對象的狀態從“未完成”變爲“成功”(即從 pending 變爲 resolved),在異步操作成功時調用,並將異步操作的結果,作爲參數傳遞出去;

      reject函數的作用是,將Promise對象的狀態從“未完成”變爲“失敗”(即從 pending 變爲 rejected),在異步操作失敗時調用,並將異步操作報出的錯誤,作爲參數傳遞出去。

      2.2 Promise 實例生成以後,可以用then 方法分別指定resolved狀態和rejected狀態的回調函數。

在這裏插入圖片描述

      可以看出,then方法接受兩個回調函數作爲參數。第一個回調函數是Promise對象的狀態變爲Resolved時調用,第二個回調函數是變爲Rejected時調用,執行“失敗”情況的回調,更好地進行錯誤捕獲,可選。

      2.3 不過不推薦上面的寫法,then的第二個回調函數用catch代替,這樣更接近同步的try/catch。

在這裏插入圖片描述

3.鏈式操作的用法

      then和catch均返回Promise,因此我們可以將 then 的調用不停地串連起來,其中 then 返回的 promise 裝載了由調用返回的值。這也是其優勢,解決回調地獄(Callback Hell)問題。

在這裏插入圖片描述

4.兩個例子

      4.1 異步加載圖片

在這裏插入圖片描述

      4.2 用Promise對象實現的 Ajax 操作

在這裏插入圖片描述

本文作者:Yaphets.Lee

轉載請註明出處,感謝!

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章