怎么在用户点击同意后执行同一个函数里接下来的api，点击拒绝后接下来的api都不执行直接提示框消失？

怎么在用户点击同意后执行同一个函数里接下来的api，点击拒绝后接下来的api都不执行直接提示框消失？
问题：现在我的代码执行下去，如果点击拒绝，接下来的api也会继续执行，导致api里的提示框也跟着出来，我明明在catch里加了return是想让函数从这里跳出，不执行后面的了，但是无效。
如果点击同意，那么接下来api也不执行了，我想要的效果是点击同意执行接下来的api。

函数(){
        this.$confirm(
          '您好，请问是否接入客服',
          '提示',
          {
            confirmButtonText: '同意',
            cancelButtonText: '拒绝',
            type: 'warning',
          },
        )
          .then(() => {
            //这里是想调用接下来异步的api
          })
          .catch(() => {
            // 提示框消失
            return;
          });
       //这里是api
       //api里也有弹出提示框
}


function myFunction() {
  this.$confirm(
    '您好，请问是否接入客服',
    '提示',
    {
      confirmButtonText: '同意',
      cancelButtonText: '拒绝',
      type: 'warning',
    }
  )
    .then(() => {
      // 这里是想调用接下来异步的api
      return yourAsyncApiCall(); // 替换yourAsyncApiCall()为实际的异步API调用
    })
    .then(() => {
      // 这里是异步API调用成功后的处理逻辑
    })
    .catch(() => {
      // 提示框消失或拒绝操作时的处理逻辑
      return Promise.reject(); // 显式地抛出一个reject的Promise，中断后续的异步操作
    });

  // 这里是其他的API调用，无论同意还是拒绝都会执行
  yourOtherApiCall(); // 替换yourOtherApiCall()为额外的API调用
}

如图 如有帮助给个采纳谢谢

img