$confirm then()中的异步请求

最新推荐文章于 2025-03-26 11:04:59 发布

月半子庆

最新推荐文章于 2025-03-26 11:04:59 发布

阅读量1.1w

点赞数 7

分类专栏：前端笔记

本文链接：https://blog.csdn.net/qq_39040192/article/details/94142398

版权

前端笔记专栏收录该内容

10 篇文章

订阅专栏

本文详细解析了在Vue框架中如何正确地在$confirm对话框确认后执行异步请求，避免了因错误使用await关键字导致的问题，并提供了正确的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

$confirm then中的异步请求

在$confirm中需要点击确定之后再执行某些操作，最开始我是直接写在methods的方法前面，但是直接报错Can not use keyword ‘await’ outside an async function（不能在异步函数外使用关键字’await’），所以判断await所在的区域不是异步函数

async handleDelete(index, row) {//删除
    this.$confirm('此操作将永久删除该传输记录, 是否继续?', '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning'
     }).then(() => {
         let del = await delTranAxios(row.id);
         if(del.data=="删除成功"){
             this.$message({
                 type: 'success',
                 message: '删除成功!'
             });
             this.getTransmission();
         }else{
             this.$message({
                 type: 'error',
                 message: '删除失败!'
             }); 
         }
     }).catch(() => {
         this.$message({
             type: 'info',
             message: '已取消删除'
         });          
     });
 },

正确写法，将async放到then()里面就好

handleDelete(index, row) {//删除
    this.$confirm('此操作将永久删除该传输记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(async() => {
        let del = await delTranAxios(row.id);
        if(del.data=="删除成功"){
            this.$message({
                type: 'success',
                message: '删除成功!'
            });
            this.getTransmission();
        }else{
            this.$message({
                type: 'error',
                message: '删除失败!'
            }); 
        }
    }).catch(() => {
        this.$message({
            type: 'info',
            message: '已取消删除'
        });          
    });
},