Promise

[nodisappear]

No description provided.

[nodisappear]

Promises/A+
ES6 Promise
详细实现Promise
最简实现Promise

[nodisappear]

• Promise 对象是一个构造函数，接收一个函数作为参数，用来生成 Promise 实例

const promise = new Promise(function(resolve, reject) {
  const condition = true; 
  if(condition) {
    resolve(value);  // 作用是把 Promise 的状态从 pending 变成 resolved
  } else {
    reject(error);  // 作用是把 Promise 的状态从 pending 变成 rejected
  }
});

• Promise 实例生成之后，用 then 方法分别指定 resolved 状态和 rejected 状态的回调函数

promise.then(function(value) {
  //  resolved 状态执行的回调函数
}, function(error) {
  //  rejected 状态执行的回调函数
})

• Promise 新建之后会立即执行，当调用 resolve 函数时会将 then 方法指定的回调函数添加到微任务，在当前宏任务执行结束之后再执行微任务

const promise = new Promise(function(resolve, reject) {
  console.log("promise");

  // setTimeout 在延迟队列中等待执行，修改 delayTime 能够改变执行顺序
  const delayTime = 1;
  setTimeout(() => {
      resolve();
  }, delayTime);
});

setTimeout(() => {
  console.log("setTimeout")
}, 0);

promise.then(function() {
  console.log("microtask");
});

console.log("macrotask");

// promise
// macrotask
// setTimeout
// microtask

• 通过 setTimeout 将回调函数添加到延迟队列，从而实现回调函数的延迟绑定和异步调用

function Promise(executor) {  
  _onResolved = null, _onRejected = null;
    
  const resolve = (value) => {
    setTimeout(() => {
      _onResolved(value);
    });
  }
  const reject = (error) => {
    setTimeout(() => {
      _onRejected(error);
    });
  }

  executor(resolve, reject);
}

Promise.prototype.then = function (onResolved, onRejected) {
  _onResolved = typeof onResolved === 'function' ? onResolved : function() {};
  _onRejected = typeof onRejected === 'function' ? onRejected : function() {};
};

const promise = new Promise(function(_resolve, _reject) {
  const condition = true; 
  if(condition) {
    _resolve("success"); 
  } else {
    _reject("failure"); 
  }
});

promise.then(function resolve(value){
   console.log(value);
}, function reject(error) {
   console.log(error); 
});

// success

• 实现一个可链式调用的 Promise

function Promise(executor) {  
  this.data = undefined;
  this.onResolvedCallback  = [];
  this.onRejectedCallback  = [];
    
  const resolve = (value) => {
    setTimeout(() => {
      this.data = value;
      for(let i=0;i<this.onResolvedCallback.length;i++) {
         this.onResolvedCallback[i](value); 
      }
    });
  }
  
  const reject = (error) => {
    this.data = error;
    setTimeout(() => {
      for(let i=0;i<this.onRejectedCallback.length;i++) {
         this.onRejectedCallback[i](error); 
      }
    });
  }

  executor(resolve, reject);
}

Promise.prototype.then = function (onResolved, onRejected) { 
  onResolved = typeof onResolved === 'function' ? onResolved : function() {};
  onRejected = typeof onRejected === 'function' ? onRejected : function() {};
  
  return new Promise((_resolve, _reject) => {
    this.onResolvedCallback.push(() => {
      const res = onResolved(this.data);
      if(res instanceof Promise) {
          res.then(_resolve, _reject);
      } else {
          _resolve(res);
      }
    });  
    this.onRejectedCallback.push(() => {
      const res = onRejected(this.data);
      if(res instanceof Promise) {
          res.then(_resolve, _reject);
      } else {
          _reject(res);
      }
    });    
  });
};

// 设定每个 promise 的执行结果
const conditionOfpromise1 = true, conditionOfpromise2 = true;

const promise1 = new Promise((_resolve, _reject) => {
  if(conditionOfpromise1) {
    _resolve("success"); 
  } else {
    _reject("failure"); 
  }
});

const promise2 = promise1.then((value) => {
  return new Promise((_resolve, _reject) => {
    if(conditionOfpromise2) {
      _resolve(`${value}, success`);
    } else {
      _reject(`${value}, failure`);
    }
  });
}, (error) => {
  return new Promise((_resolve, _reject) => { 
    if(conditionOfpromise2) {
      _resolve(`${error}, success`);
    } else {
      _reject(`${error}, failure`);
    }
  });
});

promise2.then((value) => {
  console.log(value);
}, (error) => {
  console.log(error);
});