如何显示来自前端api的.catch中的错误

时间:2017-07-18 04:31:38

标签: laravel reactjs axios

我正在使用 laravel 构建一个项目,这很简单api我使用护照建立了frontend我正在使用反应一切工作正常除了我无法捕获.catch函数中的错误消息我可以在浏览器的网络选项卡中看到错误,但我无法弄清楚如何显示它们。

这是我的UserController

class UserController extends Controller
{
    public function create(Request $request)
    {
        $data = $request->only('name', 'email', 'password');
        $validator = Validator::make($data, [
            'name' => 'required',
            'email' => 'required|email|unique:users',
            'password' => 'required|min:6'
        ]);

        if ($validator->fails()) {
            return response()->json(['errors'=>$validator->errors()], 422);
        }

        $user = User::create([
            'name' => $data['name'],
            'email' => $data['email'],
            'password' => bcrypt($data['password'])
        ]);
   }
}

这就是我如何使用axios消费api:

export function signupUser({ name, email, password }) {
    return function(dispatch) {
        axios.post(`${ROOT_URL}/api/signup`, {name, email, password})
            .then(response => {

            dispatch({ type: AUTH_USER });

            localStorage.setItem('token', response.data.access_token);

            browserHistory.push('/feature');
        })
        .catch((error) =>  {
            // console.log(error);
        });
    }
}

这是控制台日志

enter image description here

以下是我浏览器网络标签中的响应

enter image description here

  • 如果您有任何疑问,请告诉我。
  • 任何帮助都将被提及

2 个答案:

答案 0 :(得分:1)

更改以下代码行。

.catch((error) =>  {
            console.log(error.response);
        });

答案 1 :(得分:1)

.catch(function (error) {
        if (error.response) {
            // The request was made, but the server responded with a status code
            // that falls out of the range of 2xx
            console.log(error.response.data);
            console.log(error.response.status);
            console.log(error.response.headers);
        } else {
            // Something happened in setting up the request that triggered an 
            console.log('Error', error.message);
        }
      return error;
    });

请检查以下代码

https://github.com/johibkhan2/react-redux-singlePageApp/blob/master/app/api/phone-api.js