假設(shè)當(dāng)元件載入時(shí)我發(fā)出一個(gè)非同步請(qǐng)求。該元件還有一個(gè)提交按鈕，使用者可以按下該按鈕來觸發(fā)依賴原始請(qǐng)求結(jié)果的函數(shù)。如何延遲執(zhí)行觸發(fā)的函數(shù)，直到非同步請(qǐng)求完成？
如果這沒有意義，讓我舉個(gè)例子。 MyComponent 在 mounted 上發(fā)出非同步請(qǐng)求 getRandomColor()。 MyComponent 的模板有 <button @click="handleClick">。 handleClick 呼叫一些函數(shù) saveColor()。如何確保在非同步 getRandomColor() 完成之前不會(huì)呼叫 saveColor()？
我目前正在使用 Vue.js，但我認(rèn)為這個(gè)問題適用於所有 javascript。
1
0
0
您可以透過在按鈕元素中新增 :disabled 屬性來實(shí)現(xiàn)此目的。 :disabled 的值將基於回應(yīng)。即，如果有響應(yīng)，則啟用它，否則禁用。
工作演示：
#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')
