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

先解释一下顺序弹窗（顺序弹窗只是我自己取得名字-_-!，所以这里解释一下）

一般项目里有些操作需要用户确认操作，这种确认弹窗一般的实现方式就是把操作事件写成开启弹窗，然后弹窗里的确认按钮才是真正的用户操作事件，比如调用删除数据的接口。
顺序弹窗,就是在用户操作函数里直接调用弹窗然后弹窗会有一个返回值，告诉代码用户点击了取消还是确认或者其他，然后根据返回值判断函数是直接return还是继续操作，可以参考js的confirm函数的效果.
这个功能我知道的element组件库是实现了的，其他的组件库应该也都是这种的，我们的项目因为小程序，并且组件库都是自己写的所以没有

适用场景

当时想到这个功能是因为业务需求，需要在某个页面里的所有操作按钮都加上确认弹窗，一个页面总共是6,7种操作，要是用一般的弹窗方式，需要改的内容比较多而且后期更难维护，成了屎上加屎。所以这种顺序的弹窗就显得很优雅了。

抄作业的欢迎拿走

// 删除数据
orderPop(){  
    // 返回操作结果
    return new Promise((resolve) => {  // 这里只使用了resolve,是因为上边使用的await接受结果，没法直接获取到reject的结果
        // 开启弹窗
        this.$pop({
            message:"",  // 提示内容
            confirm:() => resolve(true) // 点击确认执行的事件
            cancle:() => resolve(false)  // 点击取消执行的事件
        })
    })
}

开始具体一点的实现

// 删除数据
async delete(){
	// 期望最终的修改方式
    let res = await this.orderPop()   // this.orderPop() 开启弹窗，用户点击按钮之后返回操作方式，两个功能
    if(!res){  // 返回false代表未确认
        return
    }
    // 以前的删除操作
}

开启弹窗

开启弹窗很简单，一般来说项目中肯定是有弹窗组件的，要是普通的模板组件，因为业务场景是多个操作都需要弹窗，不同的操作对应不同的提示内容，所以还是需要至少添加两个变量(提示文本，控制弹窗显示隐藏)，以及一块模板才能满足需求，不够优雅，所以使用了js的方式调用组件，这种使用js开启弹窗的文章就很多了一搜全是这里就不废话了，最后的实现是这个样子的

// 删除数据
orderPop(){  
   // 开启弹窗
   this.$pop({
   	 message:"",  // 提示内容
   	 confirm:null // 点击确认执行的事件
   	 cancle:null  // 点击取消执行的事件
   })
   // 返回操作结果
}

返回结果

这里返回用户操作的结果，也是这篇文章的核心内容，有一点点的考验对promise的理解了，直接上代码吧

// 删除数据
orderPop(){  
   // 开启弹窗
   this.$pop({
   	 message:"",  // 提示内容
   	 confirm:null // 点击确认执行的事件
   	 cancle:null  // 点击取消执行的事件
   })
   // 返回操作结果
   return new Promise((resolve) => { // 这里只使用了resolve,是因为上边使用的await接受结果，没法直接获取到reject的结果
        // 用户点击了确认
        resolve(true)
        // 用户点击了取消或者直接关闭了弹窗
        resolve(false)
    })
}

最后把两个操作合并一下

// 删除数据
orderPop(){  
    // 返回操作结果
    return new Promise((resolve) => {  // 这里只使用了resolve,是因为上边使用的await接受结果，没法直接获取到reject的结果
        // 开启弹窗
        this.$pop({
            message:"",  // 提示内容
            confirm:() => resolve(true) // 点击确认执行的事件
            cancle:() => resolve(false)  // 点击取消执行的事件
        })
    })
}

另一个小知识点

这个最终结果是修改过的,其实之前 confirm 和 cancle是这么传递的

 confirm:resolve(true) // 点击确认执行的事件
 cancle:resolve(false)  // 点击取消执行的事件

这样写虽然也可以实现效果，但是控制台会报错 undefined not a function,相信有大佬一下就看出来了，这里是对函数的理解没到位，这样写相当于点击了按钮会先执行对应的函数，然后将函数返回值也就是undefined传递给组件，组件如果没有判断函数是否合法就直接执行肯定就会报这个错了，所以其实这样写才会合理点

 confirm:resolve // 点击确认执行的事件
 cancle:resolve // 点击取消执行的事件

但是很显然这样写没法传递参数，所以最后才改成了上边的样子