●Promise

　　是一種異步代碼的封裝方案

　　因為換了一種封裝方案, 不需要安裝回調函數的方式去調用, 需要按照 promise 的形式去調用

　　注意 promise 不是解決 異步問題的, 而是解決回調地獄問題的

　　●認識 Promise

　　○promise 的三種狀態

　　■持續: pending

　　■成功: fulfilled

　　■失敗: rejected

　　○promise 的兩種轉換

　　■從持續轉為成功

　　■從持續轉為失敗

　　○promise 的基礎語法

　　■ES6 內置構造函數

　　○promise 的語法

　　■const p = new Promise(function () {})

　　○promise 對象可以觸發的兩個方法

　　■p.then(函數); 成功時執行

　　■p.catch(函數); 失敗時執行

　　●promise 封裝一個異步函數

　　const p = new Promise(function (resolve, reject) {

　　// resolve: 是一個形參, 名字自定義, 值是一個函數, 當你調用的時候, 會把當前 promise 的狀態轉換為 成功

　　// reject: 是一個形參, 名字自定義, 值是一個函數, 當你調用的時候, 會把當前 promise 的狀態轉換為 失敗

　　// resolve 和 reject 調用時可以傳遞一個參數, 這個參數會被傳遞給對應的 then catch

　　const timer = Math.ceil(Math.random() * 3000) + 2000;

　　setTimeout(() => {

　　if (timer > 3500) {

　　console.log("買水失敗, 耗時 ", timer);

　　reject("獎勵一個bug");

　　} else {

　　console.log("買水成功, 耗時: ", timer);

　　resolve("送你十個bug");

　　}

　　}, timer);

　　});

　　p.then(function (address) {

　　console.log("班長買水成功咯~~~", address);

　　});

　　p.catch(function (address) {

　　console.log("班長買水失敗咯~~~", address);

　　});

　　封裝 promise 為函數

　　function fn() {

　　const p = new Promise(function (resolve, reject) {

　　const timer = Math.ceil(Math.random() * 3000) + 2000;

　　setTimeout(() => {

　　if (timer > 3500) {

　　reject("班長買水失敗");

　　} else {

　　resolve("班長買水成功");

　　}

　　}, timer);

　　});

　　return p;

　　}

　　// 將來在使用的時候 res 得到的是 promise 的實例對象 p

　　const res = fn();

　　res.then(function (type) {

　　// 這個函數執行代碼 promise 狀態為成功狀態!!!

　　console.log("因為", type, "謝謝班長, 我準備了20個bug, 回饋給你");

　　});

　　res.catch(function (type) {

　　// 這個函數執行代碼

　　console.log("因為", type, "謝謝班長, 我準備了800個bug, 開心死你");

　　});

　　●promise 的鏈式調用

　　fn()

　　.then(function (type) {

　　// 這個函數執行代碼 promise 狀態為成功狀態!!!

　　console.log("因為", type, "謝謝班長, 我準備了20個bug, 回饋給你");

　　})

　　.catch(function (type) {

　　// 這個函數執行代碼

　　console.log("因為", type, "謝謝班長, 我準備了800個bug, 開心死你");

　　});

　　●promise 的調用方式補充

　　○如果你在第一個 then 里面返回(return) 一個新的 promise 對象的時候

　　○可以在第一個 then 后面, 繼續第二個 then

　　fn()

　　.then(function (type) {

　　console.log(

　　"第一次: 因為",

　　type,

　　"謝謝班長, 我準備了20個bug, 回饋給你"

　　);

　　return fn();

　　})

　　.then(function (type) {

　　console.log(

　　"第二次: 因為",

　　type,

　　"謝謝班長, 我準備了20個bug, 回饋給你"

　　);

　　return fn();

　　})

　　.then(function (type) {

　　console.log(

　　"第三次: 因為",

　　type,

　　"謝謝班長, 我準備了20個bug, 回饋給你"

　　);

　　return fn();

　　})

　　.catch(function (type) {

　　console.log("因為", type, "謝謝班長, 我準備了800個bug, 開心死你");

　　});

　　●promise 的其他方法

　　●Promise 實例的 finally 方法

　　○不管promise是成功還是失敗, 只要 promise 執行結束, 我都會執行

　　fn()

　　.then(function (res) {

　　console.log("成功");

　　})

　　.catch(function (res) {

　　console.log("失敗");

　　})

　　.finally(function () {

　　console.log(

　　"不管promise是成功還是失敗, 只要 promise 執行結束, 我都會執行"

　　);

　　});

　　Promise 本身還有一些方法

　　○all:

　　■作用: 可以同時觸發多個 promise 行為

　　●只有所有的 promise 都成功的時候, all 才算成功

　　●只要任何一個 promise 失敗的時候, all 就算失敗了

　　■語法: Promise.all([多個 promise])

　　○race:

　　■作用: 可以同時觸發多個 promise 行為

　　●按照速度計算, 當第一個結束的時候就結束了, 成功或失敗取決于第一個執行結束的 promise

　　■語法: Promise.race([多個 promise])

　　○allSettled

　　■作用: 可以同時觸發多個 Promise 行為

　　●不管多個成功還是失敗都會觸發

　　●會在結果內以數組的形式給你返回 每一個 promise 行為的成功還是失敗

　　■語法: Promise.allSettled([多個 promise])

　　○resolve

　　■作用: 強制返回一個成功狀態的 promise 對象

　　○reject

　　■作用: 強制返回一個失敗狀態的 promise 對象

　　// 1. all

　　Promise.all([fn(), fn(), fn()])

　　.then(function () {

　　console.log("所有的 參數 都返回 成功狀態");

　　})

　　.catch(function () {

　　console.log("這些參數中, 有一個 為 失敗狀態");

　　});

　　// 2. race

　　Promise.race([fn(), fn(), fn()])

　　.then(function () {

　　console.log("速度最快的那個執行完畢, 并且是成功狀態時 執行");

　　})

　　.catch(function () {

　　console.log("速度最快的那個執行完畢, 并且是失敗狀態時 執行");

　　});

　　// 3. allSettled

　　Promise.allSettled([fn(), fn(), fn()])

　　.then(function (res) {

　　console.log(res);

　　})

　　.catch(function (res) {

　　console.log(res);

　　});

　　// 4. resolve

　　Promise.resolve()

　　.then(function (res) {

　　console.log("成功");

　　})

　　.catch(function (res) {

　　console.log("失敗");

　　});

　　// 5. reject

　　Promise.reject()

　　.then(function (res) {

　　console.log("成功");

　　})

　　.catch(function (res) {

　　console.log("失敗");

　　});