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
  })

使用ajax调用函数循环调用

1 个答案: