Promise

[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.onResolvedCallbacki; } }); }

const reject = (error) => { this.data = error; setTimeout(() => { for(let i=0;i<this.onRejectedCallback.length;i++) { this.onRejectedCallbacki; } }); }

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); });