React Native Expo项目中如何查看API请求响应及排查Promise异常

先解决「Possible Unhandled Promise Rejection」错误 #

这个错误是因为你发起的异步请求（Promise）没有处理拒绝情况，比如网络错误、API返回错误状态码等。解决方法：

• 用try/catch包裹所有异步请求逻辑
• 或者在Promise后追加.catch()捕获错误

查看API请求体和响应的方法 #

1. 代码内直接打印日志 #

这是最直接的方式，在请求前后打印关键信息：

• 发送请求前，打印要发送的请求体
• 请求完成后，打印响应状态码、响应内容

示例代码：

const sendPostRequest = async () => {
  const requestBody = {
    username: 'testUser',
    password: 'testPass'
  };

  // 打印待发送的请求体
  console.log('请求体:', requestBody);

  try {
    const response = await fetch('https://your-api-endpoint.com', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(requestBody),
    });

    // 打印响应状态码（比如200、400、500）
    console.log('响应状态:', response.status);
    
    // 解析并打印响应内容
    const responseData = await response.json();
    console.log('响应数据:', responseData);

    // 根据状态码处理业务逻辑
    if (response.ok) {
      // 请求成功的操作
    } else {
      console.error('API返回错误:', responseData);
    }
  } catch (error) {
    // 捕获网络错误、解析错误等所有异常
    console.error('请求失败:', error.message);
  }
};

你可以在Expo CLI的终端或者Expo DevTools的「Logs」标签页中查看这些日志。

2. 使用网络抓包工具 #

如果需要更全面地查看请求的所有细节（比如请求头、响应头、完整的请求/响应内容），可以用Charles Proxy或Fiddler：

• 安装抓包工具后，设置你的手机/模拟器的网络代理为电脑的IP地址和抓包工具的监听端口
• 给设备安装抓包工具的根证书（避免HTTPS请求无法捕获）
• 启动抓包工具后，所有设备的网络请求都会被捕获，你可以在工具中查看POST请求的请求体、响应详情

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