Question

我试图创建自己的＆＃34;基本＆＃34; javascript框架，我希望它以类似于jQuery的方式工作，并且我已经爱上了方法链而不是回调。然而，作为一个初级javascripter，实现这一点对我来说很难。

我现在已经创建了自己的ajax＆＃34;类＆＃34;但我似乎无法弄清楚如何重新创建.done() jQuery使用。

我希望这种语法有效，以摆脱我的回调地狱;

ajax(url, type, data).success(function(response){});

但是，这导致response为false。显然，因为它在我的ajax调用之前被调用了。

我已经尝试插入一个承诺，但这只会给我带来很多语法错误或模糊错误，例如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
});

- NOT 必须通过承诺。它可以通过任何可能的方式，我只是不知道。

Answer 1

您将如何使用承诺来实现这一目标。在这种情况下，ajax将返回该承诺，因此不会是构造函数。链式方法称为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("&");
};

如果您更喜欢名称success，请执行：

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

:-)当然，现在你有一个带有非标准方法名称的promise对象，这实际上并不是最佳实践。更好地坚持标准承诺。

重新创建jQuery＆＃39; $ .ajax（）。done（）

1 个答案: