使用optional chaining后报Unexpected token u in JSON at position 0错误如何解决

• 报错Unexpected token u in JSON at position 0的根因是JSON.parse()方法接收到了undefined作为入参，undefined的首字符为u，因此触发该解析错误。该报错和optional chaining语法本身无关。
• 问题出在TOKEN的取值逻辑：
  1. 当localStorage中不存在persist:root项，或者该项解析后的结果不存在user属性时，JSON.parse(localStorage.getItem('persist:root'))?.user会返回undefined
  2. 外层的JSON.parse()直接接收这个undefined执行解析，直接触发报错。optional chaining仅会让表达式返回undefined，并不会中断外层方法的执行。

方案1：添加取值合法性判断+异常捕获（推荐） #

逻辑更严谨，可覆盖localStorage存储内容非法的异常场景：

import axios from 'axios'

const BASE_URL = 'http://localhost:5000/api'
let TOKEN = null
// 先判断localStorage取值是否存在
const persistRoot = localStorage.getItem('persist:root')
if (persistRoot) {
  try {
    const rootData = JSON.parse(persistRoot)
    // 判断user属性存在后再执行第二层解析
    if (rootData?.user) {
      const userData = JSON.parse(rootData.user)
      TOKEN = userData?.currentUser?.accessToken || null
    }
  } catch (err) {
    // 解析失败直接兜底为null即可
    TOKEN = null
  }
}

export const publicRequest = axios.create({
  baseURL: BASE_URL,
})

export const userRequest = axios.create({
  baseURL: BASE_URL,
  headers: { token: `Bearer ${TOKEN}` },
})

方案2：添加兜底值快速修复 #

给内层optional chaining的结果加合法JSON格式的兜底值，避免JSON.parse()接收到非法入参：

const TOKEN = JSON.parse(JSON.parse(localStorage.getItem('persist:root'))?.user || 'null')
    ?.currentUser?.accessToken || null

这里用'null'作为兜底，JSON.parse('null')会返回null，后续optional chaining可正常执行，不会触发解析错误。

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