1. Promise 之前

1.1 回調函數(shù)

回調函數(shù)：把函數(shù)A當作參數(shù)傳遞給另一個函數(shù)B調用，那么A就是回調函數(shù)拘泞。
一些例子
具名回調

function 你有幾只狗(fn){
    fn('一只狗')
}
function 數(shù)狗(數(shù)量){
    console.log(數(shù)量)
}
你有幾只狗(數(shù)狗)   // 一只狗

匿名回調

function 你有幾只狗(fn){
    fn('一只狗')
}
你有幾只狗(function(數(shù)量){
console.log(數(shù)量) 
})         //  一只狗

常見的例子
jQuery中使用回調函數(shù)征炼，這里用的是匿名回調的方式

$("#btn").click(function(){
    console.log('點到我了')
})

1.2 回調地獄（回調缺點1）

回調地獄：指的是回調嵌套過多的情況肛炮，導致代碼很難被看懂厚棵。

let info = []
function 你有幾只狗(fn){
    fn('一只狗')
}
function 你有幾只貓(fn){
    fn('一只貓')
}
function 知道了(數(shù)量,callback){
    info.push(數(shù)量)
    console.log(info)
    if(callback){
        callback()
    }
}
// 開始調用 如果比這再多幾層烤宙，就不容易看懂了
你有幾只狗(function(狗數(shù)){
    console.log(狗數(shù))
    知道了(狗數(shù), function(){
        你有幾只貓(function(貓數(shù)){
            console.log(貓數(shù))
            知道了(貓數(shù))
        })
    })
})

1.3 不使用Promise二汛，如何解決

利用具名函數(shù)代替匿名函數(shù)

let info = []
function 你有幾只狗(fn){
    fn('一只狗')
}
function 你有幾只貓(fn){
    fn('一只貓')
}
function 知道了(數(shù)量,callback){
    info.push(數(shù)量)
    console.log(info)
    if(callback){
        callback()
    }
}
function 告訴你貓的個數(shù)(貓數(shù)){
    console.log(貓數(shù))
    知道了(貓數(shù))
}
function 繼續(xù)數(shù)(){
    你有幾只貓(告訴你貓的個數(shù))
}
function 告訴你狗的個數(shù)(狗數(shù)){
    console.log(狗數(shù))
    知道了(狗數(shù), 繼續(xù)數(shù))
}
你有幾只狗(告訴你狗的個數(shù))  // 好像也沒好到哪去婿崭。。肴颊。

1.4 回調方式各不相同氓栈，需要單獨記憶（回調缺點2）

readFile('C:\\1.txt',function (error, data) {   // node.js 讀取文件方法中的回調
        if(error) {
            console.log('成功')
            console.log(data.toString())
        } else {
            console.log('讀取文件失敗')
        }
    })

$.ajax({                              // jQuery中ajax方法中的回調
    url:'/2.txt'
    success: function(response) {
        console.log('成功')
    },
    error: function(){
        console.log('失敗')
    }
})

2. Promise 的目的

Promise 是異步編程的一種解決方案，比傳統(tǒng)的解決方案——回調函數(shù)和事件——更合理和更強大婿着。它由社區(qū)最早提出和實現(xiàn)授瘦，ES6 將其寫進了語言標準，統(tǒng)一了用法竟宋，原生提供了Promise對象提完。

3. Promise 的原理

3.1 實現(xiàn)原理

ES6 規(guī)定，Promise對象是一個構造函數(shù)丘侠，用來生成Promise實例徒欣。通過在函數(shù)內部return 一個 Promise對象的實例，這樣就可以使用Promise的屬性和方法進行下一步操作了蜗字。

function 函數(shù)名(){
    return new Promise(function(resolve, reject) {
        // ... some code
          if (/* 異步操作成功 */){
            resolve(value);   // 異步操作成功時調用打肝，把結果作為參數(shù)傳遞出去
          } else {
            reject(error);     // 異步失敗時調用脂新，把錯誤作為參數(shù)傳遞出去
          }
        
    })
}

3.2 調用邏輯

3.2.png

S1和E1兩個都沒有報錯，執(zhí)行S2（resolve執(zhí)行粗梭，系統(tǒng)認為搞定了争便，沒報錯）
S1和E1任何一個有報錯，執(zhí)行E2（reject執(zhí)行断医，系統(tǒng)認為沒搞定滞乙，報錯了）

4. Promise 的使用

4.1 Promise 的屬性與方法

屬性
Promise.prototype 表示 Promise 構造器的原型
方法
Promise.prototype.then()
返回一個 Promise 。它最多需要有兩個參數(shù)：Promise 的成功和失敗情況的回調函數(shù)鉴嗤。
Promise.prototype.catch()
返回一個Promise酷宵，并且處理拒絕的情況。等價于Promise.prototype.then(undefined, onRejected)
Promise.prototype.finally()
finally() 方法返回一個Promise躬窜，在執(zhí)行then()和catch()后浇垦，都會執(zhí)行finally指定的回調函數(shù)。避免同樣的語句需要在then()和catch()中各寫一次的情況荣挨。
Promise.all(iterable)
返回一個 Promise 實例男韧，iterable參數(shù)內所有的 promise 都resolved后，才回調完成resolve默垄。
Promise.race(iterable)
返回一個 promise 此虑，并伴隨著 promise對象解決的返回值或拒絕的錯誤原因, 只要 iterable 中有一個 promise 對象"解決(resolve)"或"拒絕(reject)"。
Promise.resolve()
返回一個以給定值解析后的Promise對象口锭。但如果這個值是個thenable（即帶有then方法）朦前，返回的promise會“跟隨”這個thenable的對象，采用它的最終狀態(tài)（指resolved/rejected/pending/settled）鹃操；如果傳入的value本身就是promise對象韭寸，則該對象作為Promise.resolve方法的返回值返回；否則以該值為成功狀態(tài)返回promise對象荆隘。
Promise.reject()
返回一個帶有拒絕原因reason參數(shù)的Promise對象恩伺。

4.2 將回調地獄中的例子，改寫為Promise的形式

4.2-1.png

4.2-2.png

4.2-3.png

4.2-4.png

4.2-5.png

4.2-6.png

4.2-7.png

4.2-8.png

4.2-9.png

4.2-10.png

4.3 應用

加載圖片
將圖片的加載寫成一個Promise效斑，一旦加載完成，Promise的狀態(tài)就發(fā)生變化柱徙。

const preloadImage = function (path) {
  return new Promise(function (resolve, reject) {
    const image = new Image();
    image.onload  = resolve;
    image.onerror = reject;
    image.src = path;
  });
};

Generator 函數(shù)與 Promise 的結合（詳情見參考鏈接缓屠，阮一峰的教程）

5. 干掉Promise中的回調

5.1 await

成功的情況

5.1-1.png

失敗的情況
利用 try catch

5.1-2.png

6. 總結

能利用Promise對象护侮，把普通函數(shù)改成返回Promise的形式敌完，解決回調地獄的問題。
明白Promise的成功失敗調用邏輯羊初，可以靈活的進行調整滨溉。
理解核心知識，先用起來长赞，慢慢整合吸收知識晦攒。

7. 參考鏈接

• https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise
• http://es6.ruanyifeng.com/#docs/promise
• https://www.w3cplus.com/javascript/Sexy-Javascript-understand-the-callback-function-with-the-use-of-Javascript-in.html
• https://juejin.im/entry/57fa6a4e67f3560058752542