JavaScript异步调用错误捕获及accept.js异步请求问题咨询

我来分两部分帮你解决这两个问题：

异步代码的错误捕获和同步代码略有不同，主要分以下几种场景：

• 回调函数模式：
  传统的异步API大多用回调传递结果，通常会把错误作为回调的第一个参数（类似Node.js的约定）。你只需要在回调里先判断错误是否存在：

  // 示例：读取文件的异步调用
  fs.readFile('/path/to/file', (err, content) => {
    if (err) {
      console.error('读取文件失败:', err);
      return; // 后续逻辑不再执行
    }
    // 处理文件内容
    console.log(content);
  });
  

  如果是其他回调风格（比如错误在第二个参数），记得对应检查错误参数。

• Promise模式：
  用Promise封装的异步操作，可以通过.catch()方法捕获整个Promise链中的错误：

  fetch('/api/get-data')
    .then(res => {
      // 先判断HTTP响应是否正常，否则主动抛出错误
      if (!res.ok) throw new Error(`请求失败：${res.status}`);
      return res.json();
    })
    .then(data => console.log('获取到数据:', data))
    .catch(err => console.error('请求出错:', err));
  

  不管是Promise内部的错误，还是.then()里抛出的错误，都会被最后的.catch()捕获。

• async/await模式：
  用try/catch包裹异步操作，写法和同步代码的错误处理几乎一致，可读性更强：

  async function fetchData() {
    try {
      const res = await fetch('/api/get-data');
      if (!res.ok) throw new Error(`请求失败：${res.status}`);
      const data = await res.json();
      console.log('获取到数据:', data);
    } catch (err) {
      console.error('请求出错:', err);
    }
  }
  fetchData();
  

  try块里所有的await异步操作出错，都会直接进入catch块处理。

Accept.js的sendPaymentDataToAnet是异步提交支付数据的核心函数，它的错误捕获要结合它的调用方式来处理：

• 使用官方推荐的回调方式：
  官方的调用方式会传入包含success和error的配置对象，你可以直接在error回调里处理异步发送时的错误：

  function sendPaymentDataToAnet() {
    // 1. 先打包支付数据（比如从表单获取信用卡信息）
    const paymentData = {
      opaqueData: {
        dataDescriptor: 'COMMON.ACCEPT.INAPP.PAYMENT',
        dataValue: /* 生成的加密值 */
      },
      // 其他必要参数
    };
  
    // 2. 调用Accept.dispatchData发送数据
    Accept.dispatchData(paymentData, {
      success: function(response) {
        // 处理成功响应，比如提交到你的后端
        console.log('支付数据发送成功:', response);
      },
      error: function(errorObj) {
        // 这里捕获异步发送的错误
        console.error('支付数据发送失败:', errorObj);
        // 把错误信息展示给用户
        document.getElementById('payment-error').textContent = errorObj.errorText;
      }
    });
  }
  

  这里的errorObj包含errorCode和errorText等关键信息，可以根据这些信息给用户更精准的提示（比如“信用卡过期”“无效卡号”）。

• 转换成Promise风格（适配async/await）：
  如果你习惯用async/await，可以把这个函数包装成Promise，这样就能用try/catch统一处理错误：

  // 包装成Promise版本的函数
  function sendPaymentDataToAnetAsync() {
    return new Promise((resolve, reject) => {
      const paymentData = {
        // 你的支付数据
      };
  
      Accept.dispatchData(paymentData, {
        success: resolve,
        error: reject
      });
    });
  }
  
  // 用async/await调用并捕获错误
  async function handlePaymentSubmit(e) {
    e.preventDefault(); // 阻止表单默认提交
  
    try {
      const response = await sendPaymentDataToAnetAsync();
      // 处理成功逻辑，比如提交到后端
      console.log('成功:', response);
    } catch (err) {
      // 捕获错误
      console.error('出错:', err);
      document.getElementById('payment-error').textContent = err.errorText;
    }
  }
  
  // 给表单绑定提交事件
  document.getElementById('payment-form').addEventListener('submit', handlePaymentSubmit);
  

• 额外提醒：
  在调用异步函数之前，最好先做同步的表单验证（比如检查信用卡号格式、有效期是否合法），避免无效的异步请求，提升用户体验。

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