En attente des demandes et des commentaires des utilisateurs : un guide sur les attentes des patients

Question

Supposons que je fasse une requête asynchrone lors du chargement du composant. Le composant dispose également d'un bouton de soumission sur lequel l'utilisateur peut appuyer pour déclencher une fonction qui dépend du résultat de la demande d'origine. Comment puis-je retarder l'exécution d'une fonction déclenchée jusqu'à ce que la requête asynchrone soit terminée ?

Si cela n'a pas de sens, laissez-moi vous donner un exemple. MyComponent 在 mounted 上发出异步请求 getRandomColor()。 MyComponent 的模板有 <button @click="handleClick">。 handleClick 调用一些函数 saveColor()。如何确保在异步 getRandomColor() 完成之前不会调用 saveColor() ?

J'utilise actuellement Vue.js, mais je pense que cette question s'applique à tout le javascript.

Answer 1

Vous pouvez définir la valeur en fonction de la réponse en ajoutant :disabled 属性来实现此目的。 :disabled dans l'élément bouton. Autrement dit, s'il y a une réponse, activez-la, sinon désactivez-la.

Démo de travail :

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')

sssccc
sssccc


  {{ buttonText }}