使用ajax调用通过函数循环 [英] Looping through functions with ajax calls

问题描述

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

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

  var validations = [validateUsername，validatePassword，validateAddress]; 
 
函数submitForm（）{
 var inputs = validations.map（function（validation）{
 return validation（）; 
}）; 
 
 return inputs.every（function（input）{
 return input === true; 
}）; // $ true $ true 
 
 $ b function validateAddress（）{
 function addressIsValid（callback）{
 $ .ajax（{
类型：'POST'，
 url：'/ address / validate'，
 data：$ form.serialize（），
 dataType：'json'，
 success：function（响应）{
返回回调（response.Data === 200）; 
} 
}）; 
} 
 
函数回调（响应）{
 return response; 
} 
 
 return addressIsValid（callback）; 
 
  

解决方案

您应该使用 Promises 。

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

$ p $函数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 like this：

 函数submitForm（）{
 var promise = validations.map（validation => validation （））; 
 return Promise.all（promises）
} 
  

然后您可以使用 submitForm 像这样：

  submitForm（）
 .then （）=> {
 //表单有效
}，（）=> {
 //表单无效
}）
  

I'm currently looping through a number of functions that validate particular input values. One in particular requires an ajax call to validate an address. I saw that users here on SO suggested using callbacks to return the value.

The only problem is, by the time it does retrieve the value, the function had already fired within the loop and returned an undefined value. I've been searching around and wasn't sure what the best solution would be. Do I somehow delay the loop? Do I have my function setup right in the first place? Need some serious help.

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

解决方案

You should use Promises.

First, you should make your asynchronous functions return a 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();
      }
    });
  });
}

Then rewrite your submitForm function like this:

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

Then you can use submitForm like this:

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

这篇关于使用ajax调用通过函数循环的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！