Warten auf Anfragen und Benutzereingaben: Ein Leitfaden zu Patientenerwartungen

Question

Angenommen, ich stelle eine asynchrone Anfrage, wenn die Komponente geladen wird. Die Komponente verfügt außerdem über eine Schaltfläche zum Senden, die der Benutzer drücken kann, um eine Funktion auszulösen, die vom Ergebnis der ursprünglichen Anfrage abhängt. Wie kann ich die Ausführung einer ausgelösten Funktion verzögern, bis die asynchrone Anforderung abgeschlossen ist?

Wenn das keinen Sinn ergibt, lass mich dir ein Beispiel geben. MyComponent 在 mounted 上发出异步请求 getRandomColor()。 MyComponent 的模板有 <button @click="handleClick">。 handleClick 调用一些函数 saveColor()。如何确保在异步 getRandomColor() 完成之前不会调用 saveColor()?

Ich verwende derzeit Vue.js, aber ich denke, diese Frage gilt für alles Javascript.

Answer 1

您可以通过在按钮元素中添加 :disabled 属性来实现此目的。 :disabled 的值将基于响应。即，如果有响应，则启用它，否则禁用。

工作演示：

const app = Vue.createApp({
  el: '#app',
  data() {
    return {
        buttonText: 'Call Me!',
      apiResponse: [],
      isDisabled: false
    }
  },
  methods: {
    saveColor() {
        console.log('saveColor method call');
    }
  },
  mounted() {
    axios.get("https://jsonplaceholder.typicode.com/users").then(response => {
      this.apiResponse = response.data; // Here we are getting proper response. hence, button is getting enabled.
    }).catch((error) => {
        console.warn('API error');
        });
  }
})
app.mount('#app')

  {{ buttonText }}