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

Question

I am getting above error while fetching some data from the API. Following is the code of the action creator where I am trying GET the data:

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 });

};

Also when I am debugging in the code editor, console is giving me below error:

SyntaxError: Unexpected token import

score 6 · Accepted Answer · answered Jul 05 '19 at 09:46

6

Generally this error comes when the url/location provided inside GET method is not correct. So check the url/location again and correct it.

So most probably there is some mistake here : '/api/current_user'

answered Jul 05 '19 at 09:46

neelesh bisht

640
8
13

score 2 · Answer 2 · answered Apr 25 '20 at 07:20

In my case it was a minor syntax error (a misplacement of my brackets). My code looked like this:

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

instead of this:

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

If you get this error message it means that your error handling-code isn't there or that it could not be reached, therefore the promise was unhandled (since the catch-part of your wasn't properly setup).

If you get this message always doublecheck your syntax!

score 0 · Answer 3 · answered May 06 '21 at 08:12

If your are using laravel for API and vue/Nuxtjs for frontend and axios for send data to API.... This type of errors can be faced for laravel validation error sending not in correct way using try{} catch(){} block or receiving errors by axios not in correct way to using try() catch(){} block. Here, try catch block using for error handling.

If your API routes called the public function its name "register()", so your function inside your controller have to like following...(I am using laravel-8 for 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);
    }
}

and Frontend Nuxt or vue methods name is "registerNewUser()" so, codes can be following for error handling...

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);
    }
}

You are receiving response inside axios then block or receive error inside catch block using err.response

Here,

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

Given codes is for data of Nuxtjs or vuejs. If not know that you can using like following data or any other data...

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

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

3 Answers3