摘要：回調(diào)函數(shù)成功回調(diào)處理器失敗回調(diào)處理器用戶發(fā)送一個向百度服務(wù)器獲取數(shù)據(jù)的異步請求無阻塞高并發(fā)的的誕生更加嚴重的依賴異步操作才能完成無阻賽高并發(fā)的特性。

發(fā)音：[?pr?m?s]
詞性：名詞，
翻譯：許諾，允諾。

Promise 對象用于一個異步操作。

一個Promise表示一個現(xiàn)在，將來或永不可能可用的值。

可以將異步操作的書寫方式變成一種隊列化的書寫方式，并按照我們寫的那樣的預(yù)期來執(zhí)行返回符合預(yù)期的結(jié)果。

js為檢查表單而生，其首要目標是操作dom，界面凍結(jié)會造成非常不友好的用戶體驗，所以dom操作大多是異步的。
注意：同步操作的處理器未執(zhí)行完成會使得界面無法響應(yīng)用戶的其他操作，而異步操作則可以避免該問題。
常見的異步操作語法：

$("#start").on("click",startHandler);
function startHandler(){} // 定義事件響應(yīng)的處理器函數(shù)

用戶點擊start元素就會觸發(fā)一個異步事件去執(zhí)行，再次觸發(fā)不必等待前一次事件執(zhí)行完成，就可以再次觸發(fā)。

$.ajax("http://baidu.com",{
    success:function(res){
    // 成功回調(diào)處理器
    },
    error:function(e){
    // 失敗回調(diào)處理器
    }
});

用戶發(fā)送一個向百度服務(wù)器獲取數(shù)據(jù)的異步請求

更加嚴重的依賴異步操作才能完成無阻賽高并發(fā)的特性。

然而異步回調(diào)這種方式并不是理想的，它卻有一些問題，
比如：

回調(diào)地獄這種難于維護的書寫方式。

更深層次的問題：

嵌套回調(diào)中的循環(huán)語句出錯后，無法正常的使用return和throw終止

無法正常檢索堆棧信息（每一個回調(diào)都會重新建立堆棧）

多個回調(diào)之間難以建立聯(lián)系

一個promise的基本使用案例：

new Promise(
    // 執(zhí)行器 executor
    function ( resolve, reject ) {
        //一段耗時很長的異步操作
        resolve(); //異步處理成功
        reject(); // 異步處理失敗 
        //注意：resolve和reject這倆個回調(diào)函數(shù)被調(diào)用是互斥的  
    }
).then( function A(){
            //成功，下一步
    }, 
    function B(){
        //失敗，做善后處理
    } 
);

promise是一個代理對象，它和原先要進行的操作并無關(guān)系。

它通過引入一個回調(diào)，避免更多的回調(diào)。

promise有三個狀態(tài)：

pending 初始狀態(tài) fulfilled 操作成功 rejectd 操作失敗

promise一經(jīng)創(chuàng)建，執(zhí)行器便會立刻執(zhí)行；

異步操作通過調(diào)用resolve改變promise狀態(tài)為fulfilled,通過調(diào)用reject改變promise狀態(tài)為rejected；

promise狀態(tài)發(fā)生改變就會觸發(fā)then里面的響應(yīng)函數(shù)；

promise狀態(tài)一經(jīng)改變，不會再變。

promise最簡單的實現(xiàn)：

//范例1
console.log("here we go");
new Promise( resolve => {
    setTimeout( () => {
        resolve("hello");
    }, 2000);
}).then( value => {
    console.log( value + " world");
});
/* 控制臺日志 */ 
here we go
// 2s以后
hello world

// 范例2
console.log("here we go");
new Promise(resolve => {
    setTimeout( () => {
        resolve("hello");
    }, 2000);
}).then(value => {
    console.log(value);
    return new Promise( resolve => {
        setTimeout(() => {
            resolve("world");
        }, 2000);
    });
}).then(value => {
    console.log( value + " world");
});
/* 控制臺日志 */
here we go
// 2s后
hello
// 2s后
world world

// 假如一個Promise已經(jīng)完成了，再.then()會怎樣？

console.log("start");
let promise = new Promise(resolve => {
    setTimeout(() => {
        console.log("the promise fulfilled");
        resolve("hello, world");
    }, 1000);
});
setTimeout(() => {
    promise.then( value => {
        console.log(value);
    });
}, 3000);
/* 控制臺 */
17:37:29.015 start
17:37:30.016 the promise fulfilled
17:37:32.017 hello, world

// 假如在.then()的函數(shù)里面不返回新的Promise，會怎樣？

console.log("here we go");
new Promise(resolve => {
    setTimeout( () => {
        resolve("hello");
    }, 2000);
}).then( value => {
    console.log(value);
    console.log("everyone");
    (function () {
        return new Promise(resolve => {
            setTimeout(() => {
                console.log("Mr.Laurence");
                resolve("Merry Xmas");
            }, 2000);
        });
    }());
//     return false;
}).then( value => {
    console.log(value + " world"); return 0
}).then( value => {
    console.log(value + " world");
}).then( value => {
    console.log(value + " world");
});
/* 控制臺 */
17:53:03.175 here we go
17:53:03.191 Promise?{}
17:53:05.181 hello
17:53:05.181 everyone
17:53:05.181 undefined world
17:53:05.182 0 world
17:53:05.182 undefined world
17:53:07.187 Mr.Laurence
從日志可以看出，
1. 執(zhí)行器中必須回調(diào)resolve或者reject改變promise的狀態(tài)；
2. 當狀態(tài)改變后繼續(xù)調(diào)用then方法，但是promise中的狀態(tài)已經(jīng)無法改變了；
3. 可以看到promise對象幫我們生成了一個隊列,這個隊列一直存在。

then方法

then() 接受倆個狀態(tài)響應(yīng)函數(shù)參數(shù)，分別代表fulfilled和rejected

then() 返回一個新的Promise實例，所以它可以鏈式調(diào)用

狀態(tài)響應(yīng)函數(shù)可以返回新的Promise,其他值，或者不返回值

如果返回新的Promise,那么下一級.then()會在新的promise狀態(tài)改變之后執(zhí)行

如果返回其它任何值，則會立刻執(zhí)行下一級.then()

then里面有then的情況
1). 因為.then()返回的還是Promise實例。
2). 會等里面的.then()執(zhí)行完，在執(zhí)行外面的。
3). 對我們來說，此時最好將其展開，會更好閱讀。

測試
問題：下面四種Promise的區(qū)別是什么？

前提：doSomething方法和doSomethingElse方法均返回一個promise實例。
// #1
doSomething().then(function() {
    return doSomethingElse();
});
// #2
doSomething().then(function(){
    doSomethingElse();
});
// #3
doSomething().then(doSomethingElse());
// #4
doSomething().then(doSomethingElse);

// 解析：
// #1
doSomething().then(function() {
    return doSomethingElse();
});
//符合預(yù)期的，可以繼續(xù)回調(diào)then方法獲取doSomethingElse的結(jié)果
// #2
doSomething().then(function(){
    doSomethingElse();
});
//then中沒有返回promise，所以之后的then無法獲取到doSomethingElse的結(jié)果，并且與doSomethingElse幾乎同時執(zhí)行
// #3
doSomething().then(doSomethingElse());
// then應(yīng)該接收一個狀態(tài)處理函數(shù)，當前這種情況傳入了一個promise實例，無法獲取上層promise的結(jié)果，而該層then會被忽略，下一層會獲取到doSomething()的結(jié)果
// #4
doSomething().then(doSomethingElse);
// then方法中吧doSomethingElse直接當成狀態(tài)處理函數(shù)也是可以達到預(yù)期的

錯誤處理 catch方法

catch和then一樣會返回一個promise實例。如果沒有拋出錯誤，該實例默認也會返回fulfilled狀態(tài)。

promise.all
接收一個數(shù)組參數(shù)，返回一個新的promise實例，響應(yīng)函數(shù)中的結(jié)果為數(shù)組中的每個promise的結(jié)果。
與map連用
使用forEach和reduce實現(xiàn)隊列
ES2017 的async/await

該學(xué)習筆記是學(xué)習慕課網(wǎng)中 Promise入門 記錄