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

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

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

Promise對象

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

Promise 的狀態(tài)

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

異步操作未完成（pending）

異步操作成功（fulfilled）

異步操作失?。╮ejected）

基本用法

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

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

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

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

總結(jié)：

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

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

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

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

GPU云服務(wù)器云服務(wù)器學(xué)習(xí)筆記學(xué)習(xí)筆記一基礎(chǔ)學(xué)習(xí)筆記深度學(xué)習(xí)筆記

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/108296.html

發(fā)表評論

登陸后可評論

0條評論

tigerZH

男|高級講師

我要關(guān)注我要私信

TA的文章

【C語言】超詳講解??指針是個什么針？（一次性搞定指針問題）

閱讀 1530·2021-09-23 11:21
前端那些小眾而又精美的網(wǎng)站及工具

閱讀 3200·2019-08-30 14:14
canvas動畫合集Vue組件

閱讀 3272·2019-08-30 13:56
vue transition 過渡動畫從左向右進(jìn)入，從右向左進(jìn)入

閱讀 4290·2019-08-30 11:20
輸入 url 到頁面展現(xiàn)的短短幾秒內(nèi)瀏覽器究竟做了什么？

閱讀 2036·2019-08-29 17:23
采用20/80原則學(xué)習(xí) CSS Grid 布局

閱讀 2853·2019-08-29 16:14
玩兒前端——CSS垂直的那些事兒

閱讀 1781·2019-08-28 18:18
Promise學(xué)習(xí)筆記

閱讀 1603·2019-08-26 12:14

成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲中文字幕日韩无码

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

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

相關(guān)文章