Menunggu Permintaan dan Input Pengguna: Panduan untuk Jangkaan Pesakit

Question

Andaikan saya membuat permintaan tak segerak apabila komponen dimuatkan. Komponen ini juga mempunyai butang hantar yang boleh ditekan oleh pengguna untuk mencetuskan fungsi yang bergantung pada hasil permintaan asal. Bagaimanakah saya boleh menangguhkan pelaksanaan fungsi yang dicetuskan sehingga permintaan async selesai?

Jika ini tidak masuk akal, biar saya berikan satu contoh. MyComponent 在 mounted 上发出异步请求 getRandomColor()。 MyComponent 的模板有 <button @click="handleClick">。 handleClick 调用一些函数 saveColor()。如何确保在异步 getRandomColor() 完成之前不会调用 saveColor()?

Saya sedang menggunakan Vue.js, tetapi saya rasa soalan ini terpakai kepada semua javascript.

Answer 1

Anda boleh membuat nilai berdasarkan respons dengan menambah :disabled 属性来实现此目的。 :disabled dalam elemen butang. Iaitu, jika terdapat respons, dayakannya, jika tidak nyahdayakannya.

Tunjuk cara kerja:

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 }}