uni.request fail后如何捕获错误信息并进行有效处理？

Question

在使用uni.request进行网络请求时，如果请求失败，如何捕获错误信息并有效处理是一个常见的技术问题。当uni.request的fail回调被触发时，通常是因为网络异常、服务器错误或跨域问题等。此时，fail回调会接收一个包含错误信息的对象作为参数，例如{errMsg: 'request:fail timeout'}。开发者需要正确解析该对象，提取关键信息（如errMsg），并向用户展示友好的提示，比如“网络连接超时，请稍后重试”。同时，可以结合全局错误处理机制，将错误信息记录到日志系统中，便于后续排查。此外，为提升用户体验，可在fail回调中设置重试逻辑，允许用户手动或自动重新发起请求。总之，合理捕获和处理uni.request的失败情况，不仅能提高应用的健壮性，还能增强用户的满意度。

Answer 1

1. 基础问题分析：uni.request 的 fail 回调触发场景

在使用 uni.request 进行网络请求时，fail 回调的触发通常与以下几种常见问题相关：

• 网络异常：例如设备断网、DNS 解析失败等。
• 服务器错误：如 500 Internal Server Error 或服务不可用。
• 跨域问题：当请求违反同源策略时，浏览器会阻止请求。

这些场景下，fail 回调会接收到一个包含错误信息的对象，例如：

{errMsg: 'request:fail timeout'}

开发者需要解析该对象并提取关键信息（如 errMsg），以便进行下一步处理。

2. 初步解决方案：提取错误信息并展示友好提示

在 fail 回调中，可以通过以下代码提取错误信息并向用户展示友好的提示：

uni.request({
    url: 'https://example.com/api',
    success(res) {
        console.log('请求成功', res);
    },
    fail(err) {
        const errMsg = err.errMsg || '未知错误';
        if (errMsg.includes('timeout')) {
            uni.showToast({ title: '网络连接超时，请稍后重试', icon: 'none' });
        } else {
            uni.showToast({ title: '请求失败，请检查网络或稍后再试', icon: 'none' });
        }
    }
});

这种处理方式能够直接提升用户体验，但尚不足以满足更复杂的业务需求。

3. 高级优化：结合全局错误处理机制

为了更好地管理错误信息，可以引入全局错误处理机制。以下是实现步骤：

1. 创建一个全局错误日志记录器。
2. 将所有网络请求的错误信息统一记录到日志系统中。

示例代码如下：

function logError(err) {
    console.error('捕获到错误:', err);
    // 可以扩展为将错误信息上传到远程服务器
}

uni.request({
    url: 'https://example.com/api',
    fail(err) {
        logError(err);
        const errMsg = err.errMsg || '未知错误';
        uni.showToast({ title: '请求失败，请检查网络或稍后再试', icon: 'none' });
    }
});

4. 用户体验增强：设置重试逻辑

为了进一步提升用户体验，可以在 fail 回调中加入重试逻辑。以下是手动和自动重试的实现方案：

类型	描述	实现方式
手动重试	用户点击按钮后重新发起请求	绑定按钮事件，调用相同的请求方法
自动重试	系统在一定时间后自动重新发起请求	使用 setTimeout 或 Promise.retry 方法

以下是自动重试的代码示例：

function retryRequest(url, options, maxRetries = 3) {
    let retries = 0;
    return new Promise((resolve, reject) => {
        function attempt() {
            uni.request({
                ...options,
                url,
                success(res) {
                    resolve(res);
                },
                fail(err) {
                    if (retries < maxRetries) {
                        retries++;
                        setTimeout(attempt, 2000); // 每次间隔 2 秒重试
                    } else {
                        reject(err);
                    }
                }
            });
        }
        attempt();
    });
}

5. 流程图：uni.request 错误处理完整流程

以下是通过 Mermaid 绘制的错误处理流程图：

sequenceDiagram
    participant Developer
    participant UniApp
    Developer->>UniApp: 发起 uni.request 请求
    UniApp-->>Developer: 成功回调 (success)
    alt 网络异常或服务器错误
        UniApp-->>Developer: 触发 fail 回调
        Developer->>Developer: 提取 errMsg 并展示提示
        Developer->>Developer: 记录错误日志
        Developer->>Developer: 执行重试逻辑
    end

合理捕获和处理 uni.request 的失败情况，不仅能提高应用的健壮性，还能增强用户的满意度。接下来，我们还可以...