Javascript Vues.js。异步/等待未按预期工作
即使这些方法看起来运行正常,控制台日志也会显示最终结果是在内置的wait/sync之前输出的Javascript Vues.js。异步/等待未按预期工作,javascript,vue.js,promise,async-await,Javascript,Vue.js,Promise,Async Await,即使这些方法看起来运行正常,控制台日志也会显示最终结果是在内置的wait/sync之前输出的 submitForm: function() { console.log("SUBMIT !"); // vee-validate form validation request const makeValidationRequest = () => { return this.$validator.validateAll();
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
最后
RESULT
我的嵌套awout/sync有什么问题。。。
等待反馈,validateAndSend立即返回承诺 更改:
const result = validateAndSend();
进入:
(并将async
添加到submitForm)
在记录结果之前等待承诺完成。删除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
}
您需要在validateAndSend之前等待validateAndSend()引发语法错误:wait是保留字(158:21)…我的错误:我还(按照您的建议)向submitForm添加了异步。解决了的。我现在明白了。提交app.js:3238表单已验证。。。isValid:false app.js:3321无效表单app.js:3346结果:falseGot it。。。这么简单
const result = await validateAndSend();
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
}