回調函數callback及promise

同步與異步

javascript語言是一門“單線程”的語言，javascript就像一條流水線，僅僅是一條流水線而已，要麼加工，要麼包裝，不能同時進行多個任務和流程,無論如何，js做事情的時候都是隻有一條流水線（單線程），同步和異步的差別就在於這條流水線上各個流程的執行順序不同。
同步任務：在主線程上排隊執行的任務，只有前一個任務執行完畢，才能執行後一個任務；
異步任務：不進入主線程、而進入"任務隊列"的任務，只有等主線程任務執行完畢，"任務隊列"開始通知主線程，請求執行任務，該任務纔會進入主線程執行。

回調函數

—函數當參數，傳遞另外一個函數
在JavaScript中，回調函數具體的定義爲：函數A作爲參數(函數引用)傳遞到另一個函數B中,並且這個函數B執行函數A。我們就說函數A叫做回調函數。如果沒有名稱(函數表達式)，就叫做匿名回調函數。
但是回調函數有一個弊端，多層嵌套可讀性很差，這個稱之爲 “回調地獄”

—回調函數簡單應用—
–回調函數將函數內部的值帶出來

function fn(callback){
            $ajax({
                url:'數據接口地址',
                success:function(data){
                    let arrdata = JSON.parse(data);
                    callback(arrdata);
                }
            });
        }
        fn(function(d){
            console.log(d);
        });

–數組的一些方法：如every/some/filter/map/forEach

let arr = [1, 2, 3, 4];
        let arr2 = arr.filter((v) => {
            return v % 2;
        });
        console.log(arr2);

–定時器內部的函數
–事件處理回調函數

ES6新增—promise

Promise 異步編程的一種解決方案，比傳統的解決方案——回調函數和事件——更合理和更強大。
Promise對象有以下兩個特點：
（1）對象的狀態不受外界影響。Promise對象代表一個異步操作，有三種狀態：pending（進行中）、fulfilled（resolve已成功）和rejected（已失敗）。
（2）一旦狀態設定，就不會再變，任何時候都可以得到這個結果。Promise對象的狀態改變，只有兩種可能：從pending變爲fulfilled和從pending變爲rejected。只要這兩種情況發生，狀態就凝固了；
promise狀態：pending(進行中) resolve(成功，已解決) reject(失敗，未解決)
pending–>resolve 進行中–>成功
pending–>reject 進行中–>失敗

resolve, reject這裏兩個形參是兩個函數， 用來設定狀態。
resolve(‘設置狀態裏面的參數’); //成功–>找實例對象下面的then方法 ，括號裏面的參數傳給then裏面函數。
reject(); //失敗–>找實例對象下面的catch方法，括號裏面的參數傳給catch裏面函數。
});

   let promise = new Promise((resolve, reject) => { 
   resolve('設置狀態裏面的參數');
   reject();
  }
    //寫法1
    promise.then((info) => {
        console.log('成功的回調');
        console.log(info);
    }).catch(() => {
        console.log('失敗的回調');
    });

    //寫法2
    promise.then(() => { //成功的回調
        console.log('成功的回調');
    }, () => { //失敗的回調
        console.log('失敗的回調');
    })

    //寫法3
    promise
        .then(() => {
            console.log('成功的回調1');
        })
        .then(() => {
            console.log('成功的回調2');
        })
        .catch(() => {
            console.log('失敗的回調');
        });

promise原型下面兩個常用的方法：
Promise.prototype.then / Promise.prototype.catch
resolve函數的作用是， 將Promise對象的狀態從“ 未完成” 變爲“ 成功”（ 即從 pending 變爲 resolved）， 在異步操作成功時調用， 並將異步操作的結果， 作爲參數傳遞出去；
reject函數的作用是， 將Promise對象的狀態從“ 未完成” 變爲“ 失敗”（ 即從 pending 變爲 rejected）， 在異步操作失敗時調用， 並將異步操作報出的錯誤， 作爲參數傳遞出去。
此外還有Promise.prototype.finally，
finally方法用於指定不管 Promise 對象最後狀態如何，都會執行的操作。該方法是 ES2018 引入標準的。

promise下面的兩個靜態方法：
Promise.all()：用於將多個 Promise 實例，包裝成一個新的 Promise 實例，接受一個數組作爲參數，只有數組裏面的每個狀態都變成resolve，則新的Promise實例狀態纔會變成resolve.
Promise.race():賽跑的意思。那個狀態改變最快，跟着狀態。

let p1 = new Promise((resolve, reject) => {
            setTimeout(() => {
                reject('任務1');
            }, 3000);
        });
        let p2 = new Promise((resolve, reject) => {
            setTimeout(() => {
                reject('任務2');
            }, 1000);
        });
        let p3 = new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve('任務3');
            }, 500);
        });

        let newpromise = Promise.all([p1, p2, p3]);
        newpromise.then(function(data) {
            console.log(data); //數組  ["任務1", "任務2", "任務3"],，接受一個數組作爲參數，只有數組裏面的每個狀態都變成resolve，則新的 Promise 實例狀態纔會變成resolve
        }).catch(function() {
            console.log('失敗的狀態');
        })

        let newpromise2 = Promise.race([p1, p2, p3]);
        newpromise2.then(function(data) {
            console.log(data); //數組  ["任務1", "任務2", "任務3"]
        }).catch(function(data) {
            console.log(data);
        });