优雅错误处理需显式分离成功与失败：用to函数返回[err, data]元组，支持按需决策；并发请求用.catch()或Promise.allSettled独立容错；结合错误分类（网络/服务/业务）精准反馈，并同步管理loading状态。
直接用 try/catch 虽然能工作，但容易让逻辑被错误处理淹没。真正优雅的方式，是把“成功”和“失败”显式分离，让调用方按需决策，而不是被动抛错或写一堆嵌套。
用 to 函数统一解构错误与结果
核心是把 Promise 封装成返回 [error, data] 的元组，类似 Go 语言风格。这个模式轻量、无依赖、语义清晰。
- 定义一个通用的
to函数（10 行以内）：
function to(promise) {
return promise.then(data => [null, data]).catch(err => [err, null]);
}
- 在任意 async 函数中直接解构使用：
async function getUser(id) {
const [err, user] = await to(fetch(`/api/user/${id}`).then(r => r.json()));
if (err) return { success: false, msg: '用户加载失败' };
return { success: true, data: user };
}
- 好处：每个 await 都有明确的错误出口，不打断后续流程，也不强制上层 try/catch
并发请求时独立容错
多个请求同时发起，但某个失败不应导致整体失败——比如拉广告和拉推荐位，一个挂了另一个仍可展示。
- 对每个 Promise 单独加
.catch()，提供默认值或空数据：
const [adErr, adData] = await to(fetch('/api/ad').catch(() => null));
const [recErr, recData] = await to(fetch('/api/recommend').catch(() => []));
- 或者用
Promise.allSettled批量等待并区分状态：
const results = await Promise.allSettled([
fetch('/api/user').then(r => r.json()),
fetch('/api/orders').then(r => r.json())
]);
const [userRes, orderRes] = results;
if (userRes.status === 'fulfilled') console.log(userRes.value);
if (orderRes.status === 'rejected') console.warn('订单加载失败:', orderRes.reason);
错误分类与用户反馈
不是所有错误都该弹“网络异常”。区分网络层、服务层、业务层错误，才能给用户准确提示。
- 在
to基础上扩展错误类型判断：
if (err.name === 'TypeError' && err.message.includes('fetch')) {
// 网络中断、跨域等
showToast('请检查网络连接');
} else if (err.status === 401) {
// 登录失效
redirectLogin();
} else if (err.status >= 500) {
// 服务端问题
showToast('系统忙，请稍后再试');
}
- 关键：从响应体或 error 对象中提取
status、code、message字段，而不是只看err.toString()
避免重复请求与 loading 状态管理
错误处理不能只关注“怎么报”，还要考虑“什么时候再试”和“界面是否卡住”。
- 封装带防抖/节流的请求函数，失败后自动重试（最多 2 次）：
async function safeFetch(url, options = {}, retries = 2) {
for (let i = 0; i const [err, res] = await to(fetch(url, options));
if (!err || i === retries) return [err, res];
await new Promise(r => setTimeout(r, 1000 * (i + 1))); // 指数退避
}
}
- 配合 React 或 ArkTS 的状态管理，在请求开始设
isLoading = true，结束无论成败都设为false，防止按钮多次点击或界面假死
