React框架Next.js中Axios与await fetch的区别及适用场景

一、核心区别 #

• 内置 API vs 第三方依赖
  fetch是浏览器原生API，无需额外安装，Next.js项目中可直接使用；Axios是第三方HTTP库，需要先执行npm install axios安装，再通过import axios from 'axios'引入才能使用。
• 响应处理逻辑差异
  fetch默认不会把4xx/5xx这类HTTP错误状态码判定为Promise拒绝，必须手动通过response.ok判断请求是否成功，再调用response.json()解析响应数据。比如你给出的删除请求示例，完整处理逻辑应该是：

  const response = await fetch(`/api/comments/${commentId}`, {
    method: 'DELETE'
  })
  // 手动校验请求状态
  if (!response.ok) {
    throw new Error('删除评论失败')
  }
  const data = await response.json()
  

  Axios会自动将非2xx状态码转为Promise拒绝，直接在catch块捕获错误，且自动解析JSON响应，无需额外调用解析方法，对应示例：

  import axios from 'axios'
  
  try {
    const response = await axios.delete(`/api/comments/${commentId}`)
    const data = response.data // 已自动解析好的响应数据
  } catch (error) {
    // 自动捕获4xx/5xx错误
    console.error('删除评论失败:', error)
  }
  

• 全局配置能力
  Axios支持设置全局默认配置，比如统一配置baseURL、请求头、超时时间，避免重复代码：

  axios.defaults.baseURL = '/api'
  axios.defaults.timeout = 5000
  axios.defaults.headers.common['Authorization'] = `Bearer ${localStorage.getItem('token')}`
  

  fetch没有全局默认配置，每次请求都要重复声明相同的配置项。
• 请求拦截与响应拦截
  Axios内置请求、响应拦截器，能统一处理请求前的参数加工、响应后的错误统一提示等场景，比如：

  // 请求拦截器：给所有请求自动携带token
  axios.interceptors.request.use(config => {
    const token = localStorage.getItem('token')
    if (token) config.headers.Authorization = `Bearer ${token}`
    return config
  })
  

  fetch没有内置拦截器，要实现类似逻辑需要自己封装请求函数。
• 取消请求的便捷性
  Axios支持通过AbortController（v1.x版本）或CancelToken（旧版本）快速取消请求；fetch也支持AbortController，但配置和调用流程相对繁琐。

二、Axios 的适用场景 #

• 需要统一管理请求配置：项目中所有请求都需要携带特定请求头、使用统一baseURL时，Axios的全局配置能大幅减少重复代码。
• 简化错误处理：不想在每个请求里都手动判断response.ok，希望自动捕获HTTP错误状态码时，Axios的自动错误处理更省心。
• 依赖拦截器实现通用逻辑：比如请求前加token、响应后统一处理后端返回的错误码、统一格式化响应数据等场景，Axios的拦截器能高效实现。
• 频繁需要取消请求：比如用户快速切换页面、发起新请求时需要取消未完成的旧请求，Axios的取消机制更易用。
• 跨项目复用请求逻辑：如果同时维护多个前端项目（比如React、Vue），Axios的API统一，复用性更强。

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