你全面了解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);});

//回调函数举例1$("#btn").click(() => {  alert("我是回调函数里的内容，点击后才出现，并没有立即执行");});
//回调函数举例2function runAsyncMain(callback){    callback();    console.log('我是主函数');  }function runAsyncCallback(){    setTimeout(() => {        console.log('我是回调函数');    }, 2000);    //此处模拟延迟加载}runAsyncMain(runAsyncCallback);  //（先输出）我是主函数    (2s后输出) 我是回调函数

// 需求：当一个ajax结束后，得到的值，需要作为另外一个ajax的参数被使用（即该参数得从上一个ajax请求中获取）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) => {    // 此处代码会立即执行    // 当调用栈内容处理结束后，再通过promise.then()方法调用resolve 或 reject返回的数据});

promise.then(onFulfilled, onRejected)

promise.catch(onRejected)

//then和catch方法 举例function asyncFunction(value) {    var p = new Promise((resolve, reject) => {        if(typeof(value) == 'number'){            resolve("我是数字");        }else {            reject("我不是数字");        }    });    return p;}
// 写法1：同时使用then和catch方法asyncFunction(123).then(value => {      console.log(value);   }).catch(error => {    console.log(error);});//执行结果：我是数字//解说：执行过程 // 1、在asyncFunction这个方法中创建一个Promise构造函数p，只要执行asyncFunction()就会返回一个Promise对象；// 2、asyncFunction方法表示：如果传入的参数value值是数字，就输出"我是数字"，如果不是数字，就输出"我不是数字"// 3、写法1中，为promise对象用设置 .then 方法调用返回值时的回调函数，.catch 方法来设置发生错误时的回调函数// 4、promise对象会先判断resolve，并执行then方法，如果resolve执行通过，则不会执行catch方法，若上面代码在执行中产生异常，在 catch 中设置的回调函数就会被执行，并输出error。
// 写法2：只使用 then方法，不使用catch 方法asyncFunction('abc').then((value) => {      console.log(value);   },(error) => {    console.log(error);});//执行结果：我不是数字

var p = new Promise((resolve, reject) => {    //做一些异步操作    setTimeout(() => {        console.log('执行完成');        resolve('我的数据');    }, 0);    console.log("我先执行")});//先输出：我先执行//1秒之后输出：执行完成

function asyncFunction(num) {    var p = new Promise((resolve, reject) => {  //创建一个Promise的新对象p        if (typeof num == 'number') {            resolve();        } else {            reject();        }    });    p.then(function() {  //这个（第一个）function是resolve对应的参数        console.log('这个是数字');    }, function() {    //这个（第二个）function是reject对应的参数        console.log('我不是数字');    })    return p;  //此处返回对象p}
//执行这个函数我们得到了一个Promise构造出来的对象p，所以p.__proto__ === Promise.prototype，即p的指针指向了构造函数Promise，因此asyncFunction()能够使用Promise的属性和方法
//此种写法可以多次调用asyncFunction这个方法asyncFunction('hahha');  //我不是数字asyncFunction(1234);  //这个是数字

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`毫秒后执行resolvefunction timerPromisefy(delay) {    return new Promise(resolve => {        setTimeout(() => {            resolve(delay);        }, delay);    });}var startDate = Date.now();// 所有promise变为resolve后程序退出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的三种状态常量  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')      }      // 添加状态      this._status = PENDING      // 添加状态      this._value = undefined      // 添加成功回调函数队列      this._fulfilledQueues = []      // 添加失败回调函数队列      this._rejectedQueues = []      // 执行handle      try {        handle(this._resolve.bind(this), this._reject.bind(this))       } catch (err) {        this._reject(err)      }    }    // 添加resovle时执行的函数    _resolve (val) {      const run = () => {        if (this._status !== PENDING) return        // 依次执行成功队列中的函数，并清空队列        const runFulfilled = (value) => {          let cb;          while (cb = this._fulfilledQueues.shift()) {            cb(value)          }        }        // 依次执行失败队列中的函数，并清空队列        const runRejected = (error) => {          let cb;          while (cb = this._rejectedQueues.shift()) {            cb(error)          }        }        /* 如果resolve的参数为Promise对象，则必须等待该Promise对象状态改变后,          当前Promsie的状态才会改变，且状态取决于参数Promsie对象的状态        */        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时执行的函数    _reject (err) {       if (this._status !== PENDING) return      // 依次执行失败队列中的函数，并清空队列      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) => {        // 封装一个成功时执行的函数        let fulfilled = value => {          try {            if (!isFunction(onFulfilled)) {              onFulfilledNext(value)            } else {              let res =  onFulfilled(value);              if (res instanceof MyPromise) {                // 如果当前回调函数返回MyPromise对象，必须等待其状态改变后在执行下一个回调                res.then(onFulfilledNext, onRejectedNext)              } else {                //否则会将返回结果直接作为参数，传入下一个then的回调函数，并立即执行下一个then的回调函数                onFulfilledNext(res)              }            }          } catch (err) {            // 如果函数执行出错，新的Promise对象的状态为失败            onRejectedNext(err)          }        }        // 封装一个失败时执行的函数        let rejected = error => {          try {            if (!isFunction(onRejected)) {              onRejectedNext(error)            } else {                let res = onRejected(error);                if (res instanceof MyPromise) {                  // 如果当前回调函数返回MyPromise对象，必须等待其状态改变后在执行下一个回调                  res.then(onFulfilledNext, onRejectedNext)                } else {                  //否则会将返回结果直接作为参数，传入下一个then的回调函数，并立即执行下一个then的回调函数                  onFulfilledNext(res)                }            }          } catch (err) {            // 如果函数执行出错，新的Promise对象的状态为失败            onRejectedNext(err)          }        }        switch (_status) {          // 当状态为pending时，将then方法回调函数加入执行队列等待执行          case PENDING:            this._fulfilledQueues.push(fulfilled)            this._rejectedQueues.push(rejected)            break          // 当状态已经改变时，立即执行对应的回调函数          case FULFILLED:            fulfilled(_value)            break          case REJECTED:            rejected(_value)            break        }      })    }    // 添加catch方法    catch (onRejected) {      return this.then(undefined, onRejected)    }    // 添加静态resolve方法    static resolve (value) {      // 如果参数是MyPromise实例，直接返回这个实例      if (value instanceof MyPromise) return value      return new MyPromise(resolve => resolve(value))    }    // 添加静态reject方法    static reject (value) {      return new MyPromise((resolve ,reject) => reject(value))    }    // 添加静态all方法    static all (list) {      return new MyPromise((resolve, reject) => {        /**         * 返回值的集合         */        let values = []        let count = 0        for (let [i, p] of list.entries()) {          // 数组参数如果不是MyPromise实例，先调用MyPromise.resolve          this.resolve(p).then(res => {            values[i] = res            count++            // 所有状态都变成fulfilled时返回的MyPromise状态就变成fulfilled            if (count === list.length) resolve(values)          }, err => {            // 有一个被rejected时返回的MyPromise状态就变成rejected            reject(err)          })        }      })    }    // 添加静态race方法    static race (list) {      return new MyPromise((resolve, reject) => {        for (let p of list) {          // 只要有一个实例率先改变状态，新的MyPromise的状态就跟着改变          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