如何在按钮@click[VUE JS]上连续调用函数

Question

我在@Click上调用了3个函数，我是这样做的：

<CButton
  @click=" getBillPrice();
           updateBill();
           postData();"
  type="submit"
  color="primary">Save</CButton>

首先调用getBillPrice（），然后调用updateBill（），然后调用postData（），这一点很重要。但是这些函数的运行顺序是错误的，首先是updateBillPrice，然后是postData（），然后是getBillPrice（）

我该如何修复它？以下是我的一些功能。这是文本可以发布这么多代码，您可以直接跳过此文本：Lorem ipsum dolor sit amet，consecetur adipiscing elit，ed do eiusmod temor的附带性ut labore et dolore magna aliqua。Ut enim ad minim veniam，quis nostrud练习ullamco labis nisi ut aliquip ex ea commodo的结果。Duis aute irure dolor in reguenderit in volptate velit esse curum dolore eu fugiat nulla pariatur。例外情况下，非证明，在过错中，必须承担责任。

getBillPrice() {
  if (this.data.billid.trim() == "Please Select") {
    return;
  }
  /*getting data from bill*/
  axios
    .get(this.APIServer + "bills/" + this.data.billid, {
      headers: { Authorization: this.$store.state.token },
    })
    .then((response) => {
      if (response.status === 200) {
        this.data.billPrice = response.data.netPrice;
        this.data.billTaxClass = response.data.taxClass;
        this.data.billPriceTotal = response.data.totalPrice;
        console.log("got the get");
      }
    })
    .catch((e) => {
      console.log("API failed");
      console.log(e);
    });
  /*END________*/
},


updateBill() {
  if (
    this.data.amount.trim() == "" ||
    this.data.price.trim() == "" ||
    this.data.title.trim() == "" ||
    this.data.billid.trim() == "Please Select"
  ) {
    return;
  }
  /*Update bill query */
  let updateData = {
    netPrice: Number(this.data.billPrice) + Number(this.data.totalPrice),
    totalPrice:
      (Number(this.data.billPrice) + Number(this.data.totalPrice)) *
        Number(this.data.taxClass) +
      (Number(this.data.billPrice) + Number(this.data.totalPrice)),
  };
  axios
    .patch(this.APIServer + "bills/" + this.data.billid, updateData, {
      headers: { Authorization: this.$store.state.token },
    })
    .then((response) => {
      if (response.status === 200) {
        console.log("bill updated");
      }
    })
    .catch((e) => {
      console.log("API failed");
      console.log(e);
    });
  /*END________*/
},


postData() {
      if (
        this.data.amount.trim() == "" ||
        this.data.price.trim() == "" ||
        this.data.title.trim() == "" ||
        this.data.billid.trim() == "Please Select"
      ) {
        return;
      }

      /*Post item */
      let postData = {
        amount: Number(this.data.amount),
        bill: {
          id: this.data.billid,
        },
        price: Number(this.data.price),
        title: this.data.title,
        totalPrice: Number(this.data.totalPrice),
      };
      axios
        .post(this.APIServer + "items", postData, {
          headers: { Authorization: this.$store.state.token },
        })
        .then((response) => {
          if (response.status === 201) {
            console.log("item posted");
            this.move("/items");
          }
        })
        .catch((e) => {
          console.log("API failed");
          console.log(e);
        });
      /*END________*/
    },

Answer 1

我认为，与其将每个函数都放在click事件上，不如创建一个函数来触发这些函数。

<CButton
  @click="onSubmit"
  color="primary">Save</CButton>

methods: {
  onSubmit(){
    this.getBillPrice();
    this.updateBill();
    this.postData()
  },
  ...
}

如果您的函数是异步的，那么您可以使用异步等待和try catch

methods: {
  async onSubmit(){
    try{
      await this.getBillPrice();
      await this.updateBill();
      this.postData()
    } catch(err){
      // Handle error.
    }

  },
  ...
}

因为您的项目中似乎不支持async await，所以您可以试试这个。（我在then catch方面没有那么多经验，但它应该有用）

methods: {
  onSubmit(){
    this.getBillPrice()
    .then(() => {
       return this.updateBill()
    })
    .then(() => {
       return this.postData()
    })
    .then(() => {
       // Any other code if needed
    })
    .catch((err) => {
       // Handle error scenario
    })

  },
  ...
}