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

27 Answered Questions

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

52 Answered Questions

[SOLVED] Create GUID / UUID in JavaScript?

  • 2008-09-19 20:01:00
  • Jason Cohen
  • 1538018 View
  • 3737 Score
  • 52 Answer
  • Tags:   javascript guid uuid

57 Answered Questions

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

69 Answered Questions

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

3 Answered Questions

79 Answered Questions

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

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

38 Answered Questions

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

86 Answered Questions

[SOLVED] How do JavaScript closures work?

33 Answered Questions

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

Sponsored Content