Fetch Basic Sample Code 404

Fooeybar commented 8 months ago

MDN URL

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

What specific section or headline is this issue about?

Fetch Basic Sample Code

What information was incorrect, unhelpful, or incomplete?

The first sample given for fetch:

async function logMovies() {
  const response = await fetch("http://example.com/movies.json");
  const movies = await response.json();
  console.log(movies);
}

results in a json parse error, since the sample url returns a 404.

Recommend a sample URL which will return 200 status and sample json, such as 'https://jsonplaceholder.typicode.com/users':

async function logMovies() {
  const response = await fetch("https://jsonplaceholder.typicode.com/users");
  const users = await response.json();
  console.log(users);
}

What did you expect to see?

A successfully parsed JSON object printed to the console. This is the most basic example provided, from the source reference itself, and it should result in an error free response when copied & pasted.

Do you have any supporting links, references, or citations?

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

Do you have anything more you want to share?

No response

MDN metadata

Page report details

* Folder: `en-us/web/api/fetch_api/using_fetch` * MDN URL: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch * GitHub URL: https://github.com/mdn/content/blob/main/files/en-us/web/api/fetch_api/using_fetch/index.md * Last commit: https://github.com/mdn/content/commit/aae16b81e18d13dd006d418983558578563e9746 * Document last modified: 2023-08-18T00:00:48.000Z

bsmth commented 8 months ago

Thanks for flagging, alternatively, we could do:

// Define the function
async function logContributors() {
    const r = await fetch("https://developer.mozilla.org/en-US/docs/Glossary/TOFU/contributors.txt");
    const textData = await r.text();
    console.log(textData);
}

// Call the function
logContributors();

If we don't want to point too much traffic at jsonplaceholder.typicode.com. Note that the rest of the examples on the page point to example.com and so a lot of them will also fail, but it's possible this could be pointed out with a note that they're for illustration only.

wbamberg commented 3 months ago

This is an interesting suggestion.

But even if we use https://jsonplaceholder.typicode.com/, you won't be able to send requests from developer.mozilla.org, because of d.m.o.'s CSP settings. So if a reader opens the console while reading the page and pastes examples in, it won't work. Perhaps it is even more confusing in that case, since it looks like it should work, while example.org perhaps more obviously won't?

I'm on the fence here.

Thanks for flagging, alternatively, we could do:
const r = await fetch("https://developer.mozilla.org/en-US/docs/Glossary/TOFU/contributors.txt");

Problems with this:

it won't work from other sites, because of CORS (so if someone tries it from example.org, it won't work).
it would break if we delete the page, or change the way Yari represents contributors. That URL is not designed to be a test URL for fetch demos, so there's no expectation for it to be maintained as such.
it only works fo GET, and only for text.The nice thing about something like https://jsonplaceholder.typicode.com/ is that we could potentially replace lots of the examples in the fetch guide, for POST, json(), etc.

Josh-Cena commented 3 months ago

Is it possible for us to host a JSON data source ourselves, a la typicode style, but with the right CSP configured on d.m.o.? Alternatively make d.m.o. accept typicode.

wbamberg commented 3 months ago

We could, but not in content of course. Also I wonder whether this site is better than https://httpbin.org/, which is what I generally use for testing.

mdn / content