如何将正常运行的Fetch登录请求代码改写为Axios实现版本

前置准备 #

首先安装Axios依赖：

# npm 安装
npm install axios
# yarn 安装
yarn add axios

转换后完整代码 #

Axios默认适配了你原配置中的CORS跨域、JSON请求头、响应自动解析等逻辑，代码会更简洁。同时修复了你原Fetch代码中遗漏的JSON.stringify(body)问题，这也是原代码长期运行可能出现异常的常见原因之一。
另外原代码中直接写<Navigate to="/dashboard" />不会触发路由跳转，如果你用的是React Router v6，需要先调用useNavigate钩子获取导航方法后执行跳转，下面示例已经做了兼容调整：

// 组件顶部先引入axios和路由方法
import axios from 'axios'
import { useNavigate } from 'react-router-dom'

// 函数组件内先获取navigate实例
const navigate = useNavigate()

login = () => {
  const { email, password } = this.state
  axios.post('http://localhost:5001/auth/sign_in', {
    email,
    password
  }, {
    headers: {
      'Accept': 'application/json'
    }
  }).then(res => {
    const responseJson = res.data
    if (responseJson.message === 'OK') {
      localStorage.setItem('token', responseJson.token)
      // 执行路由跳转
      navigate('/dashboard')
    }
  }).catch(err => {
    // 可自行添加异常捕获逻辑，比如请求失败提示
    console.error('登录请求失败:', err)
  })
}

如果你使用的是React类组件，无法直接使用useNavigate钩子，可以通过withRouter高阶组件包裹后从props中获取导航方法调用。

核心差异说明 #

• Axios POST请求会自动将传入的对象参数序列化为JSON字符串，无需手动处理，也不需要单独设置Content-Type: application/json请求头
• 响应结果自动解析为JSON格式，不需要手动调用response.json()方法
• 默认支持CORS跨域，不需要手动配置mode: 'cors'
• 内置请求/响应拦截器，后续如果需要统一添加token、统一处理错误会更方便

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