将then方法添加到函数以进行回调

时间:2013-02-10 01:51:09

标签: javascript callback

我最近看到过几段代码:

myFunc(args).then(function() { ... });

我觉得这个回调语法非常优雅。我的理解是这不是vanilla JS的一部分,我希望能够偶尔使用它而不依赖于特定的库,所以我对如何自己实现它感兴趣。那么,这种事情是如何工作的,以及如何为函数调用实现它?

1 个答案:

答案 0 :(得分:4)

这种模式称为“承诺”。它由jQuery和dojo等实现,其中一种方法是查看代码并了解它们是如何实现的。

一般实现模式是创建一个函数,该函数返回一个对象,该对象包含一个函数(然后),将一对函数作为回调传递给前一个方法,然后在成功或失败时运行。 MSDN在blog post here

中有更多关于承诺的内容

在gitHub上发布了一个简约的实现:Promises GIST

function Promise () {
    this._thens = [];
}

Promise.prototype = {

    /* This is the "front end" API. */

    // then(onResolve, onReject): Code waiting for this promise uses the
    // then() method to be notified when the promise is complete. There
    // are two completion callbacks: onReject and onResolve. A more
    // robust promise implementation will also have an onProgress handler.
    then: function (onResolve, onReject) {
        // capture calls to then()
        this._thens.push({ resolve: onResolve, reject: onReject });
    },

    // Some promise implementations also have a cancel() front end API that
    // calls all of the onReject() callbacks (aka a "cancelable promise").
    // cancel: function (reason) {},

    /* This is the "back end" API. */

    // resolve(resolvedValue): The resolve() method is called when a promise
    // is resolved (duh). The resolved value (if any) is passed by the resolver
    // to this method. All waiting onResolve callbacks are called
    // and any future ones are, too, each being passed the resolved value.
    resolve: function (val) { this._complete('resolve', val); },

    // reject(exception): The reject() method is called when a promise cannot
    // be resolved. Typically, you'd pass an exception as the single parameter,
    // but any other argument, including none at all, is acceptable.
    // All waiting and all future onReject callbacks are called when reject()
    // is called and are passed the exception parameter.
    reject: function (ex) { this._complete('reject', ex); },

    // Some promises may have a progress handler. The back end API to signal a
    // progress "event" has a single parameter. The contents of this parameter
    // could be just about anything and is specific to your implementation.
    // progress: function (data) {},

    /* "Private" methods. */

    _complete: function (which, arg) {
        // switch over to sync then()
        this.then = which === 'resolve' ?
            function (resolve, reject) { resolve(arg); } :
            function (resolve, reject) { reject(arg); };
        // disallow multiple calls to resolve or reject
        this.resolve = this.reject = 
            function () { throw new Error('Promise already completed.'); };
        // complete all waiting (async) then()s
        var aThen, i = 0;
        while (aThen = this._thens[i++]) { aThen[which] && aThen[which](arg); }
        delete this._thens;
    }

};

(请注意,这不是我的代码。我仔细研究了它,它看起来很好作为一个起点,但所有功劳都归功于original author