【Vue】vue中使用Element UI的$confirm ，如何在其.then() 方法后执行一个异步方法。

Z时代
2024-01-10
分类：技术分享

如下所示，在点击删除的确认按钮的时候调后台的api进行删除操作。

confirmDelete(){
let self=this;
let idarr=self.mulId;
let params={
"profileId":idarr
};
return new Promise((resolve,reject)=>{
api.deleteProFile(params).then(res=>{
if(res.errMsg=="Success"){
console.log("删除成功！");
}
resolve(res.errMsg);
})
})
},
async deleteProfiles(){
let self=this;
let data=self.mulSection;
let flag=false;
let msg='当前勾选条件中包含已启用的条件, 是否继续?';
data.forEach(item=>{
self.mulId.push(item.id);
})
this.$confirm(msg, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
let msgRet=await self.confirmDelete();
if(msgRet=="Success"){
self.notify("删除成功！","success",1000);
}
else{
self.notify("删除失败！","warning",1000);
}
}).catch(() => {
console.log("cancel");
});},

但是每次点玩确定按钮都走的是catch 部分。然后也并没有执行.then()中的内容。目前想在这个.then() 方法中执行调后台api的删除方法这里该怎么写。

回答

.then(async () => { //  不要忘记加 async
            let msgRet= await self.confirmDelete();
            if(msgRet=="Success"){
                self.notify("删除成功！","success",1000);
            }
            else{
                self.notify("删除失败！","warning",1000);
            }        })

楼主，你好~
代码里存在些问题，试试下面：

async deleteProfiles(){
    let self=this;
    let data=self.mulSection;
    let flag=false;
    let msg='当前勾选条件中包含已启用的条件, 是否继续?';
    data.forEach(item=>{
        self.mulId.push(item.id);
    })
    this.$confirm(msg, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
        }).then(async () => { // 这里加个 async，可以查下相关文档 async...await
            let msgRet=await self.confirmDelete();
            if(msgRet=="Success"){
                self.notify("删除成功！","success",1000);
            }
            else{
                self.notify("删除失败！","warning",1000);
            }
        }).catch(() => {
            console.log("cancel");
    });},