React-Adonis项目登录功能如何将fetch请求替换为axios请求

你已经完成了axios的安装和导入，直接替换原有fetch逻辑即可，axios会自动完成JSON序列化、请求头设置、响应JSON解析的操作，无需手动处理这些步骤。

替换后的完整代码 #

import axios from 'axios'; 

const submitHandler = (event: React.FormEvent) => {
  event.preventDefault();
  const enteredEmail = emailInputRef.current!.value;
  const enteredPassword = passwordInputRef.current!.value;

  if (enteredPassword.length < 6) {
    toast.warn('密码长度不能少于6位');
    return;
  }
  const url = 'http://127.0.0.1:3333/login';
  // 替换fetch为axios.post
  axios.post(url, {
    email: enteredEmail,
    password: enteredPassword,
    returnSecureToken: true,
  })
  .then((res) => {
    // axios返回的接口数据直接存放在res.data字段中
    const data = res.data;
    console.log(data);
    if (data.token) {
      setTimeout(() => {
        dispatch(authActions.login(data.token));
      }, 1000);
    }
  })
  .catch((err) => {
    // 非2xx状态码的请求会直接进入catch，可通过err.response获取接口返回的错误信息
    console.log(err.response?.data || err.message);
  });
};

核心改动说明 #

• 直接使用axios.post()方法发送POST请求，第二个参数直接传入请求体对象即可，不需要手动调用JSON.stringify()序列化，axios会自动处理，同时也会默认添加Content-Type: application/json请求头，无需手动设置
• 响应不需要手动调用res.json()解析，接口返回的实际数据会自动解析后挂载到res.data字段，直接取用即可
• axios默认对2xx以外的响应状态码抛出错误，直接进入catch块，无需在then中单独判断res.ok；如果需要处理业务层面的错误状态，可从err.response.data中获取后端返回的错误提示

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