等待请求和用户输入：患者预期指南

Question

假设当组件加载时我发出一个异步请求。该组件还有一个提交按钮，用户可以按下该按钮来触发依赖于原始请求结果的函数。如何延迟执行触发的函数，直到异步请求完成？

如果这没有意义，让我举个例子。 MyComponent 在 mounted 上发出异步请求 getRandomColor()。 MyComponent 的模板有 <button @click="handleClick">。 handleClick 调用一些函数 saveColor()。如何确保在异步 getRandomColor() 完成之前不会调用 saveColor()？

我目前正在使用 Vue.js，但我认为这个问题适用于所有 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')

sssccc
sssccc


  {{ buttonText }}