リクエストとユーザー入力を待つ: 患者の期待に関するガイド

Question

コンポーネントのロード時に非同期リクエストを行うとします。このコンポーネントには、ユーザーがこのボタンを押すと、元のリクエストの結果に応じて関数をトリガーできる送信ボタンもあります。非同期リクエストが完了するまでトリガーされた関数の実行を遅らせるにはどうすればよいですか?

これが意味がわからない場合は、例を挙げてみましょう。 MyComponent 非同期リクエスト getRandomColor() を mounted で作成します。 MyComponent のテンプレートには <button @click="handleClick"> があります。 handleClick いくつかの関数 saveColor() を呼び出します。非同期 getRandomColor() が完了する前に saveColor() が呼び出されないようにするにはどうすればよいですか?

現在 Vue.js を使用していますが、この質問はすべての JavaScript に当てはまると思います。

Answer 1

これを実現するには、ボタン要素に :disabled 属性を追加します。 :disabled の値は応答に基づきます。つまり、応答がある場合は有効にし、応答がない場合は無効にします。

動作デモ:

const app = Vue.createApp({
  el: '#app',
  データ（） {
    戻る {
        buttonText: '電話してください!',
      APIレスポンス: []、
      isDisabled: false
    }
  }、
  メソッド: {
    saveColor() {
        console.log('saveColor メソッド呼び出し');
    }
  }、
  マウントされた() {
    axios.get("https://jsonplaceholder.typicode.com/users").then(response => {
      this.apiResponse = response.data; // ここでは適切な応答が得られているため、ボタンが有効になります。
    }).catch((エラー) => {
        console.warn('API エラー');
        });
  }
})
app.mount('#app')

  {{ ボタンテキスト }}