如何实现在一个方法执行过程中需要等待组件或另一个方法返回数据之后继续执行

背景

开发中，在使用antd或element弹窗组件时，经常遇到需要弹窗确认之后，才能继续走当前方法需求；在经过大哥指点一二实现该需求后决定记录一下，话不多说直接上代码

在方法执行中需要等待另一个方法返回数据

const createdPromise = ()=>{
  const deferred = {}
    deferred.promise = new Promise((resolve, reject) => {
      Object.assign(deferred, { resolve, reject });
    });
  return Object.freeze(deferred);
}
const flowPromise = createdPromise()
const waitingFn = () => {
  console.log('需要等待的方法')
  return flowPromise.promise
}
const flowFn = async ()=>{
  console.log('这是一个需要阻断的方法')
  console.log('流程1')
  await waitingFn()
  console.log('流程2')
  console.log('流程3')
}
flowFn()
// 两秒后继续流程
setTimeout(() =>{
  flowPromise.resolve()
},2000)

等待组件响应之后继续执行方法

<template>
  <div>
    <my-component @success="success" @error="error"></my-component>
  </div>
</template>
<script>
export default {
  data(){
    return {
      flowPromise:null
    }
  },
  // components
  methods: {
    createdPromise() {
      const deferred = {};
      deferred.promise = new Promise((resolve, reject) => {
        Object.assign(deferred, { resolve, reject });
      });
      return Object.freeze(deferred);
    },
    waitingFn() {
      this.flowPromise = this.createdPromise()
      console.log("需要等待的方法");
      return this.flowPromise.promise;
    },
    async flowFn() {
      console.log("这是一个需要阻断的方法");
      console.log("流程1");
      await waitingFn();
      // 组件返回结果之后继续执行
      console.log("流程2");
      console.log("流程3");
    },
    //组件返回成功之后
    success(){
      // 返回promise结果
      this.flowPromise.resolve()
    },
    //组件返回失败
    error(){
      // 返回promise结果
      this.flowPromise.reject()
    }
  },
};
</script>