等待請求和使用者輸入：患者預期指南

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

  {{ buttonText }}