React Native调用API报错Unexpected token U in JSON at position 0如何解决

报错根因 #

你遇到的「Unexpected token U in JSON at position 0」报错，本质是调用response.json()时，接口返回的内容不是合法JSON格式，且内容首字母为U——结合你的代码可以定位到具体原因是接口返回了Unauthorized（未授权）字符串，触发解析失败。

导致未授权的核心问题：

• 请求头格式错误：Authorization字段中Bearer和token之间缺少空格，你当前写的是Bearer${token}，拼接后格式不符合OAuth2规范，后端无法识别token
• 请求时序错误：getData获取token和setToken更新state都是异步操作，第一次触发useEffect时token还是初始空字符串，会先发送一次携带空token的无效请求
• 额外影响点：启动时调用AsyncStorage.clear()会清空本地已存储的有效token，如果没有后续的登录流程重新获取token，也会一直触发未授权错误

修复方案 #

1. 修正请求头格式 #

将Authorization字段修改为标准格式，Bearer后加空格：

Authorization: `Bearer ${token}`

2. 调整请求时序，增加合法性判断 #

修改useEffect逻辑，仅当token有有效值时才发起请求，同时增加响应合法性校验，避免非JSON响应触发解析错误：

useEffect(() => {
  getData('token').then(res => {
    console.log('getting token data response at home: ', res);
    setToken(res);
  });

  // 仅token不为空时才发起请求
  if (token) {
    fetch('https://emaillead.aturtoko.id/api/v1/profile', {
      method: 'GET',
      headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json',
        Authorization: `Bearer ${token}`,
      },
    })
    .then(async response => {
      // 先校验响应状态，避免非2xx的错误响应直接转JSON
      if (!response.ok) {
        const errText = await response.text();
        throw new Error(`请求失败：状态码${response.status}，返回内容：${errText}`);
      }
      return response.json();
    })
    .then(json => {
      console.log('token auth: ' + token);
      setProfile({
        name: json.user.name,
        email: json.user.email,
        phone_number: json.user.phone_number,
      });
      console.log(json);
    })
    .catch(error => console.error(error));
  }
}, [token]);

3. 按需调整本地存储清空逻辑 #

如果你的应用不需要每次启动都强制重新登录，移除启动时的AsyncStorage.clear()调用即可；如果确实需要清空，要确保清空后会跳转登录页，重新获取有效token存入本地。

调试辅助 #

如果修改后仍有报错，可以在解析响应前先调用response.text()打印完整返回内容，快速定位响应异常原因。

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