promise 详解开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 11 天，点击查看活动详情 p

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 11 天，点击查看活动详情

promise 详解

简介

Promise 的出现是为了解决异步编程中，主要使用的回调机制的几个问题： Callback hell：Promise 可以把一层层嵌套的 callback 变成 .then().then()...，从而使代码编写和阅读更直观错误处理难：Promise 比 callback 在错误处理上更清晰直观同时进行多个异步操作的代码编写困难：Promise 可以简单处理此情况目前看浏览器环境中，使用 Promise 的场景主要就是发异步请求。 Promise 的重点在于：它是如何解决 callback hell，并提供直观的 API 和机制去让异步代码编写变得简单在此基础上，它怎样让控制流变得清晰（比如多个 promise 链在一起时，发生错误时应该怎样流转）有哪些常见的问题场景以及相应的解决方式（即是 pattern）

什么是 premise

一个 Promise 对象中定义的主要是一段执行具体操作的代码，并且在这段代码中，会执行两个回调函数，一个表示操作成功（resolve），一个表示操作失败（reject），比如下面这段发起 AJAX 请求的代码（关注 new Promise() 开始那部分）：

function get(url) {
return new Promise(function(resolve, reject) {
var req = new XMLHttpRequest();
req.open('GET', url);
    req.onload = function() {
      if (req.status == 200) {
        resolve(req.response);
      }
      else {
        reject(Error(req.statusText));
      }
    };

    req.onerror = function() {
      reject(Error("Network Error"));
    };

    req.send();

});
}

Promise 构造函数中的参数被称为 executor。我们在后面还会提到它。调用 get(url) 函数会生成一个 Promise 实例。当调用这个实例的 .then() 方法时，Promise 中定义的代码会被开始被执行。一个 Promise 实例有这几个状态： pending：未确定状态。刚 new 出来的 Promise 处于这个状态；然后会马上执行 executor 中定义的语句 resolved：代码执行到 resolve() 语句后 rejected：代码执行到 reject() 语句后 settled：resolved 或者 rejected 状态都属于 settled 实例调用的代码如下：

get('story.json').then(function(response) {
console.log("Success!", response);
}, function(error) {
console.error("Failed!", error);
})

.then()可以接受两个参数，第一个是执行成功后的回调函数，第二个是失败后的回调函数。executor 中调用 resolve()或者 rejected()时传的参数，会被这两个回调函数获得。

使用

promise 相当于一个状态机 promise 的三种状态 pending fulfilled rejected 1.promise 对象初始化状态为 pending 2.当调用 resolve(成功)，会由 pending => fulfilled 3.当调用 reject(失败)，会由 pending => rejected 注意 promsie 状态只能由 pending => fulfilled/rejected, 一旦修改就不能再变

promise 对象方法

1.then 方法注册当 resolve(成功)/reject(失败)的回调函数

const promise = new Promise((resolve, reject) => {
resolve('fulfilled'); // 状态由 pending => fulfilled
});
promise.then(result => { // onFulfilled
console.log(result); // 'fulfilled'
}, reason => { // onRejected 不会被调用

})

const promise = new Promise((resolve, reject) => {
reject('rejected'); // 状态由 pending => rejected
});
promise.then(result => { // onFulfilled 不会被调用

}, reason => { // onRejected
console.log(rejected); // 'rejected'
})

在链式写法中可以捕获前面 then 中发送的异常, promise.catch(onRejected) 相当于

promise.then(null, onRrejected);

// 注意
// onRejected 不能捕获当前 onFulfilled 中的异常
promise.then(onFulfilled, onRrejected);

// 可以写成：
promise.then(onFulfilled)
.catch(onRrejected);

promise chain

promise.then 方法每次调用都返回一个新的 promise 对象所以可以链式写法

function taskA() {
console.log("Task A");
}
function taskB() {
console.log("Task B");
}
function onRejected(error) {
console.log("Catch Error: A or B", error);
}

var promise = Promise.resolve();
promise
.then(taskA)
.then(taskB)
.catch(onRejected) // 捕获前面 then 方法中的异常

promise 的静态方法

1.Promise.resolve 返回一个 fulfilled 状态的 promise 对象

Promise.resolve('hello').then(function(value){
    console.log(value);
});

Promise.resolve('hello');
// 相当于
const promise = new Promise(resolve => {
   resolve('hello');
});

Promise.all

Promise.all 接收一个 promise 对象数组为参数只有全部为 resolve 才会调用通常会用来处理多个并行异步操作

const p1 = new Promise((resolve, reject) => {
resolve(1);
});

const p2 = new Promise((resolve, reject) => {
resolve(2);
});

const p3 = new Promise((resolve, reject) => {
reject(3);
});

Promise.all([p1, p2, p3]).then(data => {
console.log(data); // [1, 2, 3] 结果顺序和 promise 实例数组顺序是一致的
}, err => {
console.log(err);
});

promise.race

Promise.race 接收一个 promise 对象数组为参数 Promise.race 只要有一个 promise 对象进入 FulFilled 或者 Rejected 状态的话，就会继续进行后面的处理。

function timerPromisefy(delay) {
    return new Promise(function (resolve, reject) {
        setTimeout(function () {
            resolve(delay);
        }, delay);
    });
}
var startDate = Date.now();

Promise.race([
    timerPromisefy(10),
    timerPromisefy(20),
    timerPromisefy(30)
]).then(function (values) {
    console.log(values); // 10
});

代码实现

Promise 实现遵循 promise/A+规范

// promise 三个状态
const PENDING = "pending";
const FULFILLED = "fulfilled";
const REJECTED = "rejected";

function Promise(excutor) {
    let that = this; // 缓存当前promise实例对象
    that.status = PENDING; // 初始状态
    that.value = undefined; // fulfilled状态时 返回的信息
    that.reason = undefined; // rejected状态时 拒绝的原因
    that.onFulfilledCallbacks = []; // 存储fulfilled状态对应的onFulfilled函数
    that.onRejectedCallbacks = []; // 存储rejected状态对应的onRejected函数

    function resolve(value) { // value成功态时接收的终值
        if(value instanceof Promise) {
            return value.then(resolve, reject);
        }

        // 为什么resolve 加setTimeout?
        // 2.2.4规范 onFulfilled 和 onRejected 只允许在 execution context 栈仅包含平台代码时运行.
        // 注1 这里的平台代码指的是引擎、环境以及 promise 的实施代码。实践中要确保 onFulfilled 和 onRejected 方法异步执行，且应该在 then 方法被调用的那一轮事件循环之后的新执行栈中执行。

        setTimeout(() => {
            // 调用resolve 回调对应onFulfilled函数
            if (that.status === PENDING) {
                // 只能由pedning状态 => fulfilled状态 (避免调用多次resolve reject)
                that.status = FULFILLED;
                that.value = value;
                that.onFulfilledCallbacks.forEach(cb => cb(that.value));
            }
        });
    }

    function reject(reason) { // reason失败态时接收的拒因
        setTimeout(() => {
            // 调用reject 回调对应onRejected函数
            if (that.status === PENDING) {
                // 只能由pedning状态 => rejected状态 (避免调用多次resolve reject)
                that.status = REJECTED;
                that.reason = reason;
                that.onRejectedCallbacks.forEach(cb => cb(that.reason));
            }
        });
    }

    // 捕获在excutor执行器中抛出的异常
    // new Promise((resolve, reject) => {
    //     throw new Error('error in excutor')
    // })
    try {
        excutor(resolve, reject);
    } catch (e) {
        reject(e);
    }
}

resolve 中的值几种情况：
1.普通值
2.promise 对象
3.thenable 对象/函数
对 resolve 进行改造增强针对 resolve 中不同值情况进行处理
@param {promise} promise2 promise1.then 方法返回的新的 promise 对象
@param {[type]} x promise1 中 onFulfilled 的返回值
@param {[type]} resolve promise2 的 resolve 方法
@param {[type]} reject promise2 的 reject 方法

  function resolvePromise(promise2, x, resolve, reject) {
  if (promise2 === x) { // 如果从 onFulfilled 中返回的 x 就是 promise2 就会导致循环引用报错
  return reject(new TypeError('循环引用'));
  }

      let called = false; // 避免多次调用
      // 如果x是一个promise对象 （该判断和下面 判断是不是thenable对象重复 所以可有可无）
      if (x instanceof Promise) { // 获得它的终值 继续resolve
          if (x.status === PENDING) { // 如果为等待态需等待直至 x 被执行或拒绝 并解析y值
              x.then(y => {
                  resolvePromise(promise2, y, resolve, reject);
              }, reason => {
                  reject(reason);
              });
          } else { // 如果 x 已经处于执行态/拒绝态(值已经被解析为普通值)，用相同的值执行传递下去 promise
              x.then(resolve, reject);
          }
          // 如果 x 为对象或者函数
      } else if (x != null && ((typeof x === 'object') || (typeof x === 'function'))) {
          try { // 是否是thenable对象（具有then方法的对象/函数）
              let then = x.then;
              if (typeof then === 'function') {
                  then.call(x, y => {
                      if(called) return;
                      called = true;
                      resolvePromise(promise2, y, resolve, reject);
                  }, reason => {
                      if(called) return;
                      called = true;
                      reject(reason);
                  })
              } else { // 说明是一个普通对象/函数
                  resolve(x);
              }
          } catch(e) {
              if(called) return;
              called = true;
              reject(e);
          }
      } else {
          resolve(x);
      }

  }

[注册 fulfilled 状态/rejected 状态对应的回调函数]
@param {function} onFulfilled fulfilled 状态时执行的函数
@param {function} onRejected rejected 状态时执行的函数
@return {function} newPromsie 返回一个新的 promise 对象

  Promise.prototype.then = function(onFulfilled, onRejected) {
  const that = this;
  let newPromise;
  // 处理参数默认值 保证参数后续能够继续执行
  onFulfilled =
  typeof onFulfilled === "function" ? onFulfilled : value => value;
  onRejected =
  typeof onRejected === "function" ? onRejected : reason => {
  throw reason;
  };

      // then里面的FULFILLED/REJECTED状态时 为什么要加setTimeout ?
      // 原因:
      // 其一 2.2.4规范 要确保 onFulfilled 和 onRejected 方法异步执行(且应该在 then 方法被调用的那一轮事件循环之后的新执行栈中执行) 所以要在resolve里加上setTimeout
      // 其二 2.2.6规范 对于一个promise，它的then方法可以调用多次.（当在其他程序中多次调用同一个promise的then时 由于之前状态已经为FULFILLED/REJECTED状态，则会走的下面逻辑),所以要确保为FULFILLED/REJECTED状态后 也要异步执行onFulfilled/onRejected

      // 其二 2.2.6规范 也是resolve函数里加setTimeout的原因
      // 总之都是 让then方法异步执行 也就是确保onFulfilled/onRejected异步执行

      // 如下面这种情景 多次调用p1.then
      // p1.then((value) => { // 此时p1.status 由pedding状态 => fulfilled状态
      //     console.log(value); // resolve
      //     // console.log(p1.status); // fulfilled
      //     p1.then(value => { // 再次p1.then 这时已经为fulfilled状态 走的是fulfilled状态判断里的逻辑 所以我们也要确保判断里面onFuilled异步执行
      //         console.log(value); // 'resolve'
      //     });
      //     console.log('当前执行栈中同步代码');
      // })
      // console.log('全局执行栈中同步代码');
      //

      if (that.status === FULFILLED) { // 成功态
          return newPromise = new Promise((resolve, reject) => {
              setTimeout(() => {
                  try{
                      let x = onFulfilled(that.value);
                      resolvePromise(newPromise, x, resolve, reject); // 新的promise resolve 上一个onFulfilled的返回值
                  } catch(e) {
                      reject(e); // 捕获前面onFulfilled中抛出的异常 then(onFulfilled, onRejected);
                  }
              });
          })
      }

      if (that.status === REJECTED) { // 失败态
          return newPromise = new Promise((resolve, reject) => {
              setTimeout(() => {
                  try {
                      let x = onRejected(that.reason);
                      resolvePromise(newPromise, x, resolve, reject);
                  } catch(e) {
                      reject(e);
                  }
              });
          });
      }

      if (that.status === PENDING) { // 等待态
          // 当异步调用resolve/rejected时 将onFulfilled/onRejected收集暂存到集合中
          return newPromise = new Promise((resolve, reject) => {
              that.onFulfilledCallbacks.push((value) => {
                  try {
                      let x = onFulfilled(value);
                      resolvePromise(newPromise, x, resolve, reject);
                  } catch(e) {
                      reject(e);
                  }
              });
              that.onRejectedCallbacks.push((reason) => {
                  try {
                      let x = onRejected(reason);
                      resolvePromise(newPromise, x, resolve, reject);
                  } catch(e) {
                      reject(e);
                  }
              });
          });
      }

  };

Promise.all Promise 进行并行处理
参数: promise 对象组成的数组作为参数
返回值: 返回一个 Promise 实例
当这个数组里的所有 promise 对象全部变为 resolve 状态的时候，才会 resolve。

  Promise.all = function(promises) {
  return new Promise((resolve, reject) => {
  let done = gen(promises.length, resolve);
  promises.forEach((promise, index) => {
  promise.then((value) => {
  done(index, value)
  }, reject)
  })
  })
  }

function gen(length, resolve) {
let count = 0;
let values = [];
return function(i, value) {
values[i] = value;
if (++count === length) {
console.log(values);
resolve(values);
}
}
}

Promise.race
参数: 接收 promise 对象组成的数组作为参数
返回值: 返回一个 Promise 实例
只要有一个 promise 对象进入 FulFilled 或者 Rejected 状态的话，就会继续进行后面的处理(取决于哪一个更快)

  Promise.race = function(promises) {
  return new Promise((resolve, reject) => {
  promises.forEach((promise, index) => {
  promise.then(resolve, reject);
  });
  });
  }

// 用于 promise 方法链时 捕获前面 onFulfilled/onRejected 抛出的异常
Promise.prototype.catch = function(onRejected) {
return this.then(null, onRejected);
}

Promise.resolve = function (value) {
return new Promise(resolve => {
resolve(value);
});
}

Promise.reject = function (reason) {
return new Promise((resolve, reject) => {
reject(reason);
});
}

基于 Promise 实现 Deferred 的
Deferred 和 Promise 的关系
- Deferred 拥有 Promise
- Deferred 具备对 Promise 的状态进行操作的特权方法（resolve reject）

  Promise.deferred = function() { // 延迟对象
  let defer = {};
  defer.promise = new Promise((resolve, reject) => {
  defer.resolve = resolve;
  defer.reject = reject;
  });
  return defer;
  }

Promise/A+规范测试
npm i -g promises-aplus-tests
promises-aplus-tests Promise.js


try {
module.exports = Promise
} catch (e) {
}

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 11 天，点击查看活动详情