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。删除thoses行，它将起作用。

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()。似乎测试导致代码中断。

在Object中返回此内容以创建链

3 个答案: