摘要：對象的狀態不受外界影響。如果改變已經發生了，你再對對象添加回調函數，也會立即得到這個結果。會等中的對象全部執行完后將數組傳入回調函數中與不同的是只要之中有一個實例率先改變狀態，的狀態就跟著改變。

剛學習完，有點粗略印象。整理記錄一下以便后續學習補充，加深理解。

Promise是構造函數，可以通過new來生成Promise對象。

目前我的感受是：更加方便來操作異步流程，更加明確直觀的控制事件的流程以及可以鏈式調用

摘自ES6入門

Promise對象有以下兩個特點。
（1）對象的狀態不受外界影響。Promise對象代表一個異步操作，有三種狀態：pending（進行中）、fulfilled（已成功）和rejected（已失敗）。只有異步操作的結果，可以決定當前是哪一種狀態，任何其他操作都無法改變這個狀態。這也是Promise這個名字的由來，它的英語意思就是“承諾”，表示其他手段無法改變。
（2）一旦狀態改變，就不會再變，任何時候都可以得到這個結果。Promise對象的狀態改變，只有兩種可能：從pending變為fulfilled和從pending變為rejected。只要這兩種情況發生，狀態就凝固了，不會再變了，會一直保持這個結果，這時就稱為 resolved（已定型）。如果改變已經發生了，你再對Promise對象添加回調函數，也會立即得到這個結果。這與事件（Event）完全不同，事件的特點是，如果你錯過了它，再去監聽，是得不到結果的。

通過new構造一個簡單的Promise對象

let p = new Promise((resolve, reject) => {});

傳入的兩個參數是用來控制Promise對象的狀態，我們打印一下p看一下它的狀態：
Promise?{__proto__: Promise[[PromiseStatus]]: "pending"[[PromiseValue]]: undefined這個就是初始狀態pending
而resolve，reject可以控制Promise的狀態

//resolve()
let p = new Promise((resolve, reject) => resolve("123")); //Promise?{: "123"}

//reject()
let p = new Promise((resolve, reject) => reject("123")); //reject()后是返回一個失敗狀態的Promise，不需要用catch來捕獲不寫catch會報錯
p.catch(data => console.log(data));    
console.log(p);    //Promise?{: "123"}   123

提到了catch那就有還有一個then
說一直白點：then(f1, f2)可以填入兩個函數參數，一個參數就是將resolve中參數代入f1來執行,第二個參數將reject中參數代入f2來執行;第二個參數可以用catch來代替，并且它更加強大，catch能捕獲then()中的報錯

let p = new Promise((resolve, reject) => {
    
    let n = Math.ceil(Math.random() * 10);
    n > 5 ? resolve(n) : reject(n);
});
p.then(
    data => console.log(data),
    data => console.log(data),
)

用catch代替，并捕獲then的錯誤

let p = new Promise((resolve, reject) => {
    
    resolve("yes")
});
p.then(
    data => {console.log(data),console.log(a)}

).catch(data => console.log(data));
//yes
//ReferenceError: a is not defined

因為then處理后返回的還是Promise對象，這樣方便鏈式調用，then中都沒有return，怎么會有Promise對象的呢？

then或catch即使未顯式指定返回值, 它們也總是自動包裝一個新的fulfilled狀態的promise對象。

我們打印一下會發現：Promise?{: undefined}
那么我們可以顯示的return一個Promise對象看看，

let p = new Promise((resolve, reject) => resolve("yes"));
p.then(data => Promise.resolve("第二個Promise")).then(data => console.log(data));   //第二個Promise

可以看到p.then(data => Promise.resolve("第二個Promise"))返回Promise對象是Promise?{: "第二個Promise"}并且將value值作為參數傳入到第二個then中來執行

Promise.resolve(value | promise | thenable)創建Promise對象
第一參數空或者原始值，創建后的Promise對象狀態直接為resolved狀態

Promise.resolve("f")
// 等價于
new Promise(resolve => resolve("f"))

第二值得注意的是具有then方法的對象

let thenable = {
    then :(resolve, reject) => resolve("thenable")
}

let p = Promise.resolve(thenable);
console.log(p);    

Promise對象狀態由->
第三參數為實例化的Promise對象，

let p1 = new Promise((resolve, reject) => false);
let p = Promise.resolve(p1);
console.log(p);

p狀態和p1狀態一致的

Promise.reject(value)創建Promise對象
與resolve不同的是：直接將value原樣作為參數傳入

const thenable = {
  then(resolve, reject) {
    reject("出錯了");
  }
};

Promise.reject(thenable)
.catch(e => {
  console.log(e === thenable)
})

catch方法的參數不是reject拋出的“出錯了”這個字符串，而是thenable對象。

Promise.all
將多個 Promise 實例，包裝成一個新的 Promise 實例;const p = Promise.all([p1, p2, p3]);

（1）只有p1、p2、p3的狀態都變成fulfilled，p的狀態才會變成fulfilled，此時p1、p2、p3的返回值組成一個數組，傳遞給p的回調函數。（2）只要p1、p2、p3之中有一個被rejected，p的狀態就變成rejected，此時第一個被reject的實例的返回值，會傳遞給p的回調函數。

會等all中的對象全部執行完后將數組傳入回調函數then中

let p = new Promise((resolve, reject) => setTimeout(() => resolve("p"),1000));
let p1 = new Promise((resolve, reject) => setTimeout(() => resolve("p2"),2000));
let p2 = new Promise((resolve, reject) => setTimeout(() => resolve("p3"),3000));
Promise.all([p, p1, p2]).then(data => console.log(data)).catch(data => console.log(data));    //?["p", "p2", "p2"]

let p = new Promise((resolve, reject) => resolve("p"));
let p1 = new Promise((resolve, reject) => reject("p2"));
let p2 = new Promise((resolve, reject) => resolve("p2"));
Promise.all([p, p1, p2]).then(data => console.log(data)).catch(data => console.log(data));   //p2

Promise.race
與all不同的是：只要p1、p2、p3之中有一個實例率先改變狀態，p的狀態就跟著改變。那個率先改變的 Promise 實例的返回值，就傳遞給p的回調函數。

let p = new Promise((resolve, reject) => setTimeout(() => resolve("p"),1000));
let p1 = new Promise((resolve, reject) => setTimeout(() => resolve("p2"),2000));
let p2 = new Promise((resolve, reject) => setTimeout(() => resolve("p3"),3000));
Promise.race([p, p1, p2]).then(data => console.log(data)).catch(data => console.log(data));   //p

Promise對象的回調函數與setTimeout的順序問題

An event loop has one or more task queues. A task queue is an ordered list of tasks, which are algorithms that are responsible for such work as: events, parsing, callbacks, using a resource, reacting to DOM manipulation…Each event loop has a microtask queue. A microtask is a task that is originally to be queued on the microtask queue rather than a task queue.
   瀏覽器(或宿主環境) 遵循隊列先進先出原則, 依次遍歷macrotask queue中的每一個task, 不過每執行一個macrotask, 并不是立即就執行下一個, 而是執行一遍microtask queue中的任務, 然后切換GUI線程重新渲染或垃圾回收等.
   Event Loop (事件循環)擁有如下兩種隊列
   macrotask queue, 指的是宏任務隊列, 包括rendering, script(頁面腳本), 鼠標, 鍵盤, 網絡請求等事件觸發, setTimeout, setInterval, setImmediate(node)等等.
   microtask queue, 指的是微任務隊列, 用于在瀏覽器重新渲染前執行, 包含Promise, process.nextTick(node), Object.observe, MutationObserver回調等.
   process.nextTick > promise.then > setTimeout ? setImmediate

setTimeout(function () {
  console.log("three");
}, 0);

Promise.resolve().then(function () {
  console.log("two");
});

console.log("one");

// one
// two
// three

上面代碼中，setTimeout(fn, 0)在下一輪“事件循環”開始時執行，Promise.resolve()在本輪“事件循環”結束時執行，console.log("one")則是立即執行，因此最先輸出。

setTimeout(function() {
  console.log(4)
}, 0);
new Promise(function(resolve) {
  console.log(1);
  for (var i = 0; i < 10000; i++) {
    i == 9999 && resolve()
  }
  console.log(2);
}).then(function() {
  console.log(5)
});
console.log(3);  //1 2 3 5 4