React Native电商应用出现Possible Unhandled Promise Rejection错误及可选链语法异常的排查求助

问题拆解 #

你碰到的两个核心问题：

• 未处理的Promise拒绝错误：当axios请求遇到网络故障、超时，或者服务器根本没返回响应时，err.response会是undefined，直接访问err.response.data就会触发类型错误。这个问题只在注册时出现，说明注册流程的请求大概率碰到了这类无响应的异常场景。
• Unexpected Token语法错误：在对象字面量里直接使用空值合并运算符??的写法不符合ECMAScript规范，导致解析失败。

分步解决方案 #

1. 修复axios错误处理的err.response未定义问题 #

axios的错误分多种场景，不能默认认为err.response一定存在：

• err.response：服务器返回了非2xx的响应
• err.request：请求发出去了但没收到响应（网络/超时）
• err.message：请求配置错误或其他通用错误

你可以在每个catch块里先统一处理错误信息，再传给returnErrors：

// 以addProduct的catch块为例，其他接口照此修改
.catch((err) => {
  // 兜底处理错误信息和状态码
  const errorMsg = err.response?.data ?? err.message ?? '请求失败，请稍后重试';
  const errorStatus = err.response?.status ?? 500;
  dispatch(returnErrors(errorMsg, errorStatus, 'PRODUCT_POST_FAIL'));
});

这样不管是有响应的业务错误，还是无响应的网络异常，都能拿到合法的错误参数，不会触发undefined类型错误。

2. 修复returnErrors函数的语法错误 #

对象字面量中不能直接使用??运算符，你需要先处理好默认值再赋值给payload：

import {GET_ERRORS, CLEAR_ERRORS} from './types';

// RETURN ERRORS
export const returnErrors = (
  msg: string | undefined,
  status: string | number | undefined,
  id: string | null,
) => {
  // 先统一处理默认值
  const finalMsg = msg ?? "请求失败，请稍后重试";
  const finalStatus = status ?? 500;
  return {
    type: GET_ERRORS,
    payload: {msg: finalMsg, status: finalStatus, id},
  };
};

// CLEAR ERRORS
export const clearErrors = () => {
  return {
    type: CLEAR_ERRORS,
  };
};

更简洁的方式是直接在函数参数里设置默认值：

export const returnErrors = (
  msg: string | undefined = "请求失败，请稍后重试",
  status: string | number | undefined = 500,
  id: string | null = null,
) => {
  return {
    type: GET_ERRORS,
    payload: {msg, status, id},
  };
};

这样调用时即使传入undefined，也会自动使用默认值，同时彻底避免语法错误。

3. 可选优化：全局统一axios错误处理 #

为了避免在每个接口里重复写错误处理逻辑，你可以给axios添加全局响应拦截器：

// 在axios初始化的文件中添加
axios.interceptors.response.use(
  response => response,
  error => {
    // 统一处理所有响应错误
    const errorMsg = error.response?.data ?? error.message ?? '请求失败，请稍后重试';
    const errorStatus = error.response?.status ?? 500;
    // 把处理好的错误抛给业务代码的catch块
    return Promise.reject({msg: errorMsg, status: errorStatus});
  }
);

之后业务代码的catch块就能直接拿到处理好的错误对象，不用再重复解析err.response。

为什么只在注册时触发？ #

这个问题大概率是注册请求碰到了网络问题（比如测试服务器未启动、网络超时、跨域限制），或者注册接口的服务器逻辑异常，没有返回合法响应，导致err.response为undefined。你可以在注册相关的请求catch块里先打印完整错误信息排查：

.catch((err) => {
  console.log('注册错误详情:', err);
  // 后续错误处理逻辑
});

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