chapter1.七、Promise

Promise

Promise對象用於一個異步操做的最終完成（包括成功和失敗）及結果值的表示。

簡單說，就是處理異步請求的。

之因此叫作Promise，就是我承諾，若是成功則怎麼處理，失敗則怎麼處理。

new Promise(
    /* 下面定義的函數是executor */
    function(resolve, reject) {...}
);

executor

executor 是一個帶有 resolve 和 reject 兩個參數的函數 。

executor 函數在Promise構造函數執行時同步執行，被傳遞resolve和reject函數（executor 函數在Promise構造函數返回新建對象前被調用）。

executor 內部一般會執行一些異步操做，一旦完成，能夠調用resolve函數來將promise狀態改爲fulfilled即完成，或者在發生錯誤時將它的狀態改成rejected即失敗。

若是在executor函數中拋出一個錯誤，那麼該promise 狀態爲rejected。executor函數的返回值被忽略

executor中，resolve或reject只能執行其中一個函數

Promise的狀態

pending: 初始狀態，不是成功或失敗狀態。

fulfilled: 意味着操做成功完成。

rejected: 意味着操做失敗

Promise.then(onFulfilled, onRejected)

參數是2個函數，根據Promise的狀態來調用不一樣的函數，fulfilled走onFulfilled函數，rejected走onRejected函數。
then的返回值是一個新的promise對象。調用任何一個參數後，其返回值會被新的promise對象來resolve，向後傳遞。

var myPromise = new Promise((resolve,reject) => {
    //resolve("ok"); //執行，置狀態爲fulfilled
    console.log("++++++++++++");
    reject("bad") // 永遠執行不到，resolve和reject只能執行其一
    console.log("===============")
});
console.log("myPromise")

myPromise.then(
    (value) => console.log(1,myPromise,value), // 成功，顯示結果
    (reason) => console.log(2,myPromise,reason) // 失敗，顯示緣由
)

 

catch(onRejected)

爲當前Promise對象添加一個拒絕回調，返回一個新的Promise對象。onRejected函數調用其返回值會被新的Promise對象用來resolve。 

var myPromise = new Promise(function(resolve, reject) {
    setTimeout(() => {
        // resolve("ok"); //執行其一
        reject("not ok") //執行其一
    },1000)
})

console.log(myPromise) // 狀態pending
myPromise.then( // 根據Promise的狀態，選擇走那個函數
    (value) => {
        console.log(1,myPromise,value)
        return value // 若是不return，返回的新promise對象，只是簡單地接受了本次promise對象的終態
    },
    (reason) => {
        console.log(2,myPromise,reason)
        return reason
        }
).then(
    function(x) { 
        console.log(x); //x上一個Promise對象返回的值
        return Promise.reject(x +"+++++++")
    }
).catch(x => { // 接收到的是上一個reject的值，在這裏被Promise的resolve使用
    console.log(x);
    return Promise.resolve(x)
})

setTimeout函數是一個異步函數，設置的值爲要執行的函數和等待時常，2000就是2秒

異步實例

var myPromise = new Promise((resolve,reject) => {
    //resolve("ok"); //執行，置狀態爲fulfilled
    console.log("++++++++++++");
    reject("bad") // 執行
    console.log("===============")
});
console.log("myPromise")

abc = (myPromise.then(
    (value) => {
        console.log(1,myPromise,value) // 成功，顯示結果
        return value
    },
    (reason) => {
        console.log(2,myPromise,reason) // 失敗，顯示緣由
        return reason
    }
).then(
    function (v) {
        console.log(2.5,v)
        return Promise.reject(v + "**")
    }
).catch(reason => {
    console.log(3,reason);
    return Promise.resolve(reason)
}))
setTimeout(() => console.log(100,abc),2000) // 返回的對象還是promise對象， Promise<"bad**">

參考

Promise

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

then

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/then

catch：

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/catch