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:

異步操作失敗時調用reject:

總結：

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

• 在promise對象上有then方法，這個方法可以傳遞兩個參數，這兩個參數是函數。

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

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

Promise學習筆記