我有一个提供标准扩展点的JavaScript小部件。其中之一是beforereate函数。它应该返回false以防止创建一个项。
我已经使用jQuery在这个函数中添加了一个Ajax调用:
beforecreate: function (node, targetNode, type, to) {
jQuery.get('http://example.com/catalog/create/' + targetNode.id + '?name=' + encode(to.inp[0].value),
function (result) {
if (result.isOk == false)
alert(result.message);
});
}
但是我想阻止小部件创建项目,所以我应该在母函数中返回false,而不是在回调中返回false。是否有一种方法可以使用jQuery或任何其他浏览器内API执行同步AJAX请求?
所有这些答案都忽略了一点,即使用async:false执行Ajax调用将导致浏览器挂起,直到Ajax请求完成。使用流控制库可以解决这个问题,而不需要挂起浏览器。下面是一个Frame.js的例子:
beforecreate: function(node,targetNode,type,to) {
Frame(function(next)){
jQuery.get('http://example.com/catalog/create/', next);
});
Frame(function(next, response)){
alert(response);
next();
});
Frame.init();
}
注意:你不应该使用async: false,因为这个警告消息:
从Gecko 30.0 (Firefox 30.0 / Thunderbird 30.0 / SeaMonkey 2.27)开始,由于对用户体验的负面影响,主线程上的同步请求已被弃用。
Chrome甚至会在控制台发出警告:
主线程上的同步XMLHttpRequest已弃用,因为它会对最终用户的体验产生不利影响。更多帮助,请访问https://xhr.spec.whatwg.org/。
如果您正在做这样的事情,这可能会破坏您的页面,因为它可能在任何一天停止工作。
如果你想让它看起来仍然是同步的,但仍然不会阻塞,那么你应该使用async/await,可能还应该使用一些基于承诺的ajax,比如新的Fetch API
async function foo() {
var res = await fetch(url)
console.log(res.ok)
var json = await res.json()
console.log(json)
}
编辑
当用户正在浏览或关闭页面时,chrome正在禁用同步XHR。这包括前卸载,卸载,页面隐藏和可见性改变。
如果这是您的用例,那么您可能需要看看navigator。sendBeacon相反
页面也可以使用http headers或iframe的allow属性禁用sync req
因为xmlhttpreonse同步操作已弃用,所以我提出了以下包装XMLHttpRequest的解决方案。这允许有序AJAX查询,但本质上仍然是异步的,这对于单次使用CSRF令牌非常有用。
它也是透明的,因此像jQuery这样的库可以无缝地运行。
/* wrap XMLHttpRequest for synchronous operation */
var XHRQueue = [];
var _XMLHttpRequest = XMLHttpRequest;
XMLHttpRequest = function()
{
var xhr = new _XMLHttpRequest();
var _send = xhr.send;
xhr.send = function()
{
/* queue the request, and if it's the first, process it */
XHRQueue.push([this, arguments]);
if (XHRQueue.length == 1)
this.processQueue();
};
xhr.processQueue = function()
{
var call = XHRQueue[0];
var xhr = call[0];
var args = call[1];
/* you could also set a CSRF token header here */
/* send the request */
_send.apply(xhr, args);
};
xhr.addEventListener('load', function(e)
{
/* you could also retrieve a CSRF token header here */
/* remove the completed request and if there is more, trigger the next */
XHRQueue.shift();
if (XHRQueue.length)
this.processQueue();
});
return xhr;
};
来自jQuery文档:您将异步选项指定为false以获得同步Ajax请求。然后你的回调函数可以在你的母函数继续之前设置一些数据。
下面是你的代码如果按照建议修改后的样子:
beforecreate: function (node, targetNode, type, to) {
jQuery.ajax({
url: 'http://example.com/catalog/create/' + targetNode.id + '?name=' + encode(to.inp[0].value),
success: function (result) {
if (result.isOk == false) alert(result.message);
},
async: false
});
}