如何等待ajax响应？ [重复]

Question

此问题已经在这里有了答案：

How do I return the response from an asynchronous call? （39个答案）

[<15天前关闭。

我很困惑如何使用ajax从服务器获得响应。我已经使用了jquery，所以我想坚持使用它，因为它通常可以简化代码。除非有更好的方法，否则请提出建议。

基本上，我使用JS验证注册表单，步骤之一是检查是否已使用用户名。我不知道如何在继续之前等待响应。我不想使用async：false。

这里是代码。现在，checkUsername始终返回validate（）。

// check in DB if username is already taken
function isUsernameTaken(username) {
  $.ajax({
    type: "POST",
    url: "/checkUsername/",
    data: {
      username: username,
    },
    success: function (response) {
      if (response.type == "taken") {
        return true;
      } else {
        return false;
      }
    },
    error: function (xhr, errmsg, err) {
      console.log(xhr.status + ": " + xhr.responseText);
      return false;
    },
  });
}

// run checks
function checkUsername() {
  const input = usernameInput;
  const inputVal = input.val().trim();

  if (isUsernameTaken(inputVal)) {
    console.log("Username taken");
    invalidate(input, "Username taken");
    return;
  } else {
    console.log("validate");
    validate(input);
  }
}

Answer 1

问题是，一旦开始使用异步函数，就必须在调用堆栈中一直使用它们。

jQuery的$.ajax方法（和别名）都返回一个

deferred对象，该对象也是一个promise-like对象，因此其想法是return以便其他代码可以使用它来等待。

例如

function isUsernameTaken(username) {
  return $.post("/checkUsername/", { username })
    .then(({ type }) => type === 'taken', (jqXHR, textStatus, errorThrown) => {
      console.error(textStatus, errorThrown)
      return false
    })
}

这将返回一个以布尔值解析的promise。然后，您将像这样使用它
isUsernameTaken(inputVal).then(isTaken => {
  if (isTaken) {
    console.log("Username taken")
    invalidate(input, "Username taken")
  } else {
    console.log("validate")
    validate(input)
  }
})