javascript - 重新创建 jQuery 的 $.ajax().done()

Question

我正在尝试创建自己的“基本”javascript 框架，我希望它以与 jQuery 类似的方式工作，并且我已经爱上了方法链接而不是回调。然而，作为一名初级 JavaScript 开发人员，实现这一点对我来说很困难。

我现在已经创建了自己的 ajax “类”，但我似乎不知道如何重新创建 .done() jQuery 使用。

我希望这种语法能够发挥作用，以摆脱我的回调 hell ；

ajax(url, 类型, 数据).success(function(response){});

但是，这会导致响应为false。显然，因为它是在我的 ajax 调用完成之前就被调用的。

我尝试插入一个 Promise，但这只给我带来了很多语法错误或模糊错误，例如 uncaught (in Promise) OK。

这就是我的代码当前的样子；

var ajax = function(url, method, data) {
  if(!(this instanceof ajax))
  {
    return new ajax(url, method, data);
  }
  var ajaxObj = this;
  var prom    = new Promise(function(resolve, reject) {
    ajaxObj.xhttp     = new XMLHttpRequest();
    ajaxObj.url       = url;
    ajaxObj.data      = data;
    ajaxObj.urlParams = '';
    ajaxObj.response  = false;
    ajaxObj.get();
    ajaxObj.xhttp.send();
    ajaxObj.xhttp.onreadystatechange = function() {
      if(this.readyState == 4 && this.status == 200)
      {
        resolve(this.responseText);
      }
      else
      {
        reject(this.statusText);
      }
    };

  });

  return prom;
};

ajax.prototype.get = function() {
  var urlParams = serialize(this.data);
  this.xhttp.open("GET", this.url + urlParams);
  return this;
};

ajax.prototype.success = function(callBack) {
  callBack(this.response);
};

      //My function call;
  ajax('url', 'GET', {
    'Testval': 'testvalue',
    'field': 'value'
  }).then(function(response) {
    console.log("Response is:" + response);
  }).catch(function(response){});

-- 对于那些想知道的人，我的序列化函数:

var serialize = function(obj, prefix) {
  var str = [], p;
  for(p in obj)
  {
    if(obj.hasOwnProperty(p))
    {
      var k = prefix ? prefix + "[" + p + "]" : p, v = obj[p];
      str.push((v !== null && typeof v === "object") ?
              serialize(v, k) :
              encodeURIComponent(k) + "=" + encodeURIComponent(v));
    }
  }
  return '?' + str.join("&");
};

-- 注意:

我希望能够像这样调用我的ajax函数:

ajax(url, type, data).success(function(response){
  //The responseData has already been handled by the success function before the callback.
  //On success
}).error(function(error){
  // On error
});

--这不必必须通过 promise 来实现。它可以通过任何可能的方式，我只是不知道。

Answer 1

以下是如何使用 Promise 来做到这一点。在这种情况下，ajax 将返回该 promise ，因此不会是构造函数。链式方法称为 then。

var ajax = function(url, method, data) {
    return new Promise(function (resolve, reject) {
        var xhttp = new XMLHttpRequest(),
            strType = method.toLowerCase(),
            methods = {
                get: function() {
                    var urlParams = serialize(data);
                    xhttp.open("GET", url + urlParams);
                }
            };
        methods[strType]();
        xhttp.send();
        xhttp.onreadystatechange = function() {
            if (this.readyState !== 4) return;
            resolve(this.status == 200 ? this.responseText : this.statusText);
        };
        xhttp.onerror = xhttp.onabort = reject;
    });
};

//My function call;
ajax('http://httpstat.us/200?sleep=200', 'GET', {
    'Testval': 'testvalue',
    'field': 'value'
}).then(function(response) {
    console.log("Response is:" + response);
}).catch(function() {
    console.log("There was an error or the request was aborted.");
});

function serialize(obj, prefix) {
    var str = [], p;
    for(p in obj) {
        if(obj.hasOwnProperty(p)) {
            var k = prefix ? prefix + "[" + p + "]" : p, v = obj[p];
            str.push((v !== null && typeof v === "object") ?
                serialize(v, k) :
                encodeURIComponent(k) + "=" + encodeURIComponent(v));
        }
    }
    return '?' + str.join("&");
};

如果您更喜欢“成功”这个名称，请执行以下操作:

    var promise = new Promise(function (resolve, reject) {
        // ...etc
    });
    promise.success = promise.then;
    promise.error = promise.catch;
    return promise;

:-) 当然，现在您有一个具有非标准方法名称的 Promise 对象，这实际上并不是被认为是最佳实践的东西。更好地遵守标准 promise 。