未处理的拒绝 (TypeError)：error.response 未定义答案

【问题标题】：Unhandled Rejection (TypeError): error.response is undefined未处理的拒绝 (TypeError)：error.response 未定义
【发布时间】：2023-04-06 01:49:01
【问题描述】：

提交表单时出现以下错误

Unhandled Rejection (TypeError): error.response is undefined

handleLogin/<
D:/project3.0/containerapp/src/login.js:74

71 |     props.history.push('/dashboard');

72 |   }).catch(error => {

73 |     setLoading(false);

> 74 |     if (error.response.status === 401) setError(error.response.data.message);

|^75 |     else setError("Something went wrong. Please try again later.");
76 |   });

这是我的代码：

import React, { useState} from 'react';
import axios from 'axios';
import { setUserSession } from './Utils/Common';

function Login(props) {
  const [loading, setLoading] = useState(false);
  const username = useFormInput('');
  const password = useFormInput('');
  const [error, setError] = useState(null);
 
  // handle button click of login form
  const handleLogin = () => {
    setError(null);
    setLoading(true);
    axios.post('http://localhost:4000/users/signin', { username: username.value, password: password.value }).then(response => {
      setLoading(false);
      setUserSession(response.data.token, response.data.user);
      props.history.push('/dashboard');
    }).catch(error => {
      setLoading(false);
      if (error.response.status === 401) setError(error.response.data.message);
      else setError("Something went wrong. Please try again later.");
    });
  }
 
  return (
    <div>
      Login<br /><br />
      <div>
        Username<br />
        <input type="text" {...username} autoComplete="new-password" />
      </div>
      <div style={{ marginTop: 10 }}>
        Password<br />
        <input type="password" {...password} autoComplete="new-password" />
      </div>
      {error && <><small style={{ color: 'red' }}>{error}</small><br /></>}<br />
      <input type="button" value={loading ? 'Loading...' : 'Login'} onClick={handleLogin} disabled={loading} /><br />
    </div>
  );
}
 
const useFormInput = initialValue => {
  const [value, setValue] = useState(initialValue);
 
  const handleChange = e => {
    setValue(e.target.value);
  }
  return {
    value,
    onChange: handleChange
  }
}
 
export default Login;

【问题讨论】：

看起来您的后端在触发错误时没有发送您期望的响应。你能在你的 catch 块中console.log('error object: ', {error}) 看看你得到了什么错误响应吗？
是的 localhost:4000 没有工作，我不知道如何启动它。为什么它会进入 catch 块。为什么它没有保存登录数据
一旦你得到一个非 200 状态码范围的响应，axios 会把它当作一个错误处理，所以你可以依靠 catch 块来提供一个好的错误信息，而不必检查状态响应代码。

标签： javascript reactjs axios

【解决方案1】：

显然 - error 对象不包含 response 字段。在使用axios 的上下文中 - 这基本上意味着请求没有正确执行（并且根本没有来自服务器的响应）

来自this 回复：

传统的方法是在catch() 块中捕获错误，如下所示：

axios.get('/api/xyz/abcd')
  .catch(function (error) {
    if (error.response) {
      // Request made and server responded
      console.log(error.response.data);
      console.log(error.response.status);
      console.log(error.response.headers);
    } else if (error.request) {
      // The request was made but no response was received
      console.log(error.request);
    } else {
      // Something happened in setting up the request that triggered an Error
      console.log('Error', error.message);
    }

  });

【讨论】：