Technical difference between ESIN asynchronous function and promise?

Question

I am trying to better understand what async function in JavaScript is technically, even if I basically know how to use them.

Many views for async / await show that the async function is basically just a promise, but this is obviously not the case (at least not with the Babel6-transpiled code ):

 async function asyncFunc() { // nop } var fooPromise = new Promise(r => setTimeout(r, 1)); console.clear(); console.log("typeof asyncFunc is", typeof asyncFunc); // function console.log("typeof asyncFunc.next is", typeof asyncFunc.next); // undefined console.log("typeof asyncFunc.then is", typeof asyncFunc.then); // undefined console.log("typeof fooPromise is", typeof fooPromise); // object console.log("typeof fooPromise.next is", typeof fooPromise.next); // undefined console.log("typeof fooPromise.then is", typeof fooPromise.then); // function 

However, it is possible await to promise, for example await fooPromise() .

• Is async funtion proprietary and await just promises compatible?

• and is there a way to distinguish between simple function and async function at runtime (in Babel compatible)?

Answer 1

An asynchronous function is a function that returns a promise. This helps you in cases where you have several asynchronous actions occurring one after another:

 function asyncFunc() { return doSomethingAsync() // doSomethingAsync() returns a promise .then(() => { // do some stuff return doSomethingElseAsync(); // returns a promise }) .then(something => { // do some stuff return doSomethingElseEntirelyAsync(something); // returns a promise }); } 

Turns on

 async function asyncFunc() { await doSomethingAsync(); // awaits for a promise // do some stuff let something = await doSomethingElseAsync(); // awaits for a promise // do some stuff return doSomethingElseEntirelyAsync(something); // returns the final promise // Note that even if you return a value, like return 5, the function as a whole // still returns a promise! } 

It reads much better, and you can use regular tools like try / catch and work with them for loops even if they are asynchronous.

Asynchronous functions are NOT replaced with promises, they are sugars on top of them, to handle specific cases where you have many sequential asynchronous actions.

Since await is basically just “waiting for this promise”, you can still use cool aggregation methods like Promise.all() and Promise.race() and wait for the result of several (or the first of several) promises.

I am not familiar with how to distinguish between two at runtime, because, like classes, asynchronous functions are just sugar on top of promises. (Although there may be hacks, like using the .toString function, and analyze the results, I do not consider them).

Answer 2

The async/await pair is a mechanism that allows you to write asynchronous code in a synchronous style, and in my humble opinion, this is the simplest and most understandable syntax for working with asynchronous code (see also in this article ). The power of syntax really is how await works. But in order to use await inside the function body, it is necessary that the function has a prefix with async .

If you need more information, here is the spec for async/await here .

The current implementation in Babel 5 is based on https://github.com/facebook/regenerator . As you can see in the transpiled code , the function is compiled for:

 function asyncFunc(which, one, two) { return regeneratorRuntime.async(function asyncFuncMaybe$(context$1$0) { ... 

If you dig into Babel babel-regenerator-runtime , you will find the Facebook code. On line 205 you will find:

 // Note that simple async functions are implemented on top of // AsyncIterator objects; they just return a Promise for the value of // the final result produced by the iterator. runtime.async = function(innerFn, outerFn, self, tryLocsList) { ... 

To translate to ES5, async/await Babylon needs to reorder the code so that we can keep track of where we are while the function is running, and AsyncIterator is an object that tracks this state.

Babel 6 gives you more options and allows you to choose the implementation you want to use. See the Transpile Async Await Offer with Babel.js?

So regarding your questions:

• async/await are property. According to the specification, they should work with promises. In particular, you can promise await , and when you execute the async function, it will return a promise to you.
• Because the async function is passed to the function that returns the promise, there is no easy way to distinguish it from the no-async function that returns the promise. Your fooPromise should look more like var fooPromiseFunc = function() {return new Promise(r => setTimeout(r, 1))}; which makes fooPromiseFunc and asyncFunc indistinguishable from the black box prospectus. These are both functions that return a promise. For what reason do you want to distinguish between async and no-async function at runtime? In practice, they can be used the same way, so I don’t understand why you have to threaten them otherwise. For debugging purposes, if you really need to find out if an async function is defined, in Babel 5 you can use something like (asyncFunc+"").indexOf('regeneratorRuntime.async') > 0 or a more accurate regular expression. But it is really hacky, and I will not use it in context outside of debugging or learning.