Ensuring ordering on conditional use of promises: Example is fundamentally flawed

[BrianJDrake]

MDN URL

https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API/Microtask_guide

What specific section or headline is this issue about?

Ensuring ordering on conditional use of promises

What information was incorrect, unhelpful, or incomplete?

That section contains this example:

customElement.prototype.getData = (url) => {
  if (this.cache[url]) {
    this.data = this.cache[url];
    this.dispatchEvent(new Event("load"));
  } else {
    fetch(url)
      .then((result) => result.arrayBuffer())
      .then((data) => {
        this.cache[url] = data;
        this.data = data;
        this.dispatchEvent(new Event("load"));
      });
  }
};

This example seems to be fundamentally flawed for two reasons:

1. The else clause is asynchronous, but the getData() method has a signature implying it is synchronous.
2. It uses this in an arrow function.

But item 1 above is the real problem. The section continues with another example:

element.addEventListener("load", () => console.log("Loaded data"));
console.log("Fetching data…");
element.getData();
console.log("Data fetched");

The section points out that this code has inconsistent behavior, since the getData() method's if clause, unlike the else clause, is synchronous. But, again, the problem is that getData() is treated as synchronous when it is actually asynchronous!

The section then points out a supposed fix: instead of having just one clause of getData() contradict its signature by being asynchronous, make both clauses contradict its signature by being asynchronous! This makes no sense; all it does is make the code even harder to reason about, and it does nothing to explain how microtasks have a legitimate use.

What did you expect to see?

I expected to see an explanation of:

1. Why it is necessary to manually ensure correct ordering on conditional use of promises.
2. In particular, why it might be necessary to explicitly introduce asynchronicity into an execution path that would ordinarily be entirely synchronous.
3. Why microtasks are the right way to do the things mentioned above, and therefore why microtasks have legitimate uses.

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

No response

Do you have anything more you want to share?

No response

MDN metadata

Page report details

• Folder: en-us/web/api/html_dom_api/microtask_guide
• MDN URL: https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API/Microtask_guide
• GitHub URL: https://github.com/mdn/content/blob/main/files/en-us/web/api/html_dom_api/microtask_guide/index.md
• Last commit: ac96ce0
• Document last modified: 2024-04-06T01:17:53.000Z