Bootstrap

javascript之手写一个promise

promise

promise 的三个状态:pending(未完成)、fulfilled(完成)、reject(拒绝)

一个常见操作:

new Promise((resolve, reject) => {
   
  //一些请求
  this.$axios
    .get("/", {
    params: {
    id: id } })
    .then(res => {
   
      resolve(res); //返回成功后获取的值
    })
    .catch(err => {
   
      reject(err); // 失败
    });
})
  .then(resData => {
   
    //do something
    console.log(resData);
  })
  .catch(err => {
   
    console.log(err);
  });

promise 构造函数里面接收了两个函数作为参数,一个 resolve 和一个 reject,如果成功则返回成功数据

class Promise2 {
   
  constructor(fn) {
   
    this._queue = [];
    this._succ_mes = null;
    this._error_mes = null;
    this.status = "";

    fn(
      // 传入的匿名函数
      (...arg) => {
   
        // resolve
        this._succ_mes = arg;
        this.status = "succ";
      },
      (...arg) => {
   
        // reject
        this._error_mes = arg;
        this.status = "err";
      }
    );
  }

  then(fn1, fn2) {
   
    // then的两个函数参数
    if (this.status === "succ") {
   
      fn1(...this._succ_mes);
    } else if (this.status === "err") {
   
      if (fn2) {
   
        // then是否有第二个函数参数,有则在第二个函数里抛出reject错误,没有则在第一个函数里抛出
        fn2(...this._error_mes);
        return;
      }
      fn1(...this._succ_mes);
    } else {
   
      this._queue.push({
    fn1, fn2 });
    }
  }
}

以上实现了一个简易的 promise,可以达到的功能有:返回成功状态后的值|返回失败状态值|then 函数的两个函数参数返回值

下面增加 then 的链式调用

class Promise2 {
   
  constructor(fn) 
;