Promise學習筆記

qfstudy發表於2018-08-17
Promise筆記

Promise物件

Promise 表示一個非同步操作的最終結果，與之進行互動的方式主要是 then 方法，該方法註冊了兩個回撥函式，用於接收 promise 的終值或本 promise 不能執行的原因。

Promise 的狀態

一個 Promise 的當前狀態必須為以下三種狀態中的一種：等待態（Pending）、執行態（Fulfilled）和拒絕態（Rejected）。

  • 非同步操作未完成（pending）
  • 非同步操作成功（fulfilled）
  • 非同步操作失敗（rejected）

基本用法

Promise是一個建構函式，Promise接收一個引數，這個引數是函式，同時這個引數函式要傳入兩個引數：resolve，reject，分別表示非同步操作執行成功後的回撥函式和非同步操作執行失敗後的回撥函式。

Promise物件上有then、catch等方法

var getAjax = function (url) {
    const promise=new Promise(function(resolve,reject){
    var xhr=new XMLHttpRequest()
    xhr.onreadystatechange=function(){
        if(xhr.readyState!==4){
            return
        }
        if(xhr.status===200){
            resolve('成功時呼叫resolve函式，並返回一個Promise物件')
        }else{
            reject(new Error(xhr.statusText))
        }
    }
    xhr.open('GET',url)
    xhr.send()
    })
    return promise//返回promise物件
}
getAjax('./ajax.html')
    .then((data)=>{
            console.log('第一個引數: '+ data)//列印resolve函式傳遞的引數
            return ('第一個then的第一個引數')//返回一個Promise物件並將資料傳遞給下一個then
        },(data)=>{
            console.log('第二個引數: '+ data)//列印reject函式傳遞的引數
            return('第一個then的第二個引數')//返回一個Promise物件並將資料傳遞給下一個then
            }
        )
    .then((data)=>{
        //如果剛開始在getAjax函式中是呼叫reject函式，第一個then方法才會執行第二個引數，但是後面的then方法只執行第一個引數
            console.log('第一個引數: '+ data)//列印上一個then方法傳遞的引數
            return ('第二個then的第一個引數')
        },(data)=>{
            console.log('第二個引數: '+ data)
            return ('第二個then的第二個引數')
        }
    )
    .then((data)=>{
            console.log('第一個引數: '+ data)
        },(data)=>{
            console.log('第二個引數: '+ data)
        }
    )
複製程式碼

非同步操作成功時呼叫resolve:

1.png

非同步操作失敗時呼叫reject:

2.png

總結：

  • Promise是一個建構函式，通過new命令建立promise物件。在建立物件的時候傳遞一個引數，這個引數是一個函式，這個函式有兩個引數，這兩個引數分別是resolve和reject，它們是兩個函式，由 JavaScript 引擎提供，不用自己實現。成功時呼叫resolve方法，失敗時呼叫reject方法。

  • 在promise物件上有then方法，這個方法可以傳遞兩個引數，這兩個引數是函式。

  • 如果呼叫resolve函式，就會呼叫then方法的第一個引數。如果呼叫的是reject函式，就會呼叫then方法的第二個引數。不管第一個then呼叫第一個引數還是第二個引數，第一個then方法後面的then方法都會執行第一個引數。

  • resolve方法和reject方法需要帶引數，這個引數會傳遞給then方法對應的引數 。在then方法中返回資料時，可以傳遞給下一個then方法。

相關文章