javascript - 使用 ajax 调用循环遍历函数

Question

我目前正在循环执行一些验证特定输入值的函数。其中一个特别需要 ajax 调用来验证地址。我看到 SO 上的用户建议使用回调来返回值。

唯一的问题是，当它确实检索到值时，该函数已经在循环中触发并返回了一个未定义的值。我一直在四处寻找，不确定最好的解决方案是什么。我会以某种方式延迟循环吗？我是否首先正确设置了我的功能？需要一些认真的帮助。

var validations = [validateUsername, validatePassword, validateAddress];

function submitForm() { 
  var inputs = validations.map(function(validation) {
    return validation();
  });

  return inputs.every(function(input) {
    return input === true;
  }); // [true, true, undefined]
}

function validateAddress() {
  function addressIsValid(callback) {
    $.ajax({
      type: 'POST',
      url: '/address/validate',
      data: $form.serialize(),
      dataType: 'json',
      success: function(response) {
        return callback(response.Data === 200);
      }
    });
  }

  function callback(response) {
    return response;
  }

  return addressIsValid(callback);
}

Answer 1

你应该使用 Promises .

首先，你应该让你的异步函数返回一个 Promise:

function validateAddress() {
  return new Promise((resolve, reject)=> {
    $.ajax({
      type: 'POST',
      url: '/address/validate',
      data: $form.serialize(),
      dataType: 'json',
      success: response=> {
        response.Data === 200 ? resolve() : reject();
      }
    });
  });
}

然后像这样重写您的 submitForm 函数:

function submitForm() { 
  var promises = validations.map(validation=> validation());
  return Promise.all(promises)
}

然后你可以像这样使用submitForm:

submitForm()
  .then(()=> {
    // form is valid
  }, ()=> {
    // form is invalid
  })