Replacing callback examples with promise based examples

[Patrick-ring-motive]

I was just reading through the fetch api docs and was kind of surprised to see all the examples using callbacks. I checked other pages and there are many like it. Is there a reason for this? Would anyone object if I rewrote these using promises?

const myImage = document.querySelector("img");

const myRequest = new Request("flowers.jpg");

window
  .fetch(myRequest)
  .then((response) => {
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }

    return response.blob();
  })
  .then((response) => {
    myImage.src = URL.createObjectURL(responseBlob);
  });

Change to

const myImage = document.querySelector("img");
const myRequest = new Request("flowers.jpg");
const response = await fetch(myRequest);
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }
const responseBlob = await response.blob();
myImage.src = URL.createObjectURL(response);

I’ll be making these changes here for my own reference https://developer.typescripts.org/en-US/docs/Web/API/Window/fetch

[wbamberg]

Just to be clear, the examples using then are also promise-based examples. What they're not, are async/await based examples.

But, I think it's a good idea to use async/await instead of then, unless there's a good reason to prefer then in some case (e.g. wanting to allow async calls to run in parallel). Recently I rewrote the Fetch guide (https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch) and rewrote all the examples to use async/await.

I think there's a suggestion that you might want to keep the code in an async function, so people don't try running the example outside one and be surprised when it doesn't work. In https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch I did this for more complete examples but not for little snippets.

[Patrick-ring-motive]

Yes this is what I mean. I tend to say "promises vs callbacks" but indeed the callback way still uses promises just less elegantly.

[Patrick-ring-motive]

I really like https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch great work!

[Josh-Cena]

Please also bear https://developer.mozilla.org/en-US/docs/MDN/Writing_guidelines/Writing_style_guide/Code_style_guide/JavaScript#asynchronous_methods in mind:

Unfortunately, you can't use await at the top level unless you are in an ECMAScript module. CommonJS modules used by Node.js are not ES modules. If your example is intended to be used everywhere, avoid top-level await.

[Patrick-ring-motive]

I thought that might be part of the reason. Still I'm seeing many new developers learning to use .then and I have to essentially untrain them and use async/await. I think @wbamberg has the right idea with wrapping the snippets in an async function so there is less confusion.

async function fetchExample(){
  const myImage = document.querySelector("img");
  const myRequest = new Request("flowers.jpg");
  const response = await fetch(myRequest);
      if (!response.ok) {
        throw new Error(`HTTP error! Status: ${response.status}`);
      }
  const responseBlob = await response.blob();
  myImage.src = URL.createObjectURL(response);
}

fetchExample();