摘要：引擎線(xiàn)程也稱(chēng)為內(nèi)核，負(fù)責(zé)處理腳本程序例如引擎引擎線(xiàn)程負(fù)責(zé)解析腳本，運(yùn)行代碼。對(duì)象代表一個(gè)未完成但預(yù)計(jì)將來(lái)會(huì)完成的操作。注意一旦新建就會(huì)立即執(zhí)行它屬于，無(wú)法取消。

寫(xiě)在前面:
第一遍學(xué)Promise時(shí), 只是大概過(guò)了一遍, 感覺(jué)學(xué)的不夠深入, 這一篇算是對(duì)之前的一個(gè)總結(jié)吧. Promise在ES6中也屬于一個(gè)較難理解的一部分; 所以在學(xué)習(xí)一個(gè)比較難理解的知識(shí)點(diǎn)時(shí), 我們可以圍繞這個(gè)知識(shí)點(diǎn)進(jìn)行展開(kāi),逐個(gè)去理解.

理解一個(gè)知識(shí)點(diǎn), 不妨先列出下面幾個(gè)問(wèn)題.

Promise是用來(lái)干什么的?

Promise是什么?

Promise如何去創(chuàng)建,使用?

Promise的常用形式?

Promise的使用有哪些注意點(diǎn)?

首先聊一下瀏覽器, 一直對(duì)瀏覽器的結(jié)構(gòu)比較好奇,查了很多資料總結(jié)就有下面一點(diǎn)相關(guān)總結(jié); 其中也借鑒其他人的一些東西.
瀏覽器是多進(jìn)程的,有主進(jìn)程, GPU加速進(jìn)程,渲染進(jìn)程(內(nèi)核)等, 一般新開(kāi)一個(gè)tab頁(yè)面就是新啟動(dòng)一個(gè)進(jìn)程, CPU就會(huì)給他分配資源; 但其中有一個(gè)核心進(jìn)程==>渲染進(jìn)程(瀏覽器內(nèi)核), 是我們前端人員需要特別關(guān)注的,它包括了多個(gè)線(xiàn)程...

GUI渲染線(xiàn)程

負(fù)責(zé)渲染瀏覽器界面，解析HTML，CSS，構(gòu)建DOM樹(shù)和RenderObject樹(shù)，布局和繪制等。
當(dāng)界面需要重繪（Repaint）或由于某種操作引發(fā)回流(reflow)時(shí)，該線(xiàn)程就會(huì)執(zhí)行

注意，GUI渲染線(xiàn)程與JS引擎線(xiàn)程是互斥的，當(dāng)JS引擎執(zhí)行時(shí)GUI線(xiàn)程會(huì)被掛起（相當(dāng)于被凍結(jié)了），
GUI更新會(huì)被保存在一個(gè)隊(duì)列中等到JS引擎空閑時(shí)立即被執(zhí)行。

JS引擎線(xiàn)程

也稱(chēng)為JS內(nèi)核，負(fù)責(zé)處理Javascript腳本程序.(例如V8引擎)JS引擎線(xiàn)程負(fù)責(zé)解析Javascript腳本，運(yùn)行代碼。
JS引擎一直等待著任務(wù)隊(duì)列中任務(wù)的到來(lái)，然后加以處理，一個(gè)Tab頁(yè)（renderer進(jìn)程）中無(wú)論什么時(shí)候都只有一個(gè)JS線(xiàn)程在運(yùn)行JS程序
同樣注意，GUI渲染線(xiàn)程與JS引擎線(xiàn)程是互斥的，所以如果JS執(zhí)行的時(shí)間過(guò)長(zhǎng)，這樣就會(huì)造成頁(yè)面的渲染不連貫，導(dǎo)致頁(yè)面渲染加載阻塞。

不過(guò)H5中新增了Web Worker, 實(shí)現(xiàn)了多線(xiàn)程: js會(huì)新開(kāi)線(xiàn)程來(lái)處理一些其他任務(wù),但不會(huì)影響DOM結(jié)構(gòu)...
創(chuàng)建Worker時(shí)，JS引擎向?yàn)g覽器申請(qǐng)開(kāi)一個(gè)子線(xiàn)程（子線(xiàn)程是瀏覽器開(kāi)的，完全受主線(xiàn)程控制，而且不能操作DOM）
JS引擎線(xiàn)程與worker線(xiàn)程間通過(guò)特定的方式通信
(postMessage API，需要通過(guò)序列化對(duì)象來(lái)與線(xiàn)程交互特定的數(shù)據(jù)）

事件觸發(fā)線(xiàn)程

這個(gè)線(xiàn)程是歸屬于瀏覽器而不是JS引擎，用來(lái)控制事件循環(huán)（可以理解，JS引擎自己都忙不過(guò)來(lái)，需要瀏覽器另開(kāi)線(xiàn)程協(xié)助）
當(dāng)JS引擎執(zhí)行代碼塊如setTimeOut時(shí)（也可來(lái)自瀏覽器內(nèi)核的其他線(xiàn)程,如鼠標(biāo)點(diǎn)擊、AJAX異步請(qǐng)求,
頁(yè)面滾動(dòng)等），會(huì)將對(duì)應(yīng)任務(wù)添加到事件線(xiàn)程中
當(dāng)對(duì)應(yīng)的事件符合觸發(fā)條件被觸發(fā)時(shí)，該線(xiàn)程會(huì)把事件添加到待處理隊(duì)列的隊(duì)尾，等待JS引擎的處理
注意，
由于JS的單線(xiàn)程關(guān)系，所以這些待處理隊(duì)列中的事件都得排隊(duì)等待JS引擎處理（當(dāng)JS引擎空閑時(shí)才會(huì)去執(zhí)行）

定時(shí)觸發(fā)器線(xiàn)程

即setInterval與setTimeout所在線(xiàn)程
瀏覽器定時(shí)計(jì)數(shù)器并不是由JavaScript引擎計(jì)數(shù)的,（因?yàn)镴avaScript引擎是單線(xiàn)程的, 如果處于阻塞線(xiàn)程狀態(tài)就會(huì)影響記計(jì)時(shí)的準(zhǔn)確); 
因此通過(guò)多帶帶線(xiàn)程來(lái)計(jì)時(shí)并觸發(fā)定時(shí)（計(jì)時(shí)完畢后，添加到事件隊(duì)列中，等待JS引擎空閑后執(zhí)行）
當(dāng)然setTimeout中的延時(shí)參數(shù)也不一定準(zhǔn)確

異步HTTP請(qǐng)求線(xiàn)程

在XMLHttpRequest在連接后是通過(guò)瀏覽器新開(kāi)一個(gè)網(wǎng)絡(luò)線(xiàn)程去請(qǐng)求
將檢測(cè)到狀態(tài)變更時(shí)，如果設(shè)置有回調(diào)函數(shù)，異步線(xiàn)程就產(chǎn)生狀態(tài)變更事件，
將這個(gè)回調(diào)再放入事件隊(duì)列中。再由JavaScript引擎執(zhí)行。

那么關(guān)于瀏覽器方面的背景知識(shí)就介紹到這里啦, 想要深入去了解,可以去查相關(guān)資料...

大家都知道JavaScript引擎是單線(xiàn)程的工作模式, 即同一時(shí)間只能跑一段代碼,還要按順序自上而下執(zhí)行; 但是碰到I/O操作, 定時(shí)器, 事件監(jiān)聽(tīng)函數(shù)等這些耗時(shí)操作; JS引擎不會(huì)等待它們有結(jié)果了才去之下它們后面的代碼, 而是會(huì)將它們?nèi)舆M(jìn)任務(wù)(事件)隊(duì)列中, 等待同步代碼執(zhí)行棧空了之后, 再去任務(wù)隊(duì)列將任務(wù)一個(gè)個(gè)取出來(lái)執(zhí)行任務(wù)所對(duì)應(yīng)的回調(diào)函數(shù), 執(zhí)行完畢后會(huì)一直等待新的任務(wù)到來(lái); 如此循環(huán)...

同步回調(diào)函數(shù)

我們可以利用了函數(shù)的執(zhí)行棧順序,函數(shù)作為參數(shù)放到另一個(gè)函數(shù)中調(diào)用, 誰(shuí)在后面調(diào)用誰(shuí)就先被放在函數(shù)執(zhí)行棧棧頂

異步回調(diào)函數(shù)

事先在外面定義好一個(gè)callback; 將回調(diào)函數(shù)作為某個(gè)函數(shù)的參數(shù), 利用函數(shù)的作用域?qū)⒑瘮?shù)中異步任務(wù)得到的結(jié)果存在回調(diào)函數(shù)的形參中, 然后在函數(shù)體末尾調(diào)用...

定時(shí)器
setTimeout的作用是在間隔一定的時(shí)間后，將回調(diào)函數(shù)插入任務(wù)隊(duì)列中，等棧中的同步任務(wù)都執(zhí)行完畢后，再執(zhí)行, 當(dāng)然這個(gè)時(shí)間不一定準(zhǔn)確...

看阮老師的ES6出門(mén)上說(shuō)Promise是JS異步編程的一種解決方案. 舉個(gè)例子, Ajax的回調(diào)問(wèn)題, 如果下一個(gè)ajax請(qǐng)求要用到上一個(gè)Ajax請(qǐng)求中的結(jié)果, 那么往往就會(huì)導(dǎo)致多個(gè)回調(diào)嵌套的問(wèn)題, 那么Promise就可以解決這種代碼上的嵌套問(wèn)題, 是我們的代碼變得更優(yōu)美, 更利于維護(hù); 我暫時(shí)先對(duì)Promise的理解就是: 處理異步任務(wù), 保存異步結(jié)果狀態(tài), 異步代碼同步化...

Promise 它就是一個(gè)對(duì)象，相當(dāng)于一個(gè)容器, 里面存的就是一個(gè)異步操作的結(jié)果; 我們可以是從中獲取異步操作結(jié)果的相關(guān)信息。

Promise對(duì)象代表一個(gè)未完成、但預(yù)計(jì)將來(lái)會(huì)完成的操作。
它有以下三種狀態(tài)：

pending：初始值，不是fulfilled，也不是rejected
fulfilled：代表操作成功
rejected：代表操作失敗

Promise有兩種狀態(tài)改變的方式，既可以從pending轉(zhuǎn)變?yōu)閒ulfilled，也可以從pending轉(zhuǎn)變?yōu)閞ejected。一旦狀態(tài)改變，就「凝固」了，會(huì)一直保持這個(gè)狀態(tài)，不會(huì)再發(fā)生變化。當(dāng)狀態(tài)發(fā)生變化，promise.then綁定的函數(shù)就會(huì)被調(diào)用。
注意：Promise一旦新建就會(huì)「立即執(zhí)行」(它屬于microtask)，無(wú)法取消。這也是它的缺點(diǎn)之一。

1.創(chuàng)建promise對(duì)象

//1.使用new Promise(func)的形式
//2.快捷語(yǔ)法: Promise.resolve(func) || Promise.reject(func)
// 參數(shù)1: 一般是一個(gè)處理異步任務(wù)的函數(shù)  
// 返回值: 一個(gè)promise實(shí)例對(duì)象
Promise.resolve("foo")
// 等價(jià)于, 不過(guò)參數(shù)類(lèi)型不一樣執(zhí)行的操作也會(huì)有所不同
new Promise(resolve => resolve("foo"))

2.在函數(shù)func中 放異步處理代碼

// 傳入兩個(gè)參數(shù): 回調(diào)函數(shù)resolve, reject分別去保存異步處理的結(jié)果
// 成功: 使用resolve(結(jié)果)
// 失敗: 使用reject(原因) 

3.調(diào)用實(shí)例的then(func1) 或者 catch(err)

首先then方法是異步執(zhí)行, 對(duì)上面的異步結(jié)果進(jìn)行處理的函數(shù)
參數(shù): 傳回調(diào)函數(shù), 一個(gè)兩個(gè)都行, 前者是成功狀態(tài)的回調(diào),后者是失敗的回調(diào)

promise一般的使用套路就是:

1.先定義一個(gè)函數(shù), 函數(shù)內(nèi)部使用new Promise()的方式來(lái)返回一個(gè)promise對(duì)象, resolve用來(lái)保存 異步處理成功的結(jié)果
reject用來(lái)保存 異常處理的結(jié)果
2.然后函數(shù)調(diào)用,傳參
3.鏈?zhǔn)秸Z(yǔ)法點(diǎn)出then方法, then中的回調(diào)用來(lái)處理異步結(jié)果
4.有錯(cuò)誤就點(diǎn)出catch方法, 也可以用then(null, function() {})代替catch
5.then的回調(diào)中也可return一個(gè)值, 會(huì)被包裝成一個(gè)新的promise, 因此可以繼續(xù)調(diào)用then方法

應(yīng)用場(chǎng)景: 在ajax中使用, 解決異步嵌套問(wèn)題

    function ajax(url) {

        return new Promise((resolve, reject) => {
    
            let xhr = new XMLHttpRequest();
            // 請(qǐng)求類(lèi)型, 地址, 異步
            xhr.open("get", url, true);
            xhr.send();
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    try {
                        // 處理響應(yīng)內(nèi)容, 將內(nèi)容丟到成功狀態(tài)的回調(diào)
                        resolve(JSON.parse(xhr.responseText))
                    } catch (e) {
                        // 捕獲錯(cuò)誤, 丟到失敗狀態(tài)的回調(diào)
                        reject(e)
                    }
                }
            }
        });
    }

    // 調(diào)用 封裝的ajax函數(shù)
    let url = "http://127.0.0.1:3000/xxoo"; // 自己本地開(kāi)的一個(gè)服務(wù)

    ajax(url)
        .then(res => console.log(res)) // 輸出 {code: 0, msg: "hello cors"}
        .catch(err => console.log(err))

```

其他場(chǎng)景

    // 實(shí)現(xiàn)串行任務(wù)管道; 即當(dāng)前任務(wù)的輸出可以作為下一個(gè)任務(wù)的輸入，形成一條數(shù)據(jù)管道;
    // 比如: 比如從url1獲取參數(shù)userId，拿到后再?gòu)膗rl2獲取第三方openId，最后再?gòu)膗rl3貨取orderList，
    然后把結(jié)果展示給用戶(hù)，類(lèi)似的邏輯都是任務(wù)管道:
    
    new Promise(function(resolve, reject) {
        resolve(1);
    })
    .then(function(res) {
        return new Promise(function(resolve, reject) {
            resolve(res + 1);
        });
    })
    .then(function(res) {
        return new Promise(function(resolve, reject) {
            resolve(res + 1);
        });
    })
        .then(function(res) {
        console.log(res); // 3
    });

在異步執(zhí)行的流程中，使用Promise可以把 執(zhí)行代碼 和 處理結(jié)果 的代碼清晰地分離
這樣我們便可以 把執(zhí)行代碼 和 結(jié)果處理 分成不同的模塊來(lái)寫(xiě),易于維護(hù)

減少異步回調(diào)的嵌套, 比如ajax回調(diào), 我們可以依次調(diào)用then方法即可, 還可以控制回調(diào)的順序

多個(gè)異步任務(wù)是為了容錯(cuò)去訪問(wèn)用同一資源時(shí), 可以使用Promise.race([promise實(shí)例...])

多個(gè)異步任務(wù)并行執(zhí)行時(shí),比如ajax訪問(wèn)兩個(gè)接口, 可以用Promise.all([promise實(shí)例...])

Promise構(gòu)造函數(shù)內(nèi)的同步代碼立即執(zhí)行

回調(diào)函數(shù)參數(shù)resolve異步執(zhí)行, 將結(jié)果作為參數(shù)傳給then方法中的回調(diào)函數(shù)

resolve只有第一次執(zhí)行有效,狀態(tài)不能二次改變

then和catch如果有return, 返回的是一個(gè)全新的promise對(duì)象, 可以鏈?zhǔn)秸{(diào)用

Promise構(gòu)造函數(shù)只會(huì)執(zhí)行一次, promise實(shí)例會(huì)保存resolve的狀態(tài),
以后這個(gè)實(shí)例每次調(diào)用then都是返回一個(gè)這個(gè)狀態(tài), 若鏈?zhǔn)秸{(diào)用then,下一個(gè)則會(huì)打印undefined, res沒(méi)有值...

then中返回任意一個(gè)非 promise 的值都會(huì)被包裹成 promise 對(duì)象

.then 或 .catch 返回的值不能是 promise 本身，否則會(huì)造成死循環(huán)

.then 或者 .catch 的參數(shù)期望是函數(shù)，傳入非函數(shù)則會(huì)發(fā)生值穿透。

.then 可以接收兩個(gè)參數(shù)，第一個(gè)是處理成功的函數(shù)，第二個(gè)是處理錯(cuò)誤的函數(shù)。.catch 是 .then 第二個(gè)參數(shù)的簡(jiǎn)便寫(xiě)法，但是它們用法上有一點(diǎn)需要注意：.then 的第二個(gè)處理錯(cuò)誤的函數(shù)捕獲不了第一個(gè)處理成功的函數(shù)拋出的錯(cuò)誤，而后續(xù)的 .catch 可以捕獲之前的錯(cuò)誤。