使用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。

首先，你應該讓你的異步函數返回一個承諾：

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