Understanding Async/Await patterns in JavaScript

Question

I\'m relatively new to JavaScript programming, and so callbacks have been giving me trouble. I\'m using a framework that supports the \"async/await\" syntax from ES7 (Meteor

Answer 1

Is anything that happens in the scope of this async function non-blocking?

It's non-blocking in the sense that the call to foo won't stall the thread until all the work is done, because foo is an asynchronous function calling at least one other asynchronous function. There's only one main UI thread on browsers (and one thread in NodeJS), so unless you use web workers in the browser, the asynchronous code will at some point be occupying that thread (e.g., blocking). But the asynchronous functions you call within foo won't block the thread within foo; instead, foo returns a promise behind the scenes that gets resolved eventually after all the async work is done. (That's why it's an asynchronous function.)

If so, can I just use a series of synchornous functions since I can't parse the data before I receive it anyway?

Not quite following this question. Your code looks fine. It looks synchronous, but it isn't, assuming one or more of the functions you're calling is asynchronous.

What happens if I try to await a function that is not defined as asynchronous (for example myParsingFunction)?

It makes your call to that function asynchronous (even though the function isn't) but then the resolution happens as soon as possible thereafter; the resolution value is the value returned by the function. You can see that in action with this quick experiment:

// `foo` is an asynchronous function, and so calling it returns a promise
async function foo() {
  // We haven't awaited anything yet, so this is run synchronously when we
  // call `foo`
  console.log("A");
  // `Math.random` is, of course, a synchronous function; but we *call* it
  // asynchronously since we've used `await`
  let data = await Math.random();
  // Which means this line doesn't run until later, after `foo` has already
  // returned its promise
  console.log("B");
}

// When we call `foo`, the synchronous part runs first and it returns its
// promise (which we're not using)
foo();
// And then this line runs, BEFORE the asynchronous part of `foo` can run
console.log("C");

// ...and so we see A, C, B; without the `await` on the call to
// `Math.random`, we'd see A, B, C

---

It may (or may not!) be useful to remember that async/await is purely syntactic sugar for interacting with promises. async means the function returns a promise. await means you're waiting (asynchronously) for a promise resolution.

E.g.:

async function foo() {
    return 42;
}

is sugar for

function foo() {
    return new Promise(resolve => {
        resolve(42);
    });
}

and sugar for

let data = await something();
// ...do somthing...

is

something().then(data => {
    // ...do something...
});

leaving aside some minor details.