CODEWITHSUNDEEP
javascriptpostfetch-api
Ricardo Sanches
Ricardo Sanches

Reputation: 131

Error: SyntaxError: Unexpected end of JSON input at fetch.then.response

I get this error every time I try to use the POST method in my API.

SyntaxError: Unexpected end of JSON input at fetch.then.response

When I use the GET method I get the data normally. This is the code:

const teste = () => {
fetch("myURL/test", {
    method: "POST",
    headers: {
        "Content-Type": "application/json"
    },
    body: JSON.stringify({
        id: 1,
        name: "Teste",
        amount: 1,
        value: 3
    })
})
.then(response => response.json()) //Here is the error
.then(data => {
    console.log(data);
})
.catch((err)=>console.log(err))}

Can someone help me?

EDIT:
I just add this line to see the log:

.then(response => console.log(response))

Here is what I got:

Response {
type: "cors",
url: "myURL/test",
redirected: false,
status: 201,
ok: true,
…}
body: (...)
bodyUsed: false
headers: Headers {}
ok: true
redirected: false
status: 201
statusText: ""
type: "cors"
: "myURL/test"
__proto__: Response

Upvotes: 13

Views: 37359

Answers (4)

mojmir.novak
mojmir.novak

Reputation: 3409

(for people coming later but dealing with this problem)

The problem is most probably server error or invalid URL but you can't see it because all examples on internet how to work with fetch are missing one important part - the server or network failure.

I think the correct way how to deal with fetch is test response if contains errors before conversion to json.

Check the part of the first then in example where it.ok is tested:

async function fetchData() {
    return await fetch('https://your-server.com/some-NOt-existing-url/')
        .then(it => {
            if (!it.ok) {
                throw `Server error: [${it.status}] [${it.statusText}] [${it.url}]`;
            }
            return it.json();
        })
        .then(receivedJson => {
            // your code with json here...
        })
        .catch(err => {
            console.debug("Error in fetch", err);
            setErrors(err)
        });
}

(note: it is just name convention borrowed from Kotlin, it makes JavaScript code shorter. It is alias for anything on left side of expression so in this case for response)

Upvotes: 1

Nino Filiu
Nino Filiu

Reputation: 18493

It means that the page fetched at myURL/test does not responds with JSON content, or with malformed JSON content. This is not an error in your script, which is fine, this is an error with your server, that is not serving JSON content at myURL/test.

Also, note that servers might not respond similarly to GET requests and POST request for the same URL! If you fetch valid JSON from a GET request but, as you described, failed to fetch valid JSON from a POST request, your server might be serving different content depending on the request type. Investigate that.

Debug tips

  • Replace then(resp => resp.json()) by then(resp => resp.text()).then(console.log) to see what the served content looks like
  • Use Postman to simulate API calls, and see what the served content looks like, with more details
  • Examine the response with the developer tools:
    1. In Chrome
    2. Open the console (F12)
    3. Go to the network tab
    4. Click on the file server by myURL/test
    5. Click on response: that will be the text content. It shoud be properly formatted JSON.

Upvotes: 18

Pablo Castro
Pablo Castro

Reputation: 144

Looks like the API you're calling, doesn't have a response body on this particular POST. Then when you call response.json() (converting response.body to json) it runs into error. Or maybe the response is body is not a valid json body.

If you wanna handle this error more fashion way you could go like this: 

tryGetJson = async (resp) => {
    return new Promise((resolve) => {
      if (resp) {
        resp.json().then(json => resolve(json)).catch(() => resolve(null))
      } else {
        resolve(null)
      }
    })
  }

https://github.com/github/fetch/issues/268#issuecomment-399497478

Upvotes: 0

karthick-nr
karthick-nr

Reputation: 1

Basically GET method does not send your body object to the server in which you get the response. Only the POST action will send your body object to the server.

I assume that the object you wish to send is the problem. Either the server which you are trying to connect does not expects the body object as string or you should make sure you have parsed the JSON properly before processing.

Upvotes: 0

Related Questions