为了更好地理解 promises 在 Javascript 中的工作原理，我决定尝试一下并自己编写基本实现代码。

基本上，我想实现将函数作为参数的 Promises 对象(我在代码中将其称为 Aaa)。此函数可以调用 resolve 来resolve promise，或者 reject 来reject 它。基本实现和使用如下。根据 promise 规范，不确定第二个参数是否可以接受，但这就是我目前所得到的。

Aaa=function(f,pause) { 

    console.log("ggg");

    var t=this;
    this.f=f;
    this.thens=[];

    this.resolve=function(g) {

        for(var i=0;i<t.thens.length;i++)
        {
            // try/catch to be used later for dealing with exceptions

            try
            {
                t.thens[i].f(g);
                t.thens[i].resolve();
            }   
            catch(ex)
            {}

        }
    };  

    // to be implemented later
    this.reject=function(g) {};

    this.then=function(resolve,reject) {

        // i'm passing true for pause argument as we dont need to execute promise code just yet
        var nextPromise=new Aaa(resolve,true);

        this.thens.push(nextPromise);

        return nextPromise;
    }


    if(!pause)
        this.f(this.resolve,this.reject); 

}


var aaa=new Aaa(function(resolve,reject) {

    console.log("aaa");

    setTimeout(function() {

        console.log("fff");
        resolve("good");

    },2000);

    console.log("bbb");

});

现在可以创建、调用和解析 promise。每个 then 方法都将返回新的 Aaa(Promise)，因此可以将它们链接起来。现在下面的代码使用上面创建的 promise 并链接 then 回调。每个 then 都会返回新的 promise ，在这种情况下它似乎工作正常:

aaa.then(function(res) {

    console.log("ccc");
    console.log(res);

})
.then(function(res) {
    console.log("ddd");
    console.log(res);
},function(rej) {
    console.log("eee");
    console.log(rej);
});

我得到的输出是:

ggg
aaa 
bbb 
ggg 
ggg 
fff 
ccc 
good 
ddd 
undefined 

然而，问题是当其中一个 then 调用返回一个 promise 时:

aaa.then(function(res) {

    console.log("ccc");
    console.log(res);

    // here we return the promise manually. then next then call where "ddd" is output should not be called UNTIL this promise is resolved. How to do that?

        return new Aaa(function(resolve,reject) {

        console.log("iii");

        setTimeout(function() {
        console.log("kkk");
            resolve("good2");
            // reject("bad");

        },2000);

        console.log("jjj");

    }).then(function (res) {
        console.log("lll");

        console.log(res);
    });

})
.then(function(res) {
    console.log("ddd");
    console.log(res);
},function(rej) {
    console.log("eee");
    console.log(rej);
});

输出是:

ggg 
aaa 
bbb 
ggg 
ggg  
fff  
ccc  
good  
ggg  
iii  
jjj  
ggg  
ddd  
undefined  
kkk  
lll  
good2 

输出 ddd 的调用不应该被调用，直到我们刚刚添加的返回的 promise 被解析。

如何最好地实现？

最佳答案

这里有许多您没有处理的案例。最好的办法是从将 promise 构建为状态机开始:

var PENDING = 0;
var FULFILLED = 1;
var REJECTED = 2;

function Promise() {

  // store state which can be PENDING, FULFILLED or REJECTED
  var state = PENDING;

  // store value once FULFILLED or REJECTED
  var value = null;

  // store sucess & failure handlers
  var handlers = [];
}

现在让我们定义一个简单的帮助程序，以在我们的其余实现中使用:

// a function that returns `then` if `value` is a promise, otherwise `null`
function getThen(value) {
  if (value && (typeof value === 'object' || typeof value === 'function')) {
    var then = value.then;
    if (typeof then === 'function') {
      return then;
    }
  }
  return null;
}

接下来，我们需要考虑可能发生的每个转换:

var PENDING = 0;
var FULFILLED = 1;
var REJECTED = 2;

function Promise() {

  // store state which can be PENDING, FULFILLED or REJECTED
  var state = PENDING;

  // store value once FULFILLED or REJECTED
  var value = null;

  // store sucess & failure handlers
  var handlers = [];

  function resolve(result) {
    try {
      var then = getThen(result);
      if (then) {
        doResolve(then.bind(result), resolve, reject)
        return
      }
      state = FULFILLED;
      value = result;
    } catch (e) {
      reject(e);
    }
  }

  function reject(error) {
    state = REJECTED;
    value = error;
  }
}

注意 resolve 如何接收一个 Promise 作为它的参数，但是一个 Promise 永远不能被另一个 Promise 实现。所以我们必须处理这种特殊情况。

另请注意，Promise 只能被履行/拒绝一次。我们也有第三方 Promise 可能行为不当的问题，我们应该保护我们的代码免受这种情况的影响。出于这个原因，我不仅在 resolve 中调用了 result.then(resolve, reject)。相反，我将其拆分为一个单独的函数:

/**
 * Take a potentially misbehaving resolver function and make sure
 * onFulfilled and onRejected are only called once.
 *
 * Makes no guarantees about asynchrony.
 */
function doResolve(fn, onFulfilled, onRejected) {
  var done = false;
  try {
    fn(function (value) {
      if (done) return
      done = true
      onFulfilled(value)
    }, function (reason) {
      if (done) return
      done = true
      onRejected(reason)
    })
  } catch (ex) {
    if (done) return
    done = true
    onRejected(ex)
  }
}

所以现在我们有一个完整的状态机，但是没有办法观察或触发状态的变化。让我们首先添加一种通过传入解析器函数来触发状态更改的方法。

function Promise(fn) {
  if (typeof this !== 'object')
    throw new TypeError('Promises must be constructed via new');
  if (typeof fn !== 'function')
    throw new TypeError('fn must be a function');

  // store state which can be PENDING, FULFILLED or REJECTED
  var state = PENDING;

  // store value once FULFILLED or REJECTED
  var value = null;

  // store sucess & failure handlers
  var handlers = [];

  function resolve(result) {
    try {
      var then = getThen(result);
      if (then) {
        doResolve(then.bind(result), resolve, reject)
        return
      }
      state = FULFILLED;
      value = result;
    } catch (e) {
      reject(e);
    }
  }

  function reject(error) {
    state = REJECTED;
    value = error;
  }

  doResolve(fn, resolve, reject);
}

如您所见，我们重新使用了 doResolve，因为我们有另一个不受信任的解析器。 fn 可能会多次调用 resolve 或 reject，并且可能会抛出错误。我们需要处理所有这些情况(这就是 doResolve 所做的)。

我们现在已经完成了状态机，但是我们还没有公开任何关于它处于什么状态的信息。让我们尝试添加一个 .done(onFulfilled, onRejected) 方法，就像 .then 除了它不返回 Promise 并且不处理 onFulfilled 和 onRejected 抛出的错误。

var PENDING = 0;
var FULFILLED = 1;
var REJECTED = 2;

function Promise(fn) {
  if (typeof this !== 'object')
    throw new TypeError('Promises must be constructed via new');
  if (typeof fn !== 'function')
    throw new TypeError('fn must be a function');

  // store state which can be PENDING, FULFILLED or REJECTED
  var state = PENDING;

  // store value once FULFILLED or REJECTED
  var value = null;

  // store sucess & failure handlers
  var handlers = [];

  function resolve(result) {
    try {
      var then = getThen(result);
      if (then) {
        doResolve(then.bind(result), resolve, reject)
        return
      }
      state = FULFILLED;
      value = result;
      handlers.forEach(handle);
      handlers = null;
    } catch (e) {
      reject(e);
    }
  }

  function reject(error) {
    state = REJECTED;
    value = error;
    handlers.forEach(handle);
    handlers = null;
  }

  function handle(handler) {
    if (state === PENDING) {
      handlers.push(handler);
    } else {
      if (state === FULFILLED && typeof handler.onFulfilled === 'function') {
        handler.onFulfilled(value);
      }
      if (state === REJECTED && typeof handler.onRejected === 'function') {
        handler.onRejected(value);
      }
    }
  }
  this.done = function (onFulfilled, onRejected) {
    setTimeout(function () { // ensure we are always asynchronous
      handle({
        onFulfilled: onFulfilled,
        onRejected: onRejected
      });
    }, 0);
  }

  doResolve(fn, resolve, reject);
}

请注意我们必须如何处理 .done 在 Promise 实现/拒绝之前和之后被调用的情况。

我们几乎有一个完整的 promise 实现，但是，正如您在构建自己的实现时已经注意到的那样，我们需要一个返回 Promise 的 .then 方法。

我们可以用 .done 轻松构建它:

this.then = function (onFulfilled, onRejected) {
  var self = this;
  return new Promise(function (resolve, reject) {
    return self.done(function (result) {
      if (typeof onFulfilled === 'function') {
        try {
          return resolve(onFulfilled(result));
        } catch (ex) {
          return reject(ex);
        }
      } else {
        return resolve(result);
      }
    }, function (error) {
      if (typeof onRejected === 'function') {
        try {
          return resolve(onRejected(error));
        } catch (ex) {
          return reject(ex);
        }
      } else {
        return reject(error);
      }
    });
  });
}

请注意，我们现在是如何免费获得您苦苦挣扎的事情的，因为 resolve 接受一个 Promise 并等待它被解决。

N.B. 我没有测试过这个 Promise 实现(尽管据我所知它是正确的)。您应该根据 Promises/A+ 测试套件 (https://github.com/promises-aplus/promises-tests) 测试您构建的任何实现，并且还可能会发现 Promises/A+ 规范 (https://github.com/promises-aplus/promises-spec) 有助于确定算法的任何特定部分的正确行为是什么。作为最终资源，promise是 Promise 规范的最小实现。

关于javascript - 基本的 Javascript promise 实现尝试，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23772801/