Promise學(xué)習(xí)筆記

tigerZH 發(fā)布于2019-08-26 12:14 / 1494人閱讀

摘要：異步操作未完成異步操作成功異步操作失敗基本用法是一個(gè)構(gòu)造函數(shù)，接收一個(gè)參數(shù)，這個(gè)參數(shù)是函數(shù)，同時(shí)這個(gè)參數(shù)函數(shù)要傳入兩個(gè)參數(shù)，，分別表示異步操作執(zhí)行成功后的回調(diào)函數(shù)和異步操作執(zhí)行失敗后的回調(diào)函數(shù)。如果調(diào)用函數(shù)，就會(huì)調(diào)用方法的第一個(gè)參數(shù)。

Promise對(duì)象

Promise 表示一個(gè)異步操作的最終結(jié)果，與之進(jìn)行交互的方式主要是 then 方法，該方法注冊(cè)了兩個(gè)回調(diào)函數(shù)，用于接收 promise 的終值或本 promise 不能執(zhí)行的原因。

Promise 的狀態(tài)

一個(gè) Promise 的當(dāng)前狀態(tài)必須為以下三種狀態(tài)中的一種：等待態(tài)（Pending）、執(zhí)行態(tài)（Fulfilled）和拒絕態(tài)（Rejected）。

異步操作未完成（pending）

異步操作成功（fulfilled）

異步操作失敗（rejected）

基本用法

Promise是一個(gè)構(gòu)造函數(shù)，Promise接收一個(gè)參數(shù)，這個(gè)參數(shù)是函數(shù)，同時(shí)這個(gè)參數(shù)函數(shù)要傳入兩個(gè)參數(shù)：resolve，reject，分別表示異步操作執(zhí)行成功后的回調(diào)函數(shù)和異步操作執(zhí)行失敗后的回調(diào)函數(shù)。

Promise對(duì)象上有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("成功時(shí)調(diào)用resolve函數(shù)，并返回一個(gè)Promise對(duì)象")
        }else{
            reject(new Error(xhr.statusText))
        }
    }
    xhr.open("GET",url)
    xhr.send()
    })
    return promise//返回promise對(duì)象
}
getAjax("./ajax.html")
    .then((data)=>{
            console.log("第一個(gè)參數(shù): "+ data)//打印resolve函數(shù)傳遞的參數(shù)
            return ("第一個(gè)then的第一個(gè)參數(shù)")//返回一個(gè)Promise對(duì)象并將數(shù)據(jù)傳遞給下一個(gè)then
        },(data)=>{
            console.log("第二個(gè)參數(shù): "+ data)//打印reject函數(shù)傳遞的參數(shù)
            return("第一個(gè)then的第二個(gè)參數(shù)")//返回一個(gè)Promise對(duì)象并將數(shù)據(jù)傳遞給下一個(gè)then
            }
        )
    .then((data)=>{
        //如果剛開始在getAjax函數(shù)中是調(diào)用reject函數(shù)，第一個(gè)then方法才會(huì)執(zhí)行第二個(gè)參數(shù)，但是后面的then方法只執(zhí)行第一個(gè)參數(shù)
            console.log("第一個(gè)參數(shù): "+ data)//打印上一個(gè)then方法傳遞的參數(shù)
            return ("第二個(gè)then的第一個(gè)參數(shù)")
        },(data)=>{
            console.log("第二個(gè)參數(shù): "+ data)
            return ("第二個(gè)then的第二個(gè)參數(shù)")
        }
    )
    .then((data)=>{
            console.log("第一個(gè)參數(shù): "+ data)
        },(data)=>{
            console.log("第二個(gè)參數(shù): "+ data)
        }
    )

異步操作成功時(shí)調(diào)用resolve:

異步操作失敗時(shí)調(diào)用reject:

總結(jié)：

Promise是一個(gè)構(gòu)造函數(shù)，通過new命令創(chuàng)建promise對(duì)象。在創(chuàng)建對(duì)象的時(shí)候傳遞一個(gè)參數(shù)，這個(gè)參數(shù)是一個(gè)函數(shù)，這個(gè)函數(shù)有兩個(gè)參數(shù)，這兩個(gè)參數(shù)分別是resolve和reject，它們是兩個(gè)函數(shù)，由 JavaScript 引擎提供，不用自己實(shí)現(xiàn)。成功時(shí)調(diào)用resolve方法，失敗時(shí)調(diào)用reject方法。

在promise對(duì)象上有then方法，這個(gè)方法可以傳遞兩個(gè)參數(shù)，這兩個(gè)參數(shù)是函數(shù)。

如果調(diào)用resolve函數(shù)，就會(huì)調(diào)用then方法的第一個(gè)參數(shù)。如果調(diào)用的是reject函數(shù)，就會(huì)調(diào)用then方法的第二個(gè)參數(shù)。不管第一個(gè)then調(diào)用第一個(gè)參數(shù)還是第二個(gè)參數(shù)，第一個(gè)then方法后面的then方法都會(huì)執(zhí)行第一個(gè)參數(shù)。

resolve方法和reject方法需要帶參數(shù)，這個(gè)參數(shù)會(huì)傳遞給then方法對(duì)應(yīng)的參數(shù) 。在then方法中返回?cái)?shù)據(jù)時(shí)，可以傳遞給下一個(gè)then方法。