[英]Vues.js . async/await not working as expected
Even if this methods seels to be running correctly , the console log shows that the final RESULt is output before the inned await/sync 即使此方法似乎可以正常运行,控制台日志也会显示最终的RESULt是在插入的等待/同步之前输出的
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 is :
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 should normally get : 我通常应该得到:
SUBMIT !
form validated... isValid: false
INVALID FORM
and finally 最后
RESULT
What's wrong with my nested awaut/sync... thnaks for feedback 我的嵌套awaut / sync有什么问题...想得到反馈
The validateAndSend returns the promise instantly. validateAndSend立即返回承诺。
change: 更改:
const result = validateAndSend();
into: 成:
const result = await validateAndSend();
(and add async
to the submitForm) (并将
async
添加到submitForm)
To wait for the promise to complete before logging the result. 等待promise完成后再记录结果。
Remove makeValidationRequest function, it is unnecessary and wrong. 删除makeValidationRequest函数,这是不必要和错误的。 Try this:
尝试这个:
submitForm: async function () {
// get form validation status
let formIsValid = await this.$validator.validateAll()
let url = ''
let formData = {}
let config = {
headers: {}
}
const postData = async (url, dta, cnf) => {
try {
// first, show loader
this.$store.dispatch('switchLoading', true)
// then try to get response.data
let {data} = await axios.post(url, dta, cnf)
// if successful, just console it
console.log(`form post successful: ${data}`)
} catch (err) {
// if unsuccessful, console it too
console.log(`error posting data: ${err}`)
} finally {
// successful or not, always hide loader
this.$store.dispatch('switchLoading', false)
}
}
formIsValid && postData(url, formData, config)
// else not required, you can't submit invalid form
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.