使用ajax调用循环函数

Looping through functions with ajax calls

本文关键字：函数 循环 调用 ajax 使用      更新时间：2023-09-26

我目前正在循环使用许多验证特定输入值的函数。特别需要一个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);
}

您应该使用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
  })
相关文章：