async+axios与纯axios在React useEffect中的差异及推荐方案咨询

这两段代码在常规场景下执行结果一致，但写法存在细节差异，下面具体分析：

一、写法推荐 #

更推荐代码2的写法，核心原因是代码1属于冗余的混合写法：axios.get本身返回Promise，用.then/.catch已经能完整处理异步结果，额外套一层async函数并await，没有带来任何实际收益，反而增加了不必要的代码层级。

如果偏好async/await风格，正确的写法应该是搭配try/catch使用，完全替换掉.then/.catch，示例如下：

useEffect(()=>{
  async function fetchData(){
    try {
      const resp = await axios.get(path, config);
      console.log(resp);
    } catch (error) {
      console.log(error);
    }
  }
  fetchData();
},[])

这种纯async/await+try/catch的写法，和代码2的.then/.catch属于两种等价的异步处理风格，可根据团队编码规范选择，但代码1的混合写法完全没必要使用。

二、除写法新旧外的其他差异 #

• 内存开销差异：代码1多声明了一个fetchData异步函数实例（虽然这里依赖项是空数组，只会创建一次），相比代码2直接调用axios，多了一层函数的内存开销（虽影响极小，但属于客观存在的差异）。
• 错误捕获逻辑的冗余性：代码1中await等待的是.then执行后的Promise，而.catch已经提前捕获了请求的所有错误，导致await不会抛出任何错误，即使在外层加try/catch也不会触发catch分支——这进一步凸显了代码1写法的冗余。
• 取消请求的便利性：如果后续需要在组件卸载前取消未完成的请求，代码2可以直接保存axios的CancelToken或AbortController实例；代码1则需要在fetchData内部处理，多了一层封装，操作稍显繁琐。

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