首页vue中使用promise和await实现一个顺序调用的确认弹窗

vue中使用promise和await实现一个顺序调用的确认弹窗

时间: 2024-03-21 18:40:54 浏览: 130

好的，以下是一个使用 Promise 和 async/await 实现的顺序调用的确认弹窗： ```html <template> <div> <button @click="showDialog">Show Dialog</button> <div v-if="show"> <div>{{ message }}</div> <button @click="handleConfirm">Confirm</button> <button @click="handleCancel">Cancel</button> </div> </div> </template> <script> export default { data() { return { show: false, message: "", resolve: null, reject: null, }; }, methods: { showDialog(message) { this.show = true; this.message = message; return new Promise((resolve, reject) => { this.resolve = resolve; this.reject = reject; }); }, handleConfirm() { this.show = false; this.resolve(true); }, handleCancel() { this.show = false; this.reject(false); }, async confirmDialog(message) { const result = await this.showDialog(message); return result; }, }, }; </script> ``` 使用方法： ```javascript async function showConfirmDialog() { const result1 = await this.$refs.dialog.confirmDialog("Do you want to proceed?"); if (result1) { const result2 = await this.$refs.dialog.confirmDialog("Are you sure you want to continue?"); if (result2) { // do something } } } ``` 使用 `confirmDialog` 方法来显示确认弹窗，它会返回一个 Promise，可以使用 async/await 来实现顺序调用。

阅读全文