未捕获（承诺中）错误：请求失败，状态码为 404答案

【问题标题】：Uncaught (in promise) Error: Request failed with status code 404未捕获（承诺中）错误：请求失败，状态码为 404
【发布时间】：2018-01-03 02:36:06
【问题描述】：

我在从 API 获取一些数据时遇到错误。以下是我正在尝试GET 数据的action creator 的代码：

import { FETCH_USER } from './types';
import axios from 'axios';


export const fetchUser = () => async dispatch => {

        console.log('fetchUser');

        const res= await axios.get('/api/current_user');

        dispatch({ type: FETCH_USER, payload: res });

};

另外，当我在代码编辑器中调试时，控制台给我以下错误：

SyntaxError: Unexpected token import

【问题讨论】：

标签： reactjs react-redux axios dispatch-async

【解决方案1】：

通常当 GET 方法中提供的 url/位置不正确时会出现此错误。所以再次检查 url/location 并更正它。

所以很可能这里有一些错误：'/api/current_user'

【讨论】：

【解决方案2】：

在我的情况下，这是一个小的语法错误（我的括号放错了位置）。我的代码如下所示：

axiosget("/api-url").then(
  (response) => {
    doSomething();
  }), () => {
  doError();
  }
);

而不是这个：

axiosget("/api-url").then(
  (response) => {
    doSomething();
  }, () => {
  doError();
  });
);

如果您收到此错误消息，则表示您的错误处理代码不存在或无法访问，因此未处理承诺（因为您的捕获部分未正确设置）。

如果您收到此消息，请务必仔细检查您的语法！

【讨论】：

【解决方案3】：

如果您使用 laravel 作为 API，使用 vue/Nuxtjs 作为前端，使用 axios 向 API 发送数据...... 这种类型的错误可能会面临 laravel 验证错误使用 try{} catch(){} 块以不正确的方式发送或 axios 以不正确的方式使用 try() catch(){} 块接收错误。在这里，尝试使用 catch 块进行错误处理。

如果您的 API 路由将公共函数称为“register()”，那么控制器内部的函数必须如下所示...（我使用 laravel-8 作为 API）

public function register(Request $request) {
    try {
        $fields = $request->validate([
            'name' => 'required|string',
            'email' => 'required|string|email|unique:users',
            'password' => 'required|string|confirmed',
        ]);

        $user = User::create([
            'name' => $fields['name'],
            'email' => $fields['email'],
            'password' => bcrypt($fields['password'])
        ]);
        
        $token = $user->createToken('myapptoken')->plainTextToken;
        $response = [
            'user' => $user,
            'token' => $token,
        ];
        
        return response()->json($response, 200);
    } catch(ValidationException $e) {            
        return response()->json([
            'status' => 'error',
            'msg' => 'error',
            'errors' => $e->errors()
        ], 422);
    }
}

并且 Frontend Nuxt 或 vue 方法名称是“registerNewUser()”，因此，可以按照代码进行错误处理...

async registerNewUser() {
    try {
      let data = {
        name             : this.name.trim(),
        email            : this.email.trim(),
        password         : this.password.trim(),
        password_confirmation : this.password_confirmation.trim(),
      };
      let headers = {
        headers: {
            'Accept': 'application/json',
        }
      };
      await this.$axios
      .post("/api/register", data, headers)
      .then((response) => {
        console.log("response", response);
        if(response) {
          // console.log(response)
        } else {

        }
      });
    } catch(err) {
      // here we are receiving validation errors
      console.log("Err == ", err.response);
      console.log(err.response.data.errors);
    }
}

您在 axios 中接收响应，然后使用 err.response 在 catch 块中阻塞或接收错误

这里，

let data = {
   name             : this.name.trim(),
   email            : this.email.trim(),
   password         : this.password.trim(),
   password_confirmation : this.password_confirmation.trim(),
};

给定的代码用于 Nuxtjs 或 vuejs 的数据。如果不知道您可以使用以下数据或任何其他数据...

let data = {
   name             : 'Kallol',
   email            : 'kallolray94@gmail.com',
   password         : '123456',
   password_confirmation : '123456',
};

【讨论】：