我有一个提供标准扩展点的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请求?
当前回答
首先，我们应该了解什么时候使用$。当我们使用$。get/$。post时
当我们需要对ajax请求进行低级控制时，例如请求头设置、缓存设置、同步设置等，那么我们应该使用$.ajax。
$ . get /美元。post:当我们不需要对ajax请求进行低级控制时。仅简单地获取/发布数据到服务器。这是一种速记
$.ajax({
url: url,
data: data,
success: success,
dataType: dataType
});
因此，我们不能在$.get/$.post中使用其他特性(同步，缓存等)。
因此，对于ajax请求的低级控制(同步，缓存等)，我们应该使用$.ajax
$.ajax({
type: 'GET',
url: url,
data: data,
success: success,
dataType: dataType,
async:false
});
其他回答
这是一个例子:
$.ajax({
url: "test.html",
async: false
}).done(function(data) {
// Todo something..
}).fail(function(xhr) {
// Todo something..
});
这是我的简单实现ASYNC请求与jQuery。我希望这能对大家有所帮助。
var queueUrlsForRemove = [
'http://dev-myurl.com/image/1',
'http://dev-myurl.com/image/2',
'http://dev-myurl.com/image/3',
];
var queueImagesDelete = function(){
deleteImage( queueUrlsForRemove.splice(0,1), function(){
if (queueUrlsForRemove.length > 0) {
queueImagesDelete();
}
});
}
var deleteImage = function(url, callback) {
$.ajax({
url: url,
method: 'DELETE'
}).done(function(response){
typeof(callback) == 'function' ? callback(response) : null;
});
}
queueImagesDelete();
async: false会导致浏览器被阻塞。 对于非阻塞同步解决方案，您可以使用以下方法:
ES6/ECMAScript2015
在ES6中，你可以使用生成器和co库:
beforecreate: function (node, targetNode, type, to) {
co(function*(){
let result = yield jQuery.get('http://example.com/catalog/create/' + targetNode.id + '?name=' + encode(to.inp[0].value));
//Just use the result here
});
}
ES7
在ES7中，你可以使用async await:
beforecreate: function (node, targetNode, type, to) {
(async function(){
let result = await jQuery.get('http://example.com/catalog/create/' + targetNode.id + '?name=' + encode(to.inp[0].value));
//Just use the result here
})();
}
注意:你不应该使用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
优秀的解决方案!我注意到，当我试图实现它时，如果我在success子句中返回一个值，它返回为未定义。我必须把它存储在一个变量中，然后返回那个变量。这是我想出的方法:
function getWhatever() {
// strUrl is whatever URL you need to call
var strUrl = "", strReturn = "";
jQuery.ajax({
url: strUrl,
success: function(html) {
strReturn = html;
},
async:false
});
return strReturn;
}
