React useEffect中fetch URI模板字面量传参：async/await语法报错

你提到链式调用写法的模板字符串拼接URL正常，但async/await版本在${currency}.json处报语法错误，但从你贴的代码来看，这段async/await代码的模板字符串语法本身完全正确，和链式调用版本没有区别，不会直接触发语法错误。大概率是以下几种场景导致的误判或隐形问题：

• 编辑器语法检测误报：部分IDE或代码编辑器对嵌套在async函数内的模板字符串偶尔会出现虚假报错提示，实际保存运行后代码能正常执行。
• currency变量异常：如果传入的currency是undefined、null或者非字符串类型，模板字符串会拼接出undefined.json这类无效路径，虽然这不是语法错误，但请求失败的表现可能被你误当成语法问题。
• 隐形字符干扰：输入模板字符串时不小心用了中文反引号（）或者中文的${}`符号，这类肉眼难辨的错误会导致JS解析失败。

快速排查步骤 #

1. 验证currency变量有效性：在useEffect里先打印变量值，确认传入的参数符合要求：

useEffect(() => {
  console.log('当前currency:', currency); // 检查变量是否为有效字符串
  const fetchCurrency = async () => {
    // ... 原有代码
  }
  fetchCurrency();
}, [currency])

2. 重新输入模板字符串符号：把模板字符串的反引号、${}部分手动重新输入一遍，确保都是英文符号，避免隐形的中文符号问题。
3. 运行代码验证：如果编辑器提示错误但代码能正常运行，那就是IDE的检测bug，重启编辑器或更新相关插件即可解决。

额外优化建议 #

可以给async函数加上空值判断，避免无效请求：

const fetchCurrency = async () => {
  if (!currency) return; // 空值时直接终止，避免无效请求
  try {
    const resp = await fetch(`https://cdn.jsdelivr.net/gh/fawazahmed0/currency-api@1/latest/currencies/${currency}.json`)
    if (!resp.ok) {
      setIsError(true)
      return
    }
    const json = await resp.json()
    setData(json[currency])
  } catch (error) {
    setIsError(true)
    console.error('请求错误详情:', error); // 打印错误便于排查
  }
}

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