JS：你真的会用 Promise 吗？

try{
  // 请求1
  $.ajax({
    url: url1,
    success: function(data1){
      // 请求2
      try{
        $.ajax({
          url: url1,
          data: data1,
          success: function(data2){
            try{
              // 请求3
              $.ajax({
                url: url1,
                data: data2,
                success: function(data3){
                  // 后续业务逻辑...
                }
              });
            }catch(ex3){
              // 请求3的异常处理
            }
          }
        })
      }catch(ex){
        // 请求2的异常处理
      }
    }
  })
}catch(ex1){
  // 请求1的异常处理
}

var promise1 = new Promise(function(resolve, reject) {
  setTimeout(function() {
    resolve('foo');
  }, 300);
});

promise1.then(function(value) {
  console.log(value);
  // after 300ms, expected output: "foo"
});

const p = new Promise((resolve, reject)=>{
  resolve("resolved first time!"); // 只有第一次有效
  resolve("resolved second time!");
  reject("rejected!");
});
p.then(
  (data)=>console.log(data), 
  (error)=>console.log(error)
);

// 1. 构造方法
const p = new Promise((resolve, reject) => { /* executor*/
    // 1.1. Promise构造函数执行时立即调用 executor 函数;
    // 1.2. resolve 和 reject 函数被调用时，分别将promise的状态改为fulfilled（完成）或rejected（失败）
    // 1.3. 如果在executor函数中抛出一个错误，那么该promise 状态为rejected。
    // 1.4. executor函数的返回值被忽略。
});

// 2.原型方法
Promise.prototype.catch(onRejected)
Promise.prototype.then(onFulfilled, onRejected)

// 3.静态方法
Promise.all(iterable);
Promise.race(iterable);
Promise.reject(reason);
Promise.resolve(value);

function imgLoad(url) {
    // Create new promise with the Promise() constructor;
    // This has as its argument a function
    // with two parameters, resolve and reject
    return new Promise(function(resolve, reject) {
      // Standard XHR to load an image
      var request = new XMLHttpRequest();
      request.open('GET', url);
      request.responseType = 'blob';
      // When the request loads, check whether it was successful
      request.onload = function() {
        if (request.status === 200) {
          // If successful, resolve the promise by passing back the request response
          resolve(request.response);
        } else {
          // If it fails, reject the promise with a error message
          reject(Error('Image didn\'t load successfully; error code:' + request.statusText));
        }
      };
      request.onerror = function() {
          // Also deal with the case when the entire request fails to begin with
          // This is probably a network error, so reject the promise with an appropriate message
          reject(Error('There was a network error.'));
      };
      // Send the request
      request.send();
    });
  }
  // Get a reference to the body element, and create a new image object
  var body = document.querySelector('body');
  var myImage = new Image();
  // Call the function with the URL we want to load, but then chain the
  // promise then() method on to the end of it. This contains two callbacks
  imgLoad('myLittleVader.jpg').then(function(response) {
    // The first runs when the promise resolves, with the request.response
    // specified within the resolve() method.
    var imageURL = window.URL.createObjectURL(response);
    myImage.src = imageURL;
    body.appendChild(myImage);
    // The second runs when the promise
    // is rejected, and logs the Error specified with the reject() method.
  }, function(Error) {
    console.log(Error);
  });

setTimeout(function(){
    console.log(1);
}, 0)
new Promise(function(resolve){
    console.log(2);
    resolve();
    console.log(3);
}).then(function(){
    console.log(4);
})
console.log(5);

// 解析：
// 1. new Promise(fn)后，函数fn会立即执行；
// 2. fn在执行过程中，由于调用了resolve，使得Promise立即转换为resolve状态，
//    这也促使p.then(fn)中的函数fn被立即放入microTask队列中，因此fn将会在
//    本轮事件循环的结束时执行，而不是下一轮事件循环的开始时执行；
// 3. setTimeout属于macroTask，是在下一轮事件循环中执行；
//答案：
// 2 3 5 4 1

Promise.resolve(1)
  .then((res) => {
    console.log(res);
    return 2;
  })
  .catch((res) => {
    console.log(res);
    return 3;
  })
  .then((res) => {
    console.log(res);
  });

// 解析：每次调用p.then或p.catch都会返回一个新的promise，
//       从而实现了链式调用；第一个.then中未抛出异常，
//       所以不会被.catch语句捕获，会正常进入第二个.then执行；
// 答案：1 2

Promise.resolve()
  .then( () => {
    return new Error('error!')
  })
  .then( res => {
    console.log('then: ', res)
  })
  .catch( err => {
    console.log('catch: ', err)
  });

// 解析：在 .then 或 .catch 中 return 一个 error 对象并不会抛出错误，
//       所以不会被后续的 .catch 捕获；
// 答案：then:  Error: error!
//          at ...
//          at ...

Promise.resolve(1)
  .then(2)
  .then(Promise.resolve(3))
  .then(console.log);

// 解析：p.then、.catch 的入参应该是函数，传入非函数则会发生值穿透；
// 答案：1

Promise.resolve()
  .then(
    value => { throw new Error('error'); }, 
    reason => { console.error('fail1:', reason); }
  )
  .catch(
    reason => { console.error('fail2:', reason); }
  );

// 解析：.then可以接收两个参数：.then(onResolved, onRejected)
//       .catch是.then的语法糖：.then(onRejected) ==> .then(null, onRejected)
// 答案：fail2: Error: error
//       at .....
//       at .....

console.log(1);
new Promise(function (resolve, reject){
    reject();
    resolve();
}).then(function(){
    console.log(2);
}, function(){
    console.log(3);
});
console.log(4);

// 解析：Promise状态的一旦变成resolved或rejected，
//       Promise的状态和值就固定下来了，
//       不论你后续再怎么调用resolve或reject方法，
//       都不能改变它的状态和值。
// 
// 答案：1 4 3

new Promise(resolve => { // p1
    resolve(1);
    
    // p2
    Promise.resolve().then(() => {
      console.log(2); // t1
    });

    console.log(4)
}).then(t => {
  console.log(t); // t2
});

console.log(3);

// 解析：
// 1. new Promise(fn), fn 立即执行，所以先输出 4；
// 2. p1和p2的Promise在执行then之前都已处于resolve状态，
//    故按照then执行的先后顺序，将t1、t2放入microTask中等待执行；
// 3. 完成执行console.log(3)后，macroTask执行结束，然后microTask
//    中的任务t1、t2依次执行，所以输出3、2、1；
// 答案：
// 4 3 2 1

Promise.reject('a')
  .then(()=>{  
    console.log('a passed'); 
  })
  .catch(()=>{  
    console.log('a failed'); 
  });  
Promise
  .reject('b')
  .catch(()=>{  
    console.log('b failed'); 
  })
  .then(()=>{  
    console.log('b passed');
  })

// 解析：p.then(fn)、p.catch(fn)中的fn都是异步执行，上述代码可理解为：
//       setTimeout(function(){
//             setTimeout(function(){
//                  console.log('a failed'); 
//             });  
//       });
//       setTimeout(function(){
//             console.log('b failed');
//
//             setTimeout(function(){
//                  console.log('b passed'); 
//             });
//       });
// 答案：b failed
//       a failed
//       b passed

async function async1() {
   console.log('async1 start')
   await async2()
   console.log('async1 end')
}

async function async2() {
   console.log('async2')
}

console.log('script start');

setTimeout(function () {
   console.log('settimeout')
})

async1();

new Promise(function (resolve) {
   console.log('promise1');
   resolve();
}).then(function () {
   console.log('promise2');
})

console.log('script end');

script start
async1 start
async2
promise1
script end
promise2
async1 end
settimeout

/**
 * 2.1. Promise States
 *      A promise must be in one of three states: 
 *      pending, fulfilled, or rejected.
 */
const STATE_PENDING = "pending";
const STATE_FULFILLED = "fulfilled";
const STATE_REJECTED = "rejected";

function RookiePromise(fn) {
  this._state = STATE_PENDING;
  this._value = undefined;
  this._callbacks = [];
  this._errorbacks = [];

  /**
   * 2.3. The Promise Resolution Procedure
   *      The promise resolution procedure is an abstract operation 
   *      taking as input a promise and a value, which we denote as 
   *      [[Resolve]](promise, x)
   */
  var executed = false; // 用于保证resolve接口只有第一次被触发时有效；
  function resolve(promise, x){
    if(executed){
      return;
    }
    executed = true;

    var innerResolve = (promise, x) => {
      if(promise === x){
        // 2.3.1. If promise and x refer to the same object, 
        //        reject promise with a TypeError as the reason.
        this._reject(new TypeError("出错了, promise === x, 会造成死循环!"));
      }else if(x instanceof RookiePromise){
        // 2.3.2. If x is a promise, adopt its state [3.4]:
        //      2.3.2.1. If x is pending, promise must remain pending until x is fulfilled or rejected.
        //       2.3.2.2. If/when x is fulfilled, fulfill promise with the same value.
        //      2.3.2.3. If/when x is rejected, reject promise with the same reason.
        if(x._state == STATE_PENDING){
          x.then((value) => {
            innerResolve(promise, value);
          }, (reason) => {
            this._reject(reason);
          });
        }else if(x._state == STATE_FULFILLED){
          this._fulfill(x._value);
        }else if(x._state == STATE_REJECTED){
          this._reject(x._value);
        }
      }else if(x && (typeof x == "function" || typeof x == "object")){
        // 2.3.3. Otherwise, if x is an object or function,
        try{
          // 2.3.3.1. Let then be x.then.
          let then = x.then;

          if(typeof then === "function"){ //thenable
            var executed = false;
            try{
              // 2.3.3.3. If then is a function, call it with x as this, 
              //          first argument resolvePromise, and 
              //          second argument rejectPromise, 
              //          where:
              then.call(x, (value) => {
                // 2.3.3.3.3. If both resolvePromise and rejectPromise are called, 
                //            or multiple calls to the same argument are made, 
                //            the first call takes precedence, and any further calls are ignored.
                if(executed){
                  return;
                }  
                executed = true;
                // 2.3.3.3.1. If/when resolvePromise is called with a value y, 
                //            run [[Resolve]](promise, y).
                innerResolve(promise, value);
              }, (reason) => {
                // 2.3.3.3.3. If both resolvePromise and rejectPromise are called, 
                //            or multiple calls to the same argument are made, 
                //            the first call takes precedence, and any further calls are ignored.
                if(executed){
                  return;
                }  
                executed = true;
                // 2.3.3.3.2. If/when rejectPromise is called with a reason r, 
                //            reject promise with r.
                this._reject(reason);
              });
            }catch(e){
              // 2.3.3.3.4. If calling then throws an exception e,
              //          2.3.3.3.4.1. If resolvePromise or rejectPromise have been called, ignore it.
              if(executed){
                return;
              }
              //          2.3.3.3.4.2. Otherwise, reject promise with e as the reason.
              throw e;
            }
          }else{
            // 2.3.3.4. If then is not a function, fulfill promise with x.
            this._fulfill(x);
          }
        }catch(ex){
          // 2.3.3.2. If retrieving the property x.then results in a thrown exception e, 
          //          reject promise with e as the reason.
          this._reject(ex);
        }
      }else{
        // 2.3.4. If x is not an object or function, fulfill promise with x.
        this._fulfill(x);
      }
    };
    innerResolve(promise, x)
  }
  
  function reject(promise, reason){
    this._reject(reason);
  }

  resolve = resolve.bind(this, this); // 通过bind模拟规范中的 [[Resolve]](promise, x) 行为
  reject = reject.bind(this, this);

  fn(resolve, reject); // new RookiePromise((resolve, reject) => { ... })
}

/**
 * 2.1. Promise States
 *
 * A promise must be in one of three states: pending, fulfilled, or rejected.
 *
 * 2.1.1. When pending, a promise:
 *      2.1.1.1 may transition to either the fulfilled or rejected state.
 * 2.1.2. When fulfilled, a promise:
 *      2.1.2.1 must not transition to any other state.
 *      2.1.2.2 must have a value, which must not change.
 * 2.1.3. When rejected, a promise:
 *      2.1.3.1 must not transition to any other state.
 *      2.1.3.2 must have a reason, which must not change.
 *
 * Here, “must not change” means immutable identity (i.e. ===), 
 * but does not imply deep immutability.
 */
RookiePromise.prototype._fulfill = function(value) {
  if(this._state == STATE_PENDING){
    this._state = STATE_FULFILLED;
    this._value = value;

    this._notify(this._callbacks, this._value);

    this._errorbacks = [];
    this._callbacks = [];
  }
}
RookiePromise.prototype._reject = function(reason) {
  if(this._state == STATE_PENDING){
    this._state = STATE_REJECTED;
    this._value = reason;

    this._notify(this._errorbacks, this._value);

    this._errorbacks = [];
    this._callbacks = [];
  }
}
RookiePromise.prototype._notify = function(fns, param) {
  setTimeout(()=>{
    for(var i=0; i<fns.length; i++){
      fns[i](param);
    }
  }, 0);
}

/**
 * 2.2. The then Method
 *      A promise’s then method accepts two arguments:
 *           promise.then(onFulfilled, onRejected)
 */
RookiePromise.prototype.then = function(onFulFilled, onRejected) {
  // 2.2.7. then must return a promise [3.3].
  //            promise2 = promise1.then(onFulFilled, onRejected);
  //
  return new RookiePromise((resolve, reject)=>{
    // 2.2.1. Both onFulfilled and onRejected are optional arguments:
    //      2.2.1.1. If onFulfilled is not a function, it must be ignored.
    //      2.2.1.2. If onRejected is not a function, it must be ignored.
    if(typeof onFulFilled == "function"){
      this._callbacks.push(function(value){
        try{
          // 2.2.5. onFulfilled and onRejected must be called as functions (i.e. with no this value)
          var value = onFulFilled(value);
          resolve(value);
        }catch(ex){
          // 2.2.7.2. If either onFulfilled or onRejected throws an exception e, 
          //          promise2 must be rejected with e as the reason.
          reject(ex);
        }
      });
    }else{
      // 2.2.7.3. If onFulfilled is not a function and promise1 is fulfilled, 
      //          promise2 must be fulfilled with the same value as promise1.
      this._callbacks.push(resolve); // 值穿透
    }

    if(typeof onRejected == "function"){
      this._errorbacks.push(function(reason){
        try{
          // 2.2.5. onFulfilled and onRejected must be called as functions (i.e. with no this value)
          var value = onRejected(reason);
          resolve(value);
        }catch(ex){
          // 2.2.7.2. If either onFulfilled or onRejected throws an exception e, 
          //          promise2 must be rejected with e as the reason.
          reject(ex);
        }
      });
    }else{
      // 2.2.7.4. If onRejected is not a function and promise1 is rejected, 
      //          promise2 must be rejected with the same reason as promise1.
      this._errorbacks.push(reject); // 值穿透
    }

    // 2.2.6. then may be called multiple times on the same promise.
    //      2.2.6.1. If/when promise is fulfilled, all respective onFulfilled callbacks must 
    //               execute in the order of their originating calls to then.
    //      2.2.6.2. If/when promise is rejected, all respective onRejected callbacks must 
    //               execute in the order of their originating calls to then.
    if(this._state == STATE_REJECTED){
      // 2.2.4. onFulfilled or onRejected must not be called until the 
      //        execution context stack contains only platform code.
      this._notify(this._errorbacks, this._value);
      this._errorbacks = [];
      this._callbacks = [];
    }else if(this._state == STATE_FULFILLED){
      // 2.2.4. onFulfilled or onRejected must not be called until the 
      //        execution context stack contains only platform code.
      this._notify(this._callbacks, this._value);
      this._errorbacks = [];
      this._callbacks = [];
    }
  });
};

RookiePromise.prototype.catch = function(onRejected) {
    return this.then(null, onRejected);
};
RookiePromise.resolve = function(value) {
    return new RookiePromise((resolve, reject) => resolve(value));
};
RookiePromise.reject = function(reason) {
    return new RookiePromise((resolve, reject) => reject(reason));
};
RookiePromise.all = function(values) {
    return new Promise((resolve, reject) => {
      var result = [], remaining = values.length;
      function resolveOne(index){
        return function(value){
          result[index] = value;
          remaining--;
          if(!remaining){
            resolve(result);
          }
        };
      }
        for (var i = 0; i < values.length; i++) {
            RookiePromise.resolve(values[i]).then(resolveOne(i), reject);
        }
    });
};
RookiePromise.race = function(values) {
    return new Promise((resolve, reject) => {
        for (var i = 0; i < values.length; i++) {
            RookiePromise.resolve(values[i]).then(resolve, reject);
        }
    });
};

module.exports = RookiePromise;

/**
 * In order to test your promise library, 
 * you must expose a very minimal adapter interface. 
 * These are written as Node.js modules with a few well-known exports:
 *
 *     resolved(value): creates a promise that is resolved with value.
 *     rejected(reason): creates a promise that is already rejected with reason.
 *     deferred(): creates an object consisting of { promise, resolve, reject }:
 *         promise is a promise that is currently in the pending state.
 *         resolve(value) resolves the promise with value.
 *         reject(reason) moves the promise from the pending state to the rejected state, 
 *                        with rejection reason reason.
 *
 * https://github.com/promises-aplus/promises-tests
 */
var RookiePromise = require('./RookiePromise.js');

RookiePromise.resolved = RookiePromise.resolve;
RookiePromise.rejected = RookiePromise.reject;
RookiePromise.deferred = function() {
    let defer = {};
    defer.promise = new RookiePromise((resolve, reject) => {
        defer.resolve = resolve;
        defer.reject = reject;
    });
    return defer;
}
module.exports = RookiePromise