Home / Questions / 1539
Accepted
Raider
Asked: 2020-12-23 05:03:37 +0800 CST 2020-12-23 05:03:37 +0800 CST

如何从中获取异步（AJAX）调用的响应？

  • 772

我目前有这个功能：

function devuelveButaca(posicion){
    var array = posicion.split('_');
    var row = array[0];
    var column = array[1];
    var planta = $('#plantaField').val();
    var resultado = "";
    $.ajax({
        type : 'GET',
        url : 'site/numButaca',
        data : {
            planta : planta,
            column : column,
            row : row
        },
        success : function(data) {
            if(data == 'undefined' || data == ''){
                resultado = column;

            }else{
                resultado = data;
            }
        },
        error : function(request, status, error) {

        },
    });
    alert(resultado);
    return resultado;
}

正确返回结果，问题是除非它进入调试模式，或者在返回之前发出警报，resultado否则它返回空。目前，警报退出为空但正确返回结果（我使用它将变量文本添加到 div）。

我读过它可以通过设置超时来解决，但我想知道是否有比这更优雅的解决方案。

javascript

4 Answers

  1. Best Answer

    问题的解释。

    Ajax 中的 A 代表异步；这意味着该请求超出了正常的执行流程。在您的代码中，$.ajax执行时，在返回之后return resultado，并且在函数或 ajax 请求将响应的值传递给成功之前执行。因此，当您使用警报时，它会返回空或未定义，因为您发出的请求尚未返回。

    您可以为您的问题提供的可能解决方案：

    ES2017+：异步/等待的承诺

    2017 年发布的 ECMAScript 版本引入了对异步函数的支持。在async和await的帮助下，您可以编写同步风格的异步代码。代码仍然是异步的，但更容易阅读和理解。

    Async/await是基于 Promise 的，一个 async 函数总是会返回一个 Promise。Await 从 Promise 中获取信息，结果将是已解决的值，否则如果已被拒绝，则为错误。

    这是一个如何在高级函数级别创建异步的示例：

    // Using 'superagent' which will return a promise.
var superagent = require('superagent')

// This is isn't declared as `async` because it already returns a promise
function delay() {
  // `delay` returns a promise
  return new Promise(function(resolve, reject) {
    // Only `delay` is able to resolve or reject the promise
    setTimeout(function() {
      resolve(42); // After 3 seconds, resolve the promise with value 42
    }, 3000);
  });
}

    在函数中使用异步：

    async function getAllBooks() {
  try {
    // GET a list of book IDs of the current user
    var bookIDs = await superagent.get('/user/books');
    // wait for 3 seconds (just for the sake of this example)
    await delay();
    // GET information about each book
    return await superagent.get('/books/ids='+JSON.stringify(bookIDs));
  } catch(error) {
    // If any of the awaited promises was rejected, this catch block
    // would catch the rejection reason
    return null;
  }
}

// Start an IIFE to use `await` at the top level
(async function(){
  let books = await getAllBooks();
  console.log(books);
})();

    当前的浏览器和节点版本支持异步/等待。您还可以通过在 regenerator（或使用 regenerator 的工具，例如 Babel）的帮助下将代码转换为 ES5 来支持旧环境。

    当前版本的浏览器和节点支持异步/等待。在 Babel 等工具下使用 ES5 的先前版本也支持它。

    使用回调函数： 回调是稍后将在 Ajax 请求完成时调用的函数。

    例子：

    function hacerPeticionAjax(url, callback) { // callback es solo el nombre de la variable
    $.ajax(url, {
        // ...
        success: callback,
        // ...
    });
}

function alRecibirAnimales(animales) {
  // animales contendrá la respuesta al ajax
} 

hacerPeticionAjax('/api/animales', alRecibirAnimales);

    这个例子演示了该属性success应该接收一个函数，如果请求成功，jQuery 将在请求结束时调用该函数。顺便说一句，还有另一个回调可用于控制发生错误时的处理方式。它是使用属性处理的error；接收一个回调，如果不成功将被调用。

    使用承诺：

    Promise 是未来值的容器。当 Promise 接收到该值（如果它已解决或取消）时，它将通知侦听器它想要访问该返回值。一个附加值是它有更多的代码阅读，在我看来这是一个更好的方法。例子：

    function delay() {
  // `delay` returns a promise
  return new Promise(function(resolve, reject) {
    // Only `delay` is able to resolve or reject the promise
    setTimeout(function() {
      resolve(42); // After 3 seconds, resolve the promise with value 42
    }, 3000);
  });
}

delay().then(function(v) { // `delay` returns a promise
  console.log(v); // Log the value once it is resolved
}).catch(function(v) {
  // Or do something else if it is rejected 
  // (it would not happen in this example, since `reject` is not called).
});

    使用延迟的 Jquery

    这是一个由 jQuery 实现的 promises 的自定义实现；用法与上面解释的点非常相似：

    function ajax() {
    return $.ajax(...);
}

ajax().done(function(result) {
    // Code depending on result
}).fail(function() {
    // An error occurred
});

    源 - 如何从异步调用返回响应？

    • 40

  2. 您可以做的解决方案之一是删除异步，以便您通过放置（异步：false）立即做出响应。

    function devuelveButaca(posicion){
var array = posicion.split('_');
var row = array[0];
var column = array[1];
var planta = $('#plantaField').val();
var resultado = "";
$.ajax({
    async: false,
    type : 'GET',
    url : 'site/numButaca',
    data : {
        planta : planta,
        column : column,
        row : row
    },
    success : function(data) {
        if(data == 'undefined' || data == ''){
            resultado = column;

        }else{
            resultado = data;
        }
    },
    error : function(request, status, error) {

    },
});
alert(resultado);
return resultado;
}
    • 9

  3. 在进行 Ajax 调用时，它是异步执行的，也就是说，在发出请求的同时，继续执行您在那里的函数。

    为此，您有成功和错误回调。

    如果您在 Success 中放置警报，您将能够看到结果。

    $.ajax({
    type : 'GET',
    url : 'site/numButaca',
    data : {
        planta : planta,
        column : column,
        row : row
    },
    success : function(data) {
        if(data == 'undefined' || data == ''){
            resultado = column;

        }else{
            resultado = data;
        }
        alert(resultado);
    },
    error : function(request, status, error) {

    },
});

    一种解决方案是向您的函数传递一个回调来执行它。

    function devuelveButaca(posicion, callback){
    var array = posicion.split('_');
    var row = array[0];
    var column = array[1];
    var planta = $('#plantaField').val();
    var resultado = "";
    $.ajax({
        type : 'GET',
        url : 'site/numButaca',
        data : {
            planta : planta,
            column : column,
            row : row
        },
        success : function(data) {
            if(data == 'undefined' || data == ''){
               resultado = column;
            }else{
               resultado = data;
            }
            if(callback)
                callback(resultado);
        },
        error : function(request, status, error) {

        },
    });    
 }

    你这样称呼它：

        devuelveButaca(1, function(resultado){ alert(resultado) });
    • 7

  4. 的值resultado返回空，因为它是通过异步 (AJAX) 调用获得的，但您正在同步返回它（因此该值尚未被实例化）。

    正如您所说，一个可能的解决方案是添加一个 wait （或 a timeout）以确保将获得该值。但这可能会产生问题：如果等待的价值不够怎么办？那么您仍然会遇到同样的问题，并且该值将返回 null。

    实际上这是对 AJAX 的错误使用。这个想法不是你返回一些东西（这将是同步的），而是你在异步接收它们时使用这些值（在 中success）。

    为此，您可以做两件事：

    1. 将代码从调用函数的位置移到success. 虽然这个选项如果因为不同的原因或者从不同的函数调用可能不是很好devuelveButaca()。

    2. 将回调函数作为参数传递，该回调函数将从success. 这样，您可以devuelveButaca()从不同的上下文中调用它并且它总是可以工作的。

      function devuelveButaca(posicion, callback){
    var array = posicion.split('_');
    var row = array[0];
    var column = array[1];
    var planta = $('#plantaField').val();
    var resultado = "";
    $.ajax({
        type : 'GET',
        url : 'site/numButaca',
        data : {
            planta : planta,
            column : column,
            row : row
        },
        success : function(data) {
            if(data == 'undefined' || data == ''){
                resultado = column;

            }else{
                resultado = data;
            }

            callback(resultado);
        },
        error : function(request, status, error) {

        },
    });
}
    • 5