Uncaught (in promise) Error: Request failed with status code 404

Question

我在从 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

Answer 1

一般在 GET 方法中提供的 url/location 不正确时会出现此错误。所以再次检查url/location并更正它。

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

Answer 2

在我的例子中，这是一个小的语法错误（括号错位）。我的代码如下所示：

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

而不是这个：

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

如果您收到此错误消息，则表示您的错误处理代码不存在或无法访问，因此未处理 promise（因为您的 catch-part 未正确设置） .

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

Answer 3

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

如果你的 API 路由调用了 public 函数它的名字“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',
};

Uncaught (in promise) Error: Request failed with status code 404

Uncaught (in promise) Error: Request failed with status code 404

dispatch-async

reactjs

react-redux

axios