javascript - AJAX 调用完成后如何执行操作？

Question

我尝试在不同的地方调用函数。这就是为什么我返回 true 或 false。 我遇到的问题是在 hasCreditCard 有时间执行调用之前，直接转到 else...

if (hasCreditCard($('#memberId').val())) {
  ...
}
else{
  ...
}

function hasCreditCard(memberId) {
    var url = getHostName() + "/members/" + memberId + "/creditcard";
    jQuery.ajax({
        type: "head",
        url: url,
        contentType: "application/json",
        headers: {
            "Authorization": "Basic " + $.cookie('authorization')
        },
        success: function (data, status, jqXHR) {
            if (jqXHR.status == 200) {
                return true;
            }
            return false;
        },
        error: function (jqXHR, status) {
            return false;
        }
    });
}

Answer 1

因为 AJAX 调用是异步，并且您的 if 语句不会等待调用结束。

两种解决方案:

#1:您可以将回调传递给函数并在成功/错误处理程序中调用此回调:

getCreditCard($('#memberId').val(), function (hasCreditCard) {
  if (hasCreditCard) {
    ...
  } else {
    ...
  }
})

function getCreditCard(memberId, nextStep) {
  ...
  jQuery.ajax({
    ...
    success: function (data, status, jqXHR) {
      if (jqXHR.status == 200) {
        nextStep(true)
        return
      }
      nextStep(false)
    },
    error: function (jqXHR, status) {
      nextStep(false)
    }
  })
}

#2:您可以创建另一个全局函数并在成功/错误处理程序中调用此函数:

getCreditCard($('#memberId').val())

function getCreditCard(memberId) {
  ...
  jQuery.ajax({
    ...
    success: function (data, status, jqXHR) {
      if (jqXHR.status == 200) {
        nextStep(true)
        return
      }
      nextStep(false)
    },
    error: function (jqXHR, status) {
      nextStep(false)
    }
  })
}

function nextStep(hasCreditCard) {
  if (hasCreditCard) {
    ...
  } else {
    ...
  }
}