如何将Chargify的回调式token方法封装为Promise？

单纯用async函数包裹原调用无效，因为async仅能让函数返回Promise，但无法自动将回调式逻辑转为Promise驱动——你需要手动用Promise构造器封装chargify.token的调用，把成功/失败回调和Promise的resolve/reject绑定：

封装方法 #

function createChargifyToken(form) {
  return new Promise((resolve, reject) => {
    chargify.token(
      form,
      // 成功时resolve Promise
      (token) => resolve(token),
      // 失败时reject Promise
      (err) => reject(err)
    );
  });
}

使用方式 #

方式1：用.then()/.catch()链式调用 #

// 传入表单元素
createChargifyToken(document.querySelector('#payment-form'))
  .then(token => {
    // 在这里处理拿到的token，比如提交到后端
    console.log('获取到token:', token);
  })
  .catch(error => {
    // 处理错误，比如提示用户
    console.error('生成token失败:', error);
  });

方式2：用async/await #

async function processPayment() {
  try {
    const form = document.querySelector('#payment-form');
    const token = await createChargifyToken(form);
    // 处理token逻辑
    console.log('Token:', token);
  } catch (error) {
    // 捕获错误
    console.error('出错了:', error);
  }
}

// 调用函数
processPayment();

为什么单纯用async包裹没用？ #

async函数的作用是让函数返回Promise，并且可以在内部使用await等待其他Promise，但它无法自动捕获回调式API的执行结果。原chargify.token调用会立即执行并返回（无返回值或返回非Promise值），async函数会直接把这个返回值包装成resolved状态的Promise，根本不会等待后续的success/error回调触发，所以必须手动用Promise构造器来桥接回调逻辑。

内容的提问来源于stack exchange，提问作者Gino Pane