VueJS how to wait for axios data before continuing

Question

I have this code which is supposed to parse the data into variables and then send a post request.

The problem is, I need a property from the API but I don't know how to wait for it to return.

addFieldData(data, generatorData) {
      this.populateModel(data);

      console.log(this.model);

      this.$axios.post('data/webform/fields', this.model)
        .then(res => {
          console.log(res);

          this.$notify({
            group: "app",
            title: this.$t("general.success"),
            text: this.$t("general.action_has_been_processed"),
            type: "info"
          });
        }).catch(error => {
            this.$notify({
                group: "app",
                title: this.$t("general.error"),
                text: this.$t("general.error_occured"),
                type: "error"
            });
          console.log(error);
      });
    },
    populateModel(data) {
      this.model.label = data.label ?? {};
      this.model.hint = data.placeholder ?? {};
      this.model.attributes = data.attributes ?? {};
      this.model.maxlength = data.maxlength ?? 0;
      this.model.position = this.getFieldPosition();
      this.model.required = data.required ?? true;
      this.model.visible = data.visible ?? true;
      this.model.disabled = data.disabled ?? false;
      this.model.style_classes = data.style_classes ?? "";
      this.model.model = data.model ?? "";
      this.model.default = data.default ?? "";
      this.model.input_type = data.input_type ?? "";
      this.model.hint = data.hint ?? "";
      this.model.help = data.help ?? "";
      this.model.type = data.type;
    },
    async getFieldPosition() {
      const res = await this.$axios.get('/data/webform/' this.idWebform '/itemsCount');
      this.model.position = res.data.data.count 1;
      return res.data.data.count;
    },

In addFieldData, I call populateModel, which should get the position from the API, but call the post request before getFieldPosition returns the data.

I want to try waiting for getFieldPosition first and then send a post request.

Answer 1

First, you should have everything async/await without any .then.
Don't mix the two. Use the first one.

Then, in your async populateModel method you should have a

this.model.position = await this.getFieldPosition()

Because getFieldPosition is asynchronous.