javascript - How to call functions successively on button @click [VUE JS] - Stack Overflow

admin 管理员组

文章数量: 1086019

Im calling 3 functions on @click, Im doing it like that:

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

And it is important for to call first the getBillPrice(), then updateBill() and then postData(). But this functions are running in the wrong order, first the updateBillPrice is running then postData() and then getBillPrice()

How can I fix it? Here are some of my functions. This is text to be able to post so much code, you can just skip this text: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea modo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

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.dataPrice;
        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________*/
    },

Im calling 3 functions on @click, Im doing it like that:

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

And it is important for to call first the getBillPrice(), then updateBill() and then postData(). But this functions are running in the wrong order, first the updateBillPrice is running then postData() and then getBillPrice()

How can I fix it? Here are some of my functions. This is text to be able to post so much code, you can just skip this text: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea modo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

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.dataPrice;
        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________*/
    },

• javascript
• vue.js
• promise

Share Improve this question Follow edited Feb 27, 2021 at 19:19 Ostap Filipenko asked Feb 27, 2021 at 18:50 Ostap FilipenkoOstap Filipenko 23955 silver badges2727 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

I think instead of putting each and every function on the click event, you should create a single function that in turn trigger these functions.

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

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

And if your functions are asynchronous then you can use async await with try catch

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

  },
  ...
}

Since it seems that async await is not supported in your project, you can try this. ( i don't have that much experience in then catch but it should work )

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

  },
  ...
}

本文标签： javascriptHow to call functions successively on button click VUE JSStack Overflow