有没有办法等待AJAX​​响应并停止执行？

Question

这是我想要执行的一些代码.我想等待AJAX​​响应,所以我可以从服务器返回一些东西.有没有办法实现这个目标？

function functABC(){
    $.ajax({
        url: 'myPage.php',
        data: {id: id},
        success: function(data) {
            return data;
        }
    });

    //Wait for AJAX (???)
}

var response = functABC();

Answer 1

所有Ajax调用都可以异步完成(使用回调函数,这将是'success'键后指定的函数)或同步 - 有效阻塞和等待服务器应答.要获得同步执行,您必须指定

async: false 

像这里描述的那样

但请注意,在大多数情况下,异步执行(通过成功回调)就可以了.

Answer 2

简单的答案是关闭async.但这是错误的做法.正确的答案是重新思考如何编写其余的代码.

而不是写这个:

function functABC(){
    $.ajax({
        url: 'myPage.php',
        data: {id: id},
        success: function(data) {
            return data;
        }
    });
}

function foo () {
    var response = functABC();
    some_result = bar(response);
    // and other stuff and
    return some_result;
}

你应该这样写:

function functABC(callback){
    $.ajax({
        url: 'myPage.php',
        data: {id: id},
        success: callback
    });
}

function foo (callback) {
    functABC(function(data){
        var response = data;
        some_result = bar(response);
        // and other stuff and
        callback(some_result);
    })
}

也就是说,不是返回结果,而是传递需要作为回调的代码.正如我所示,回调可以嵌套到与函数调用一样多的级别.

快速解释为什么我说关闭异步是错误的:

关闭异步将在等待ajax调用时冻结浏览器.用户无法点击任何内容,无法滚动,在最坏的情况下,如果用户内存不足,有时当用户将窗口拖离屏幕并再次拖入时他会看到空格,因为浏览器已冻结且无法重绘.对于像IE7这样的单线程浏览器,情况更糟:所有网站都冻结了!遇到这种情况的用户可能会认为您的网站存在问题.如果你真的不想异步这样做,那么只需在后端进行处理并刷新整个页面.它至少会觉得没有错误.

Answer 3

如果你可以使用promises,你也可以使用promise链.

function functABC() {
  return new Promise(function(resolve, reject) {
    $.ajax({
      url: 'myPage.php',
      data: {id: id},
      success: function(data) {
        resolve(data) // Resolve promise and go to then()
      },
      error: function(err) {
        reject(err) // Reject the promise and go to catch()
      }
    });
  });
}

functABC().then(function(data) {
  // Run this when your request was successful
  console.log(data)
}).catch(function(err) {
  // Run this when promise was rejected via reject()
  console.log(err)
})