等待ajax完成后再返回结果(通用函数)

时间:2018-11-15 07:40:47

标签: javascript jquery ajax

关于如何在执行代码之前等待ajax完成的例子很多。那不是我的问题要问的。我的问题是如何为通用功能实现承诺/等待解决方案。

我在脚本中使用了很多重复的Ajax调用。我决定将此代码移入通用函数。正如我对异步的预期那样,我遇到的问题是代码不会等到ajax完成后才终止下一行代码。

function universalAjax(data) {

  var returnedData = false;

  $.ajax({
    type: 'POST',
    url: '/longScript.php',
    dataType: 'json',
    data: data,
    headers: {
      'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    },
    success: function(result) {
      returnedData = result;
    },
    fail: function(jqXHR, textStatus, errorThrown) {

    },
    complete: function(res) {

    },
    error: function(res) {

    }
  });

  return returnedData;
}

下面是我想要使用的功能的基本示例

function foo(data) {

  var result = universalAjax(data);

  // executes before above function has finished
  alert(result);
}

我知道我可以在success上指定一个函数回调,但这意味着我要获取ajax调用结果的每个实例都有两个函数。

如果可以的话,我想避免做以下事情

function universalAjax(data, callbackfunction) {

  $.ajax({
    type: 'POST',
    url: '/longScript.php',
    dataType: 'json',
    data: data,
    headers: {
      'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    },
    success: function(result) {
      callbackfunction(result);
    },
    fail: function(jqXHR, textStatus, errorThrown) {

    },
    complete: function(res) {

    },
    error: function(res) {

    }
  });    
}

function foo(data) {

  var result = universalAjax(data, fooCallback);
}

function fooCallback(data) {

  alert(data);
}

此外,以上示例将仅在success上调用该函数。

我认为在这种情况下一定有一种使用诺言的方法,但我的知识仅限于如何在上述通用实现中使用诺言。

0 个答案:

没有答案