淺談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 = success => {
            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);
    })