你全面了解Promise嗎？

var promise = new Promise((resolve,reject) => {    if(true) { resolve(100) };    if(false) { reject('error') };});//使用promise.then(value => {    console.log(value);    //100}).catch(error => {    console.error(error);});

//回調函數(shù)舉例1$("#btn").click(() => {  alert("我是回調函數(shù)里的內容，點擊后才出現(xiàn)，并沒有立即執(zhí)行");});
//回調函數(shù)舉例2function runAsyncMain(callback){    callback();    console.log('我是主函數(shù)');  }function runAsyncCallback(){    setTimeout(() => {        console.log('我是回調函數(shù)');    }, 2000);    //此處模擬延遲加載}runAsyncMain(runAsyncCallback);??//（先輸出）我是主函數(shù)????(2s后輸出)?我是回調函數(shù)

// 需求：當一個ajax結束后，得到的值，需要作為另外一個ajax的參數(shù)被使用（即該參數(shù)得從上一個ajax請求中獲?。?/span>var url = 'XXXXXX';var result;
var XHR = new XMLHttpRequest();XHR.open('GET', url, true);    //第一個ajax請求XHR.send();
XHR.onreadystatechange = function() {    if (XHR.readyState == 4 && XHR.status == 200) {        result = XHR.response;        console.log(result);        // 偽代碼        var url2 = 'XXXXXX' + result.someParams;    //通過第一個ajax請求的結果，得到第二個ajax請求所需要的url        var XHR2 = new XMLHttpRequest();        XHR2.open('GET', url2, true);      //第二個ajax請求        XHR2.send();        XHR2.onreadystatechange = function() {            ...                      //往復上述過程，會得到第三個ajax請求所需要的url值，然后進行第三個ajax請求，在得到第四個……  超恐怖        }    }}

var promise = new Promise((resolve, reject) => {    // 此處代碼會立即執(zhí)行    // 當調用棧內容處理結束后，再通過promise.then()方法調用resolve 或 reject返回的數(shù)據(jù)});

promise.then(onFulfilled, onRejected)

promise.catch(onRejected)

//then和catch方法 舉例function asyncFunction(value) {    var p = new Promise((resolve, reject) => {        if(typeof(value) == 'number'){            resolve("我是數(shù)字");        }else {            reject("我不是數(shù)字");        }    });    return p;}
// 寫法1：同時使用then和catch方法asyncFunction(123).then(value => {      console.log(value);   }).catch(error => {    console.log(error);});//執(zhí)行結果：我是數(shù)字//解說：執(zhí)行過程 // 1、在asyncFunction這個方法中創(chuàng)建一個Promise構造函數(shù)p，只要執(zhí)行asyncFunction()就會返回一個Promise對象；// 2、asyncFunction方法表示：如果傳入的參數(shù)value值是數(shù)字，就輸出"我是數(shù)字"，如果不是數(shù)字，就輸出"我不是數(shù)字"// 3、寫法1中，為promise對象用設置 .then 方法調用返回值時的回調函數(shù)，.catch 方法來設置發(fā)生錯誤時的回調函數(shù)// 4、promise對象會先判斷resolve，并執(zhí)行then方法，如果resolve執(zhí)行通過，則不會執(zhí)行catch方法，若上面代碼在執(zhí)行中產(chǎn)生異常，在 catch 中設置的回調函數(shù)就會被執(zhí)行，并輸出error。
// 寫法2：只使用 then方法，不使用catch 方法asyncFunction('abc').then((value) => {      console.log(value);   },(error) => {    console.log(error);});//執(zhí)行結果：我不是數(shù)字

var p = new Promise((resolve, reject) => {    //做一些異步操作    setTimeout(() => {        console.log('執(zhí)行完成');        resolve('我的數(shù)據(jù)');    }, 0);    console.log("我先執(zhí)行")});//先輸出：我先執(zhí)行//1秒之后輸出：執(zhí)行完成

function asyncFunction(num) {    var p = new Promise((resolve, reject) => {  //創(chuàng)建一個Promise的新對象p        if (typeof num == 'number') {            resolve();        } else {            reject();        }    });    p.then(function() {  //這個（第一個）function是resolve對應的參數(shù)        console.log('這個是數(shù)字');    }, function() {    //這個（第二個）function是reject對應的參數(shù)        console.log('我不是數(shù)字');    })    return p;  //此處返回對象p}
//執(zhí)行這個函數(shù)我們得到了一個Promise構造出來的對象p，所以p.__proto__ === Promise.prototype，即p的指針指向了構造函數(shù)Promise，因此asyncFunction()能夠使用Promise的屬性和方法
//此種寫法可以多次調用asyncFunction這個方法asyncFunction('hahha');  //我不是數(shù)字asyncFunction(1234);??//這個是數(shù)字

var aPromise = new Promise(resolve => {    resolve(100);});// aPromise為原promise對象// 下面分開進行.then和.catch操作var thenPromise = aPromise.then(value => {    console.log(value);});var catchPromise = thenPromise.catch(error => {    console.error(error);});console.log(aPromise !== thenPromise); // => trueconsole.log(aPromise !== catchPromise); // => trueconsole.log(thenPromise !== catchPromise);// => true

// 1: 對同一個promise對象同時調用 `then` 方法var aPromise = new Promise(resolve => {    resolve(100);});aPromise.then(value => {    return value * 2;});aPromise.then(value => {    return value * 2;});aPromise.then(value => {    console.log("1: " + value); // 1: 100})
// vs
// 2: 對 `then` 進行 promise 鏈式 方式進行調用var bPromise = new Promise(resolve => {    resolve(100);});bPromise.then(value => {    return value * 2;}).then(value => {    return value * 2;}).then(value => {    console.log("2: " + value); // 2: 400});

var url = 'XXXXX';
// 封裝一個get請求的方法function getJSON(url) {    return new Promise((resolve, reject) => {        var XHR = new XMLHttpRequest();        XHR.open('GET', url, true);        XHR.send();
        XHR.onreadystatechange = function() {            if (XHR.readyState == 4) {                if (XHR.status == 200) {                    try {                        var response = JSON.parse(XHR.responseText);                        resolve(response);                    } catch (e) {                        reject(e);                    }                } else {                    reject(new Error(XHR.statusText));                }            }        }    })}
getJSON(url)    .then(resp => {        console.log(response);        return url2 = 'http:xxx.yyy.com/zzz?ddd=' + resp;    })    .then(resp => {        console.log(response);        return url3 = 'http:xxx.yyy.com/zzz?ddd=' + resp;    });

new Promise(resolve => {    resolve(100);});// 等價于Promise.resolve(100);  //Promise.resolve(100); 可以認為是上述代碼的語法糖。
// 使用方法Promise.resolve(100).then(value => {    console.log(value);});

var promise = Promise.resolve($.ajax('/json/comment.json'));// => promise對象promise.then(function(value){   console.log(value);});

new Promise((resolve,reject) => {    reject(new Error("出錯了"));});// 等價于 Promise.reject(new Error("出錯了"));  // Promise.reject(new Error("出錯了")) 就是上述代碼的語法糖。
// 使用方法Promise.reject(new Error("BOOM!")).catch(error => {    console.error(error);});

// `delay`毫秒后執(zhí)行resolvefunction timerPromisefy(delay) {    return new Promise(resolve => {        setTimeout(() => {            resolve(delay);        }, delay);    });}var startDate = Date.now();// 所有promise變?yōu)閞esolve后程序退出Promise.all([    timerPromisefy(1),    timerPromisefy(32),    timerPromisefy(64),    timerPromisefy(128)]).then(values => {    console.log(Date.now() - startDate + 'ms');    // 約128ms    console.log(values);    // [1,32,64,128]});

function test1() {    console.log("test1");}function test2() {    console.log("test2");}function onRejected(error) {    console.log("捕獲錯誤: test1 or test2", error);}function test3() {    console.log("end");}
var promise = Promise.resolve();promise    .then(test1)    .then(test2)    .catch(onRejected)    .then(test3);

// 判斷變量否為function  const isFunction = variable => typeof variable === 'function'  // 定義Promise的三種狀態(tài)常量  const PENDING = 'PENDING'  const FULFILLED = 'FULFILLED'  const REJECTED = 'REJECTED'
  class MyPromise {    constructor (handle) {      if (!isFunction(handle)) {        throw new Error('MyPromise must accept a function as a parameter')      }      // 添加狀態(tài)      this._status = PENDING      // 添加狀態(tài)      this._value = undefined      // 添加成功回調函數(shù)隊列      this._fulfilledQueues = []      // 添加失敗回調函數(shù)隊列      this._rejectedQueues = []      // 執(zhí)行handle      try {        handle(this._resolve.bind(this), this._reject.bind(this))       } catch (err) {        this._reject(err)      }    }    // 添加resovle時執(zhí)行的函數(shù)    _resolve (val) {      const run = () => {        if (this._status !== PENDING) return        // 依次執(zhí)行成功隊列中的函數(shù)，并清空隊列        const runFulfilled = (value) => {          let cb;          while (cb = this._fulfilledQueues.shift()) {            cb(value)          }        }        // 依次執(zhí)行失敗隊列中的函數(shù)，并清空隊列        const runRejected = (error) => {          let cb;          while (cb = this._rejectedQueues.shift()) {            cb(error)          }        }        /* 如果resolve的參數(shù)為Promise對象，則必須等待該Promise對象狀態(tài)改變后,          當前Promsie的狀態(tài)才會改變，且狀態(tài)取決于參數(shù)Promsie對象的狀態(tài)        */        if (val instanceof MyPromise) {          val.then(value => {            this._value = value            this._status = FULFILLED            runFulfilled(value)          }, err => {            this._value = err            this._status = REJECTED            runRejected(err)          })        } else {          this._value = val          this._status = FULFILLED          runFulfilled(val)        }      }      // 為了支持同步的Promise，這里采用異步調用      setTimeout(run, 0)    }    // 添加reject時執(zhí)行的函數(shù)    _reject (err) {       if (this._status !== PENDING) return      // 依次執(zhí)行失敗隊列中的函數(shù)，并清空隊列      const run = () => {        this._status = REJECTED        this._value = err        let cb;        while (cb = this._rejectedQueues.shift()) {          cb(err)        }      }      // 為了支持同步的Promise，這里采用異步調用      setTimeout(run, 0)    }    // 添加then方法    then (onFulfilled, onRejected) {      const { _value, _status } = this      // 返回一個新的Promise對象      return new MyPromise((onFulfilledNext, onRejectedNext) => {        // 封裝一個成功時執(zhí)行的函數(shù)        let fulfilled = value => {          try {            if (!isFunction(onFulfilled)) {              onFulfilledNext(value)            } else {              let res =  onFulfilled(value);              if (res instanceof MyPromise) {                // 如果當前回調函數(shù)返回MyPromise對象，必須等待其狀態(tài)改變后在執(zhí)行下一個回調                res.then(onFulfilledNext, onRejectedNext)              } else {                //否則會將返回結果直接作為參數(shù)，傳入下一個then的回調函數(shù)，并立即執(zhí)行下一個then的回調函數(shù)                onFulfilledNext(res)              }            }          } catch (err) {            // 如果函數(shù)執(zhí)行出錯，新的Promise對象的狀態(tài)為失敗            onRejectedNext(err)          }        }        // 封裝一個失敗時執(zhí)行的函數(shù)        let rejected = error => {          try {            if (!isFunction(onRejected)) {              onRejectedNext(error)            } else {                let res = onRejected(error);                if (res instanceof MyPromise) {                  // 如果當前回調函數(shù)返回MyPromise對象，必須等待其狀態(tài)改變后在執(zhí)行下一個回調                  res.then(onFulfilledNext, onRejectedNext)                } else {                  //否則會將返回結果直接作為參數(shù)，傳入下一個then的回調函數(shù)，并立即執(zhí)行下一個then的回調函數(shù)                  onFulfilledNext(res)                }            }          } catch (err) {            // 如果函數(shù)執(zhí)行出錯，新的Promise對象的狀態(tài)為失敗            onRejectedNext(err)          }        }        switch (_status) {          // 當狀態(tài)為pending時，將then方法回調函數(shù)加入執(zhí)行隊列等待執(zhí)行          case PENDING:            this._fulfilledQueues.push(fulfilled)            this._rejectedQueues.push(rejected)            break          // 當狀態(tài)已經(jīng)改變時，立即執(zhí)行對應的回調函數(shù)          case FULFILLED:            fulfilled(_value)            break          case REJECTED:            rejected(_value)            break        }      })    }    // 添加catch方法    catch (onRejected) {      return this.then(undefined, onRejected)    }    // 添加靜態(tài)resolve方法    static resolve (value) {      // 如果參數(shù)是MyPromise實例，直接返回這個實例      if (value instanceof MyPromise) return value      return new MyPromise(resolve => resolve(value))    }    // 添加靜態(tài)reject方法    static reject (value) {      return new MyPromise((resolve ,reject) => reject(value))    }    // 添加靜態(tài)all方法    static all (list) {      return new MyPromise((resolve, reject) => {        /**         * 返回值的集合         */        let values = []        let count = 0        for (let [i, p] of list.entries()) {          // 數(shù)組參數(shù)如果不是MyPromise實例，先調用MyPromise.resolve          this.resolve(p).then(res => {            values[i] = res            count++            // 所有狀態(tài)都變成fulfilled時返回的MyPromise狀態(tài)就變成fulfilled            if (count === list.length) resolve(values)          }, err => {            // 有一個被rejected時返回的MyPromise狀態(tài)就變成rejected            reject(err)          })        }      })    }    // 添加靜態(tài)race方法    static race (list) {      return new MyPromise((resolve, reject) => {        for (let p of list) {          // 只要有一個實例率先改變狀態(tài)，新的MyPromise的狀態(tài)就跟著改變          this.resolve(p).then(res => {            resolve(res)          }, err => {            reject(err)          })        }      })    }    finally (cb) {      return this.then(        value  => MyPromise.resolve(cb()).then(() => value),        reason => MyPromise.resolve(cb()).then(() => { throw reason })      );    }  }
// 源碼鏈接：https://juejin.im/post/5b83cb5ae51d4538cc3ec354