2.Promise的基础实现

Promise 是一个类，承诺、允诺的意思 (是一个异步解决方案)

1.三种状态

• pending 等待状态
• fulfilled 成功态
• rejected 失败态

2.以下过程不可逆：

• pending -> fulfilled 成功态
• pending -> rejected 失败态
• 成功态和失败态，不能相互转化

3.executor函数

new Promise的参数是executor函数，而且会立即执行；
executor有两个参数：resolve函数和reject函数；

executor函数

4.then方法

每个promise实例都有一个then方法；
then里面有两个参数：onfulfilled方法和onrejected方法；

then方法

5.1 promise的简单应用：

// let Promise = require('./promise'); // 引入我们自己实现的Promise

// 先执行1,再执行2; 因为下一行的function即executor会立刻执行
let promise = new Promise(function (resolve, reject) {
  console.log(1);
  resolve('成功'); // resolve执行之后,不会再执行下面的
  // reject('失败');
  // throw new Error('报错');
});
console.log(2);

// then的两个参数onfulfilled,onrejected
promise.then(
  function (val) {
    console.log('success', val);
  },
  function (err) {
    console.log('err', err);
  }
);

5.2手写实现一个基本的Promise（没有异步）

console.log('myPromis 标识');
function Promise(executor) {
  this.status = 'pending'; // 给promise定义初始状态
  this.value = undefined; // 成功返回的值
  this.reason = undefined; //失败的原因
  let self = this; // 避免取错值

  // 使用try,是为了在使用时报错直接执行reject
  try {
    executor(resolve, reject); // executor执行器会立刻执行
  } catch (e) {
    reject(e); // 如果报错 调用then方法的失败方法即可
  }

  function resolve(value) {
    // 只有pending状态,才能更改为其它状态
    if (self.status === 'pending') {
      self.value = value;
      self.status = 'fulfilled';
    }
  }

  // reject方法还是有执行,只不过被屏蔽了 ???
  function reject(reason) {
    if (self.status === 'pending') {
      self.reason = reason;
      self.status = 'rejected';
    }
  }
}

Promise.prototype.then = function (onfulfilled, onrejected) {
  let self = this;
  if (self.status === 'fulfilled') {
    onfulfilled(self.value); // 如果状态成功 则调用成功的回调
  }
  if (self.status === 'rejected') {
    onrejected(self.reason); // 如果状态是是失败 则调用失败的回调
  }
};

module.exports = Promise;

6.1 有异步的promise使用

let Promise = require('./promise');
let promise = new Promise(function (resolve, reject) {
  setTimeout(() => {
    resolve('成功');
  }, 1000);
});

// 多个then链式调用
promise.then(
  function (val) {
    console.log(val, 'success');
  },
  function (err) {
    console.log(err, 'fail');
  }
);
promise.then(
  function (val) {
    console.log(val, 'success');
  },
  function (err) {
    console.log(err, 'fail');
  }
);

6.2 手写实现一个基本的Promise（有异步）

console.log('myPromis 标识');
function Promise(executor) {
  this.status = 'pending';
  this.value = undefined;
  this.reason = undefined;
  let self = this;
  // 定义两个队列 分别存放成功和失败的回调
  self.onResolveCallbacks = []; // 存放成功的回调
  self.onRejectedCallbacks = []; // 存放失败的回调

  function reoslve(value) {
    if (self.status === 'pending') {
      self.value = value;
      self.status = 'fulfilled';
      self.onResolveCallbacks.forEach((fn) => fn());
    }
  }

  function reject(reason) {
    if (self.status === 'pending') {
      self.reason = reason;
      self.status = 'rejected';
      self.onRejectedCallbacks.forEach((fn) => fn());
    }
  }

  try {
    executor(reoslve, reject);
  } catch (e) {
    reject(e);
  }
}

Promise.prototype.then = function (onfulfilled, onrejected) {
  let self = this;  // 这里可以不转换 ？？？
  if (self.status === 'fulfilled') {
    onfulfilled(self.value);
  }
  if (self.status === 'rejected') {
    onrejected(self.reason);
  }
  if (self.status === 'pending') {
    // 如果是异步的时候 ，需要把每个成功和失败的回调分别存放到对应的数组里 (发布订阅)
    // 如果稍后调用了resolve/reject, 会让函数依次执行，执行的时候会传值
    self.onResolveCallbacks.push(function () {
      // TODO...
      onfulfilled(self.value);
    });
    self.onRejectedCallbacks.push(function () {
      onrejected(self.reason);
    });
  }
};

module.exports = Promise;