淺談Promise-有解無憂

Promise支持多重鏈式呼叫，避免了層層嵌套 Promise 是異步編程的一種解決方案，比傳統的解決方案——回呼函式和事件——更合理和更強大 Promise的三種狀態分為 pending初始狀態 reslove可以理解為成功 reject可以理解為失敗 基本操作

let PromiseDemo = new Promise(function(reslove, reject) {
    if ("true/false") { //reslove,reject都是函式
        reslove("success")
    } else {
        reject("failed")
    }
})

Promise.prototype.then() then方法是為 Promise 實體添加狀態改變時的回呼函式第一個引數是reslove回傳的回呼函式第二引數是reject回傳的回呼函式

PromiseDemo.then(function(data) {
    console.log(data); //成功的資訊
}).then(function(err) {
    console.log(err) //失敗的資訊
})

Promise.prototype.catch() catch方法的函式會捕獲錯誤用catch代替then的好處是函式執行程序中 then()方法指定的回呼函式，如果運行中拋出錯誤，也會被catch()方法捕獲第一個then()后最好接catch

PromiseDemo.then(function(data) {
    console.log(data); //成功的資訊
}).catch(function(err) {
    console.log(err) //失敗的資訊
})

Promise.prototype.finally() 到最后不管Promise狀態為何都會執行

PromiseDemo.then(function(data) {
    console.log(data); //成功的資訊
}).catch(function(err) {
    console.log(err) //失敗的資訊
}).finally(function() {
    console.log("finally");
})

Promise.resolve()

 // Promise.resolve('fun')等價于new Promise(resolve=>{resolve("fun")})

Promise.reject()

// Promise.resolve('fun')等價于new Promise((resolve,reject)=>{reject("fun")})

Promise.all()

Promise.all([p1, p2, p3]).then(function(data) {
        console.log(data);
    })
    // 回傳一組資料 輸出的陣列與原陣列對應

Promise.race()

Promise.race([p1, p2, p3]).then(function(data) {
        console.log(data);
    })
    // 回傳一個運行速度最快的回傳值

利用class函式構建一個Promise

class Promiose {
    constructor(executer) { //執行器executer
        this.status = 'pending'; //默認狀態 pending
        this.success = undefined; //成功值默認undefind
        this.failed = undefined; //失敗默認值undefind
        // 狀態只有在pending時才能改變
        let resloveFun = success => {
            if (this.status == pending) {
                this.status = "resolve"
                this.success = success
            }
        }
        let rejectFun = failed => {
            if (this.status == pending) {
                this.status = "reject"
                this.failed = failed
            }
        }
        try {
            executer(resloveFun, rejectFun)
                // 把兩個函式給執行器執行
        } catch (error) {
            reject(error)
        }
    }
    then(onResolve, onReject) {
        if (this.status = "resolve") {
            onResolve(this.success);
        }
        if (this.status = "reject") {
            onReject(this.failed);
        }
    }
}

Promise可以順序嵌套執行 return 回傳的是一個全新的Promise

function ajaxPromise(url) {
    var obj = new Promise(function(resolve, reject) {
        var ajax = new XMLHttpRequest();
        ajax.onreadystatechange = function() {
            if (ajax.readyState != 4) {
                return
            };
            if (ajax.readyState == 4) {
                resolve(ajax.responseText)
            } else {
                reject(err)
            }
        }
        ajax.open("get", url);
        ajax.send()
    })
    return obj
}
ajaxPromise("http://localhost:3000/ajaxdemo1")
    .then(function(data) {
        console.log(data)
        return ajaxPromise("http://localhost:3000/ajaxdemo2")
    }).then(function(data) {
        console.log(data);
        return ajaxPromise("http://localhost:3000/ajaxdemo3")
    }).then(function(data) {
        console.log(data);
    })

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/104005.html

標籤：JavaScript

上一篇：vue多頁面與單頁面開發的區別。

下一篇：webpack配置專案加載各種靜態資源及css前處理器