两个ajax调用,只有一个正在运行
Two ajax calls and only one is running
我有下面的http变量,它返回一个对象:
var http = (function(){
var success = null;
var error = null;
var requestInfo = {content: '', status: 0};
var core = {
request: function(options){
var $http = Object.create(http);
sendRequest(options).then(function(){
if(typeof(success) == 'function'){
success(requestInfo.content);
}
}, function(){
if(typeof(error) == 'function'){
error(requestInfo.content);
}
});
return $http;
},
success: function(callback){
success = callback;
return this;
},
error: function(callback){
error = callback;
return this;
}
};
function sendRequest(options){
return new Promise(function(resolve, reject){
var xhttp = new XMLHttpRequest();
var method = options.method.toUpperCase();
xhttp.onreadystatechange = function() {
if(xhttp.readyState == 4){
requestInfo.content = JSON.parse(xhttp.responseText) || xhttp.responseText;
requestInfo.status = xhttp.status;
}
if (xhttp.readyState == 4 && xhttp.status == 200) {
resolve(requestInfo);
}else if(xhttp.readyState == 4 && xhttp.status != 200){
reject(requestInfo);
}else if(xhttp.status >= 400){
reject(requestInfo);
}
};
xhttp.open((method || 'GET'), options.url, true);
var data = options.data || '';
xhttp.setRequestHeader('X-CSRF-TOKEN', document.querySelector('meta[name="csrf-token"]').getAttribute('content'));
if((typeof(data) == 'object' && (Object.keys(data).length > 0) || data.length > 0)){
xhttp.send(JSON.stringify(data));
}else{
xhttp.send();
}
});
}
return core;
})();
如果我同时调用它不止一次,就像这样:
http.request({url: '/path1'}).success(function(){
alert('success');
});
http.request({url: '/path2'}).success(function(){
alert('success');
});
只有一个项目通过ajax传递,而另一个则不通过。是什么原因造成的?我原以为做Object.create(this)
会让每一个都独一无二,但事实并非如此。。。
方法使用指定的原型对象和属性创建一个新对象。
因此,您创建了两个具有相同原型的对象,并且数据在原型本身中。由于原型是一个对象,并且它是相同的,因此两个结果对象对其数据对象和函数具有相同的引用。
您需要不在原型对象中指定数据,而是为每个实例指定数据。
因此,在创建var $this = Object.create(this);
之后,必须将数据添加到$this
,例如successFunc
,否则下一个调用将覆盖此数据。
用于存储回调函数的sucess
和error
变量必须在request
函数中创建,才能在每个请求中真正唯一。但是,如果您要使用Promises,我建议使用XMLHttpRequest
对象可用的load
和error
事件侦听器来简化整个处理(一个很好的例子可以在MDN的XMLHttpRequest文章中找到),并简单地将您的成功和失败函数传递给Promise实例的then
方法。
下面是一个简化的JSFiddle示例,使用超时来模拟500毫秒的HTTP请求。
问题出在以下行:
var method = options.method.toUpperCase();
我没有在options
中设置method
属性,也没有错误地说它无法发送,它基本上只是在没有警告的情况下退出了该方法。。。
我把它改成这个:
var method = (options.method || 'GET').toUpperCase();
它开始工作了。
相关文章:
- 是否有一个JS/jQuery函数可以获取某个类的每个元素的ID
- 如何在只能有一个asp.net表单的主页上从asp.net页面中的javascript中获取值
- 有可能在来自链接的警报中有一个值吗
- 是否有一个Javascript函数可以使代码在运行时延迟
- 代码在jsfiddle上运行良好,但有一个函数在网站上不起作用
- 我有一个按钮试图运行警报,但它不起作用
- 谷歌分析是否有一个“;心跳;用于长时间运行的web应用程序的功能
- 是否有一种方法可以检查函数参数在Typescript运行之前是否有一个允许的值
- 有一个功能不运行的麻烦
- 如果我有一个rails后端和运行在Angular.js上的客户端,如何创建一个实时通知系统
- 一旦两个输入字段都有一个jQuery值,就运行函数
- 是否有一个工具来确定我的jQuery将跨浏览器运行
- Page有两个脚本.可以在所有浏览器上运行.其中一个在IE7上失败
- 两个Meteor示例中有一个无法在Windows 10上运行
- 是否有一个配置参数会导致Richfaces 3.3.3在DEV模式下运行(解包js)
- 在JavaScript中有一个简单的方法来运行现在的函数和特定的时间间隔
- 它不好有一个javascript计时器不断运行(会话检查)
- jQuery:是否有一个类似于change()的标签也在页面加载时运行
- 在AngularJS中有一个在$http之后运行的finally
- 在我的网站上,我有一个非常慢的页面,在那里我可以找到一个运行良好的加载程序