[英]Vues.js . async/await not working as expected
即使此方法似乎可以正常運行,控制台日志也會顯示最終的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
我通常應該得到:
SUBMIT !
form validated... isValid: false
INVALID FORM
最后
RESULT
我的嵌套awaut / sync有什么問題...想得到反饋
validateAndSend立即返回承諾。
更改:
const result = validateAndSend();
成:
const result = await validateAndSend();
(並將async
添加到submitForm)
等待promise完成后再記錄結果。
刪除makeValidationRequest函數,這是不必要和錯誤的。 嘗試這個:
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.