Type Error: Failed to Fetch when using Fetch API

JavaScript
1

Hello all, I am having an issue using the fetch api and I’m not sure what is going on.

I am using JSON server to create a simple backend that looks like this:

{
    "posts": [
        {
            "id": 1,
            "title": "json-server",
            "author": "typicode"
        }
    ],
    "comments": [
        {
            "id": 1,
            "body": "some comment",
            "postId": 1
        }
    ],
    "profile": {
        "name": "typicode"
    }
}

When making a fetch request to the /posts endpoint, I am getting a Type Error along with a message that the Promise object is rejected and has failed to fetch.

This is what my Fetch Request looks like:

fetch("http://localhost:3000/posts")
.then(resp => resp.json())
.then(data => console.log(data));

I don’t think I have any syntax error in the code above, so can anyone help me figure out why my fetch requests are failing?

2

Hello there,

I believe the important bit of code would be the definition of the endpoint callback on the server. Ideally, please link to your full code.

3

What line in your client code are you getting the type error? Also should we be converting the response to json even though it’s already in a json format?

4

Your code should work just fine.

  1. How are you running the JS code that does the fetch?

  2. fetch will reject with a TypeError when a network error is encountered. Check you are running the json server correctly and that it is running on the expected port.

I would however suggest you always have a catch and technically you have to check the response as well.

https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch#checking_that_the_fetch_was_successful

5

The Type Error is triggered on the first line before the .then() method is called.

As for the question you asked about me converting it to JSON even though it is already JSON. I checked to see if that was causing the error by printing the result of the first .then() in the console.

Here is what I got back as a result

Promise {<pending>}
__proto__: Promise
[[PromiseState]]: "rejected"
[[PromiseResult]]: TypeError: Failed to fetch

So I think the error has to do with the endpoint of the request but I have no idea what could be wrong.

In my terminal, it lists the following endpoints for JSON Server:

 Resources
  http://localhost:3000/posts
  http://localhost:3000/comments
  http://localhost:3000/profile
6

I think I might be missing something, as I am not sure what you mean when you say “JSON Server”.

Are these definitely routes accepting GET requests? Who/What is serving these?

7

@lasjorg, I followed the directions in the documentation of json server so I’m not sure what could be causing the network error.

But there is one thing that does come to mind, that may be causing it. I am currently running JSON Server on Windows Subsystem for Linux and Ubuntu.

In the past I had some issues running certain bash commands because of an issue with my firewall. Do you think that could have anything to do with this?

8

This is the documentation for JSON Server

1 Like
9

It’s hard to say. But it does look like a network issue. Did you add the .catch and log out the error?

In any case, when I run your code on my system it works just fine. Maybe also try Postman and hit the endpoint just to see what you get.

10

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.