Javascript Vues.js。异步/等待未按预期工作

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();

即使这些方法看起来运行正常,控制台日志也会显示最终结果是在内置的wait/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 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
}