VueJS 如何在繼續之前等待 axios 數據
P粉520204081
2023-08-26 10:34:00
<p>我有這段程式碼，它應該將資料解析為變量，然後發送發布請求。 </p>
<p>問題是，我需要 API 中的屬性，但我不知道如何才能等待它回傳。 </p>
<pre class="brush:php;toolbar:false;">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;
},</pre>
<p>在 addFieldData 中，我呼叫 populateModel，它應該從 API 取得位置，但在 getFieldPosition 返回資料之前呼叫 post 請求。 </p>
<p>我想嘗試先等待 getFieldPosition，然後發送 post 請求。 </p>
首先，您應該擁有
async/await的所有內容，而無需任何.then。不要混合它們兩者。使用第一個。
然後，在您的
async populateModel方法中，您應該有一個因為
getFieldPosition是異步的。