JS Fetch - cannot get data from BadRequest response [duplicate]

Question

I am using React + Redux on the client side and I have the backend in NET CORE. Client gets data from API using:

        return fetch(`api/login`, requestOptions)
        .then(response => {
            if(!response.ok) {
                return Promise.reject(response.json() as Promise<AuthError>);
            } else {
                return response.json() as Promise<ILoginResponse>
            }
        })

requstOptions are:

        const requestOptions = {
        method: 'POST',
        headers: {
            'Accept': 'application/json', 
            'Content-Type': 'application/json' },
        body: JSON.stringify({ username, password })
        };

When the password is wrong, the server returns

404 Bad request

and the body is:

{"errorCode":2,"description":"Invalid Password"}

I would like to read the body but with this code, it is not possible because this response.json() as Promise<AuthError> produces an empty object. Is there a way how to read the body of a bad request response?

“When the password is wrong, the server returns 404 Bad request” - yikes. Has whoever set this up gotten their appropriate beating over this yet …? :-) — 04FS
– 04FS, Commented Feb 26, 2019 at 13:20
@04FS sorry, I don't understand what you are saying, can you explain it a bit? — davez
– davez, Commented Feb 26, 2019 at 13:29
HTTP status codes have a defined meaning, and for 404, that’s Not Found. Answering any request with that because the provided credentials did not match, is rather wrong. 401 Unauthorized would be much more appropriate. (And an actual Bad Request would be 400 - but that is for when the client sends data the server can not understand at all; merely wrong credentials don’t justify that one either.) — 04FS
– 04FS, Commented Feb 26, 2019 at 13:33
You are rejecting your promise with a promise. You want to reject it with an AuthError. — Bergi
– Bergi, Commented Feb 26, 2019 at 14:25
@Bergi but when I put return Promise.reject(response.json() as AuthError); it says conversion of type 'Promise<any>' to type 'AuthError' may be a mistake... and couldn't be compiled. — davez
– davez, Commented Feb 26, 2019 at 14:38

Philip Alexander Hassialis · Accepted Answer · 2019-02-26 13:39:47Z

0

As per the Fetch Documentation:

"The Promise returned from fetch() won’t reject on HTTP error status even if the response is an HTTP 404 or 500. Instead, it will resolve normally (with ok status set to false), and it will only reject on network failure or if anything prevented the request from completing."

What you can also check is the Response object documentation. In there, you can check if the Response ok is set to false (so, in a then clause check the response.ok) and from that point on you can check the Response.text property. Check also the Response Documentation

answered Feb 26, 2019 at 13:39

Philip Alexander Hassialis

395 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Orkhan Huseynli · Accepted Answer · 2019-02-26 13:17:22Z

-1

Have you tried using catch and then inspecting error object?

...
.then(response => response.json())
.then(response => console.log('Success:', JSON.stringify(response)))
.catch(error => console.dir(error));

answered Feb 26, 2019 at 13:17

Orkhan Huseynli

1,08911 silver badges14 bronze badges

1 Comment

davez Over a year ago

I have tried it and the result is still an empty object.

Collectives™ on Stack Overflow

JS Fetch - cannot get data from BadRequest response [duplicate]

2 Answers 2

Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Linked

Related