Javascript 重新创建jQuery'；s$.ajax（）.done（）

我正在尝试创建我自己的“基本”javascript框架，我希望它能以类似于

jQuery

的方式工作，我爱上了方法链接而不是回调。然而，作为初级javascripter，实现这一点对我来说很困难

我现在已经创建了自己的

ajax

“类”，但我似乎不知道如何重新创建jQuery使用的

.done（）

我希望这个语法能够工作，以摆脱我的回调地狱

ajax（url、类型、数据）.success（函数（响应）{}）

但是，这会导致
响应
为
假
。显然，因为它是在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
});

--这不一定要通过承诺来实现。它可以通过任何可能的方式实现，我只是不知道任何方式。
以下是你如何通过承诺实现它。在这种情况下，
ajax
将返回该承诺，因此不是构造函数。链式方法称为
，然后称为


var ajax=函数（url、方法、数据）{
返回新承诺（功能（解决、拒绝）{
var xhttp=new XMLHttpRequest（），
strType=method.toLowerCase（），
方法={
get:function（）{
var urlParams=序列化（数据）；
xhttp.open（“GET”，url+urlparms）；
}
};
方法[strType]（）；
xhttp.send（）；
xhttp.onreadystatechange=函数（）{
如果（this.readyState！==4）返回；
解析（this.status==200？this.responseText:this.statusText）；
};
xhttp.onerror=xhttp.onabort=拒绝；
});
};
//我的函数调用；
阿贾克斯http://httpstat.us/200?sleep=200“，”得到“{
'Testval'：'testvalue'，
“字段”：“值”
}).然后（功能（响应）{
日志（“响应为：”+响应）；
}).catch（函数（）{
log（“出现错误或请求被中止”）；
});
函数序列化（obj，前缀）{
var-str=[]，p；
用于（obj中的p）{
if（对象hasOwnProperty（p））{
变量k=前缀？前缀+“[”+p+“]”：p，v=obj[p]；
str.push（（v！==null&&typeof v==“object”）？
序列化（v，k）：
encodeURIComponent（k）+“=”+encodeURIComponent（v））；
}
}
返回“？”+str.join（&）；
};以下是您如何通过承诺来做到这一点。在这种情况下，
ajax
将返回该承诺，因此不是构造函数。链式方法称为
，然后称为


var ajax=函数（url、方法、数据）{
返回新承诺（功能（解决、拒绝）{
var xhttp=new XMLHttpRequest（），
strType=method.toLowerCase（），
方法={
get:function（）{
var urlParams=序列化（数据）；
xhttp.open（“GET”，url+urlparms）；
}
};
方法[strType]（）；
xhttp.send（）；
xhttp.onreadystatechange=函数（）{
如果（this.readyState！==4）返回；
解析（this.status==200？this.responseText:this.statusText）；
};
xhttp.onerror=xhttp.onabort=拒绝；
});
};
//我的函数调用；
阿贾克斯http://httpstat.us/200?sleep=200“，”得到“{
'Testval'：'testvalue'，
“字段”：“值”
}).然后（功能（响应）{
日志（“响应为：”+响应）；
}).catch（函数（）{
log（“出现错误或请求被中止”）；
});
函数序列化（obj，前缀）{
var-str=[]，p；
用于（obj中的p）{
if（对象hasOwnProperty（p））{
变量k=前缀？前缀+“[”+p+“]”：p，v=obj[p]；
str.push（（v！==null&&typeof v==“object”）？
序列化（v，k）：
encodeURIComponent（k）+“=”+encodeURIComponent（v））；
}
}
返回“？”+str.join（&）；
};
this[strType]（）
的预期结果是什么？它调用一个扩展函数（在本例中是
ajax.prototype.get（）
），因此它设置
xhttp.open（）调用函数时未定义
serialize
，
serialize（）
是一个自定义函数，因此我省略了它以最小化代码块。我将为您添加它。预期结果将在此处返回。如何执行
success
？此[strType]（）
的预期结果是什么？它调用一个扩展函数（在本例中是
ajax.prototype.get（）
），因此它设置
xhttp.open（）调用函数时未定义
serialize
，
serialize（）
是一个自定义函数，因此我省略了它以最小化代码块。我将为您添加它。预期结果将在此处返回。如何执行
成功
？啊，是的，我知道这种方法（尽管我还不完全理解）。然而，我反对这种方法。我不想调用
then（）
。我希望能够堆叠
.success（）
，
.error（）
等。我不希望我的整个脚本都充满了thens和catch.：（@babyded则需要将
success
转换为
。然后（）
。你不能期望异步代码同步运行。那么，与
成功
和
错误
相反，你真的对
然后
和
捕获
的名称有问题吗？请注意，jQuery现在也支持
然后
和
捕获
，就像承诺/a+规范一样，它已经成为标准的运行方式链接异步方法c