利用 Promise 化封装自定义确认弹窗

2024-02-16 16:19:53

简化小程序开发：基于 Promise 的自定义确认弹窗

在小程序开发中，自定义确认弹窗经常用于获取用户确认，例如在执行敏感操作或删除重要数据时。然而，传统的实现方式代码繁琐，可读性较差，且无法直接获取确认结果。本文将介绍一种基于 Promise 化封装的解决方案，有效简化代码实现逻辑，增强代码可读性。

传统实现方式的局限

传统实现自定义确认弹窗的方式通常如下：

wx.showModal({
  title: '提示',
  content: '确定要执行此操作吗？',
  success: function(res) {
    if (res.confirm) {
      // 确认操作
    } else {
      // 取消操作
    }
  }
});

这种方式虽然可以实现基本功能，但存在以下局限性：

代码繁杂，可读性较差。
需要手动处理 success 回调函数，容易导致代码混乱。
无法直接获取确认结果，需要在回调函数中进行处理。

Promise 化封装解决方案

为了解决上述局限性，我们可以对自定义确认弹窗进行 Promise 化封装，代码如下：

const showConfirm = (options) => {
  return new Promise((resolve, reject) => {
    wx.showModal({
      ...options,
      success: function(res) {
        if (res.confirm) {
          resolve(true);
        } else {
          resolve(false);
        }
      },
      fail: function(err) {
        reject(err);
      }
    });
  });
};

在这个封装函数中，我们使用了 Promise 对象，将弹窗操作的结果（确认或取消）封装为 Promise 的结果。这样，开发者就可以使用更优雅的方式来处理确认操作：

showConfirm({
  title: '提示',
  content: '确定要执行此操作吗？'
}).then((res) => {
  if (res) {
    // 确认操作
  } else {
    // 取消操作
  }
}).catch((err) => {
  // 弹窗失败处理
});