Despite appearing to run correctly, the console log indicates that the final result is being output before the inner await/sync.
submitForm: function() {
console.log("SUBMIT !");
// vee-validate form validation request
const makeValidationRequest = () => {
return this.$validator.validateAll();
};
const validateAndSend = async () => {
const isValid = await makeValidationRequest();
console.log("form validated... isValid: ", isValid);
if (isValid) {
console.log("VALID FORM");
// axios post request parameters
const data = { ... }
};
const axiosConfig = {
headers: { ... }
};
const contactAxiosUrl = "...";
// send axios post request
const makeAxiosPostRequest = async (url, data, config) => {
try {
const result = await axios.post(url, data, config);
console.log("axios post request result: ", result);
return true;
} catch (err) {
console.log("axios post request: ", err.message);
return false;
}
};
this.$store.dispatch("switchLoading", true);
const sent = await makeAxiosPostRequest( contactAxiosUrl, contactAxiosData, axiosConfig );
this.$store.dispatch("switchLoading", false);
return sent;
} else {
console.log("INVALID FORM");
return false;
}
};
const result = validateAndSend();
console.log("RESULT: ", result);
},
the console log shows:
SUBMIT !
app.js:3312 RESULT: Promise {<pending>}__proto__: Promisecatch: ƒ catch()constructor: ƒ Promise()finally: ƒ finally()then: ƒ then()arguments: (...)caller: (...)length: 2name: "then"__proto__: ƒ ()[[Scopes]]: Scopes[0]Symbol(Symbol.toStringTag): "Promise"__proto__: Object[[PromiseStatus]]: "resolved"[[PromiseValue]]: false
app.js:3209 form validated... isValid: false
app.js:3291 INVALID FORM
I am expecting:
SUBMIT !
form validated... isValid: false
INVALID FORM
and also
RESULT
Not sure what's causing the issue with my nested await/sync... thank you for any feedback