VueJS, wie man auf Axios-Daten wartet, bevor man fortfährt

Question

Ich habe diesen Code, der die Daten in Variablen analysieren und dann eine Post-Anfrage senden soll.

Das Problem ist, dass ich eine Eigenschaft von der API benötige, aber nicht weiß, wie ich warten soll, bis sie zurückgegeben wird.

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({
            Gruppe: "App",
            Titel: this.$t("general.success"),
            Text: this.$t("general.action_has_been_processed"),
            Typ: "Info"
          });
        }).catch(error => {
            this.$notify({
                Gruppe: "App",
                Titel: this.$t("general.error"),
                Text: this.$t("general.error_occured"),
                Typ: "Fehler"
            });
          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 ??
      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;
    },
    asynchrone getFieldPosition() {
      const res = warte auf this.$axios.get('/data/webform/' + this.idWebform + '/itemsCount');
      this.model.position = res.data.data.count + 1;
      return res.data.data.count;
    },

In addFieldData rufe ich populateModel auf, das die Position von der API erhalten soll, rufe aber die Post-Anfrage auf, bevor getFieldPosition die Daten zurückgibt.

Ich möchte versuchen, zuerst auf getFieldPosition zu warten und dann eine Post-Anfrage zu senden.

Answer 1

首先，您应该拥有 async/await 的所有内容，而无需任何 .then。
不要混合它们两者。使用第一个。

然后，在您的 async populateModel 方法中，您应该有一个

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

因为 getFieldPosition 是异步的。