微信小程序 wx.request请求失败如何捕获？

Question

在使用微信小程序开发时，常遇到 `wx.request` 请求失败无法有效捕获的问题。由于网络请求具有异步特性，若未正确监听错误事件或未处理异常情况，将导致错误难以定位。那么，在微信小程序中，如何通过 `fail`、`complete` 回调以及 `try...catch` 捕获请求失败？同时，如何区分网络异常、接口错误与超时情况？这是开发者在调试和上线后排查问题的关键所在。掌握这些方法，有助于提升小程序的健壮性与用户体验。

Answer 1

一、引言：微信小程序中 `wx.request` 请求失败的挑战

在微信小程序开发过程中，`wx.request` 是开发者最常使用的网络请求 API。然而，由于其异步特性，若未正确监听错误事件或未处理异常情况，将导致错误难以定位。特别是在网络不稳定、接口返回异常或请求超时等场景下，错误捕获机制的缺失会严重影响小程序的健壮性与用户体验。

本文将从基础到深入，系统性地讲解如何通过 `fail`、`complete` 回调以及 `try...catch` 捕获 `wx.request` 请求失败，并进一步分析如何区分网络异常、接口错误与超时情况。

二、基础：理解 `wx.request` 的回调机制

`wx.request` 提供了多个回调函数用于处理请求过程中的不同状态：

• success：请求成功时触发，返回状态码为 2xx 时执行。
• fail：请求失败时触发，如网络中断、DNS 解析失败、SSL 握手失败等。
• complete：无论成功或失败都会执行，用于统一处理收尾逻辑。

示例代码如下：

wx.request({
  url: 'https://api.example.com/data',
  success(res) {
    console.log('请求成功:', res.data);
  },
  fail(err) {
    console.error('请求失败:', err);
  },
  complete() {
    console.log('请求结束');
  }
});

三、进阶：结合 `try...catch` 实现更细粒度的错误控制

由于 `wx.request` 是异步函数，`try...catch` 无法直接捕获其内部错误。但在使用 Promise 封装或 async/await 的情况下，可以结合 `try...catch` 来统一处理异常。

示例：使用 Promise 封装 `wx.request`：

function request(url) {
  return new Promise((resolve, reject) => {
    wx.request({
      url,
      success(res) {
        if (res.statusCode >= 200 && res.statusCode < 300) {
          resolve(res.data);
        } else {
          reject({ type: 'http_error', res });
        }
      },
      fail(err) {
        reject({ type: 'network_error', err });
      }
    });
  });
}

// 使用
async function fetchData() {
  try {
    const data = await request('https://api.example.com/data');
    console.log('数据:', data);
  } catch (e) {
    if (e.type === 'network_error') {
      console.error('网络异常:', e.err);
    } else if (e.type === 'http_error') {
      console.error('接口返回错误:', e.res);
    }
  }
}

四、深入：区分不同类型的错误（网络异常、接口错误、超时）

在实际开发中，错误类型通常包括以下三类：

错误类型	常见原因	处理方式
网络异常	无网络连接、DNS 失败、SSL 握手失败	使用 `fail` 回调捕获；提示用户检查网络
接口错误	服务器返回非 2xx 状态码	在 `success` 回调中判断 `res.statusCode`；统一错误码处理
超时	请求超过 `timeout` 设置时间	设置合理的 `timeout`；在 `fail` 中识别 `err.errMsg` 是否包含 timeout 关键字

示例：识别超时错误

wx.request({
  url: 'https://api.example.com/data',
  timeout: 5000,
  fail(err) {
    if (err.errMsg.includes('timeout')) {
      console.error('请求超时，请重试');
    } else {
      console.error('其他网络错误:', err);
    }
  }
});

五、实践：构建统一的错误处理中心

为了提升代码的可维护性和一致性，建议构建一个统一的错误处理模块，集中处理不同类型的错误，并根据错误类型进行相应的用户提示或日志上报。

graph TD A[发起请求] --> B{是否成功} B -->|是| C[处理返回数据] B -->|否| D[进入错误处理] D --> E{错误类型} E -->|网络异常| F[提示用户检查网络] E -->|接口错误| G[显示错误提示] E -->|超时| H[提示请求超时]

六、总结与建议

通过合理使用 `fail`、`complete` 回调以及结合 `try...catch`，开发者可以有效捕获并区分 `wx.request` 请求失败的不同原因。建议在项目中统一错误处理逻辑，提升程序的健壮性与用户体验。