在Object中返回此值以创建链

Question

我正在尝试写一个小的XHR抽象以及学习如何创建可链接的方法，我几乎在那里（我想），但是下一步该怎么办，我认为我的设置是错误的。

我想做的事：

$http.get('file.txt')
.success(function () {
    console.log('Success');
})
.error(function () {
    console.log('Error');
});

我所拥有的：

window.$http = {};

$http.get = function (url, cb, data) {

    var xhr = {
        success: function (callback) {
            callback();
            return this;
        },
        error: function (callback) {
            callback();
            return this;
        }
    };

    // just a test to call the success message
    if (window) {
        xhr.success.call(xhr);
    }

    return xhr;
};

我在“连接”成功/错误消息时遇到麻烦，有人可以帮我指出正确的方向吗？ 提前致谢。

jsFiddle

Answer 1

您的链接正常，但是在此行出现错误：

 if (window) {
     xhr.success.call(xhr); // Uncaught TypeError: undefined is not a function 
  }

因此，JavaScript会中断，并且不会返回xhr。 删除那些行，它将起作用。

Answer 2

success和error只是将传递的函数存储到内部存储器中的函数。 XHR响应后，您的代码应根据响应状态相应地执行所有回调。

现在，您需要的是每个请求的对象实例，该对象实例存储自己的成功和错误回调集。 同样， success和error方法应返回相同的实例以允许链接。

这将使您进入正确的轨道：

(function (window) {

    window.$http = {};

    // An object constructor for your XHR object
    function XHRObject(url,data){

        // store the request data
        this.url = url;
        this.data = data;

        // The callback storage
        this.callbacks = {};

        this.init();
    }

    // Methods
    XHRObject.prototype = {
        init : function(){
          // Actual call here

          // Depending on result, execute callbacks
          var callbacksToExecute;
          if(readyState === 4 && response.status === 200){
            callbacksToExecute = this.callbacks.success;
          } else {
            callbacksToExecute = this.callbacks.error;
          }
          callbacksToExecute.forEach(function(callback){
            callback.call(null);
          });
        },
        success : function(cb){

            // Create a success callback array and store the callback
            if(this.callbacks.hasOwnProperty('success') this.callbacks.success = [];
            this.callbacks.success.push(cb);

            // You also need a flag to tell future callbacks to execute immediately
            // if the current object has already responded

            return this;
        },
        ...
    }

    // A call to get basically returns an object
    $http.get = function (url, data) {
         return new XHRObject(url,data);
    };

})(this);

Answer 3

我希望您可以从中做出一些贡献：

window.$http = {};
$http.get = function (url, cb, data) {
    var xhr = function(){
        return {
            success: function (callback) {
                callback();
                return this;
            },
            error: function (callback) {
                callback();
                return this;
            }
        };
    };
    return new xhr();
}

$http.get('url','cb','data')
.success(function () {
    console.log('Success');
})
.error(function () {
    console.log('Error');
});

编辑：我只是意识到这基本上与您编写的代码相同，只是我缺少了if() 。 似乎测试导致代码中断。