Promise 庫 lie.js 源碼解讀

function INTERNAL() {}
var REJECTED = ['REJECTED'];var FULFILLED = ['FULFILLED'];var PENDING = ['PENDING'];
var handlers = {}
function Promise (resolver) {  if (typeof resolver !== 'function') {    throw new TypeError('resolver must be a function');  }  this.state = PENDING;  this.queue = [];  this.outcome = void 0;  /* istanbul ignore else */  if (!process.browser) {    this.handled = UNHANDLED;  }  if (resolver !== INTERNAL) {    safelyResolveThenable(this, resolver);  }}

// 構(gòu)造函數(shù)當(dāng)中接收2個(gè)參數(shù),resolve/reject，需要注意的是這2個(gè)參數(shù)是promise內(nèi)部定義的，用以改變這個(gè)promise的狀態(tài)和值const promise = new Promise((resolve, reject) => {  // 同步或者異步的去resolve一個(gè)值  resolve(1)})

function safelyResolveThenable(self, thenable) {  // Either fulfill, reject or reject with error  // 標(biāo)志位，初始態(tài)的promise僅僅只能被resolve/reject一次  var called = false;  function onError(value) {    if (called) {      return;    }    called = true;    // reject這個(gè)promise    handlers.reject(self, value);  }
  function onSuccess(value) {    if (called) {      return;    }    called = true;    // resolve這個(gè)promise    handlers.resolve(self, value);  }
  // 用一個(gè)函數(shù)將resolver執(zhí)行包裹一層  function tryToUnwrap() {    // 這個(gè)函數(shù)即由調(diào)用方傳入的    thenable(onSuccess, onError);  }
  // 用以捕獲resolver在執(zhí)行過程可能拋出的錯(cuò)誤  var result = tryCatch(tryToUnwrap);  if (result.status === 'error') {    onError(result.value);  }}
function tryCatch(func, value) {  var out = {};  try {    out.value = func(value);    out.status = 'success';  } catch (e) {    out.status = 'error';    out.value = e;  }  return out;}

new Promise((resolve, reject) => {  // 一旦狀態(tài)發(fā)生改變，后面的reject/resolve方法不能起作用  resolve(1)  reject(new Error('error'))  resolve(2)})

handlers.resolve = function (self, value) {  var result = tryCatch(getThen, value);  if (result.status === 'error') {    return handlers.reject(self, result.value);  }  // 判斷這個(gè)value是否是個(gè)thenable對(duì)象  var thenable = result.value;
  if (thenable) {    safelyResolveThenable(self, thenable);  } else {    // 將這個(gè)promise的state從 pending -> fulfilled    self.state = FULFILLED;    // 更改這個(gè)promise對(duì)應(yīng)的值    self.outcome = value;    var i = -1;    var len = self.queue.length;    // 依次執(zhí)行這個(gè)promise的queue隊(duì)列里面每一項(xiàng)queueItem的callFulfilled方法    while (++i < len) {      self.queue[i].callFulfilled(value);    }  }  // 返回這個(gè)promise對(duì)象  return self;}

const promise = new Promise(resolve => {  resolve(1)})

const promise = new Promise(resolve => {  resolve(1)})
promise.then(function onFullfilled (value) {  console.log(value)})

Promise.prototype.then = function (onFulfilled, onRejected) {  if (typeof onFulfilled !== 'function' && this.state === FULFILLED ||    typeof onRejected !== 'function' && this.state === REJECTED) {    return this;  }  // 創(chuàng)建一個(gè)新的promise  var promise = new this.constructor(INTERNAL);  /* istanbul ignore else */  if (!process.browser) {    if (this.handled === UNHANDLED) {      this.handled = null;    }  }
  // new Promise在內(nèi)部resolve過程中如果是同步的  if (this.state !== PENDING) {    var resolver = this.state === FULFILLED ? onFulfilled : onRejected;    unwrap(promise, resolver, this.outcome);  } else { // 異步的resolve    // this.queue保存了對(duì)于promise    this.queue.push(new QueueItem(promise, onFulfilled, onRejected));  }
  return promise;};

function unwrap(promise, func, value) {  // 異步執(zhí)行這個(gè)func  immediate(function () {    var returnValue;    try {      // 捕獲onFulfilled函數(shù)在執(zhí)行過程中的錯(cuò)誤      returnValue = func(value);    } catch (e) {      return handlers.reject(promise, e);    }    // 不能返回自身promise    if (returnValue === promise) {      handlers.reject(promise, new TypeError('Cannot resolve promise with itself'));    } else {      handlers.resolve(promise, returnValue);    }  });}

function QueueItem(promise, onFulfilled, onRejected) {  // 首先保存這個(gè)promise  this.promise = promise;  // 如果onFulfilled是一個(gè)函數(shù)  if (typeof onFulfilled === 'function') {    this.onFulfilled = onFulfilled;    // 那么重新賦值callFulfilled函數(shù)    this.callFulfilled = this.otherCallFulfilled;  }  if (typeof onRejected === 'function') {    this.onRejected = onRejected;    this.callRejected = this.otherCallRejected;  }}// 如果onFulfilled是一個(gè)函數(shù)，那么就會(huì)覆蓋callFulfilled方法// 如果onFulfilled不是一個(gè)函數(shù)，那么就會(huì)直接調(diào)用handlers.resolve去遞歸處理promiseQueueItem.prototype.callFulfilled = function (value) {  handlers.resolve(this.promise, value);};QueueItem.prototype.otherCallFulfilled = function (value) {  unwrap(this.promise, this.onFulfilled, value);};QueueItem.prototype.callRejected = function (value) {  handlers.reject(this.promise, value);};QueueItem.prototype.otherCallRejected = function (value) {  unwrap(this.promise, this.onRejected, value);};

const promise = new Promise(resolve => {  setTimeout(() => {    resolve(1)  }, 3000)})
promise.then(data => console.log(data))

const promise = new Promise(resolve => {  setTimeout(() => {    resolve(2)  }, 2000)})
promise.then(3).then(console.log)

const promise = new Promise(resolve => {  // 情況一：同步resolve  resolve(1)  // 情況二：異步resolve  setTimeout(() => {    resolve(2)  }, 1000)})promise.then(function onFullfilled() {  // do something  foo()})bar()

const Promise = require('lie')const promise = new Promise(resolve => setTimeout(resolve, 3000))promise.then(() => 'a').then(() => 'b').then(() => {})

Promise {  state: [ 'PENDING' ],  queue:   [ QueueItem {       promise: {         state: ['PENDING'],         queue: [           QueueItem {             promise: {               state: ['PENDING'],               queue: [                 QueueItem {                   promise: {                     state: ['PENDING'],                     queue: [],                     outcome: undefined                   }                 }               ],               outcome: undefined,               handled: null             },             onFulfilled: [Function],             callFulfilled: [Function]           }         ],        outcome: undefined,        handled: null               },       onFulfilled: [Function],       callFulfilled: [Function] } ],  outcome: undefined,  handled: null }

someRequest().then(res => {  if (res.error === 0) {    // do something    return res  } else {    return Promise.reject(res)  }}).then(val => {  // do something}).catch(err => {  // do something})