By CI_Guy


2019-05-15 16:06:32 8 Comments

So I'm trying to wrap my head about promises/await/async. I can't understand why when go() is executed the alert with "finished" go right after the console.log(coffee). Why does it only wait for getCoffee() and the other axios calls are ran after the "finished" alert when all functions are using await/promises?

function getCoffee() {
  return new Promise(resolve => {
    setTimeout(() => resolve("☕"), 2000); // it takes 2 seconds to make coffee
  });
}
async function go() {
  try {
    alert("ok");
    const coffee = await getCoffee();

    console.log(coffee); // ☕

    const wes = await axios("https://randomuser.me/api/?results=200");
    console.log("wes"); // using string instead of value for brevity

    const wordPromise = axios("https://randomuser.me/api/?results=200");
    console.log("wordPromise"); // using string instead of value for brevity

    alert("finish");
  } catch (e) {
    console.error(e); // 💩
  }
}
go();
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script>

2 comments

@amrender singh 2019-05-15 16:27:10

The async/await is working as intended. It is just that the the console takes some time to update or the browser is repainting, therefore the alert is triggered before it can repaint. You can verify it by using all alert instead of console.log. All the alert are executed in the correct order.As shown in the example below.

function getCoffee() {
    return new Promise(resolve => {
      setTimeout(() => {resolve("coffee")}, 2000); // it takes 2 seconds to make coffee
    });
  }
  async function go() {
    try {
      alert("ok");
      const coffee = await getCoffee();

      alert(coffee); // ☕

      const wes = await getCoffee();
      alert(wes);

      const wordPromise = getCoffee();
      alert(wordPromise);

      alert("finish");
    } catch (e) {
      console.error(e); // 💩
    }
  }
go();

@stevendesu 2019-05-15 16:26:33

The issue here is that console.log isn't always as synchronous as one might think. The specification only requires that console.log display a message in the developer console, but doesn't make any requirements about how or when the message will display. Depending on your browser, results may differ, however usually it's implemented something like the following:

  • When you make a call to console.log the request gets pushed onto a stack (so consecutive calls to console.log always execute in order)
  • On the next animation frame, the browser will attempt to process as much of the stack as possible (minimum of one element on the stack must be processed, so the browser may lock up if you attempt to lock 8 megabytes of data)
  • "Processing" the stack involves things like converting DOM element references to links that take you elsewhere in the dev console, converting JSON objects to navigable and collapsible UI elements, or replacing objects with the text "[Object object]"
  • Once an element on the stack is processed, it must be rendered in the console. This requires adjusting the height of the console, determining if you need a scroll bar, determining where text will wrap, etc. This process (taking what you want in the console and actually displaying it on the screen) is called "painting"

Because console.log is actually a complex operation like this, it may not finish executing before the alert statement runs (in some browsers). By replacing every call to alert with console.log or every call to console.log with alert you should see that things are actually executing in the expected order.

Related Questions

Sponsored Content

53 Answered Questions

[SOLVED] Create GUID / UUID in JavaScript?

  • 2008-09-19 20:01:00
  • Jason Cohen
  • 1488192 View
  • 3654 Score
  • 53 Answer
  • Tags:   javascript guid uuid

86 Answered Questions

[SOLVED] How do JavaScript closures work?

71 Answered Questions

[SOLVED] What is the most efficient way to deep clone an object in JavaScript?

3 Answered Questions

33 Answered Questions

[SOLVED] For-each over an array in JavaScript?

26 Answered Questions

[SOLVED] What does "use strict" do in JavaScript, and what is the reasoning behind it?

38 Answered Questions

[SOLVED] How do I remove a property from a JavaScript object?

79 Answered Questions

[SOLVED] How do I remove a particular element from an array in JavaScript?

  • 2011-04-23 22:17:18
  • Walker
  • 5713397 View
  • 7106 Score
  • 79 Answer
  • Tags:   javascript arrays

54 Answered Questions

[SOLVED] How do I include a JavaScript file in another JavaScript file?

Sponsored Content