How can we use javascript await operator in the browser adding just a third party library?

Question

How could we use the javascript await operator in the browser using a external javascript library?

For example, if we have the following html code:

<!DOCTYPE html>
<html>
    <head>
        <script type='text/javascript' src='awesome.lib.js'></script>
        <script type='text/javascript'>
            async function slow() {
                return new Promise(function(resolve, reject) {
                  setTimeout(function() {
                      console.log("slow finished");
                      resolve();
                  }, 3000);
                });
            }

            function fast() {
                console.log("fast");
            }

            async function run() {
                await slow();
                fast();
            }

            run();
        </script>
    </head>
    <body>
    </body>
</html>

which libraries can we use (where awesome.lib.js are these libraries) to bring the await operator to the browser? How can we code a working example?

I know that we can transpile the code, but I'm searching for a clever solution that we can just add a third party library and voilá, it works!

If we are using the Google Traceur Transpiler we can transpile the code (http://jsfiddle.net/msfrisbie/yk6r7gxr/) and get a code that looks like the one below. But the problem is that we need transpile the code first. Another thing is I would like to avoid using some things that is not javascript like <script type='text/whatevernotjavascript'>...code...code</script>. How can we do this? This would be very awesome, util and savior.

<script type="text/javscript">
    $traceurRuntime.ModuleStore.getAnonymousModule(function(require) {
      "use strict";
      var $__1 = $traceurRuntime.initTailRecursiveFunction(slow),
          $__3 = $traceurRuntime.initTailRecursiveFunction(run);
      function slow() {
        return $traceurRuntime.call(function() {
          return $traceurRuntime.continuation($traceurRuntime.asyncWrap, $traceurRuntime, [$traceurRuntime.initTailRecursiveFunction(function($ctx) {
            return $traceurRuntime.call(function($ctx) {
              while (true)
                switch ($ctx.state) {
                  case 0:
                    $ctx.returnValue = new Promise(function(resolve, reject) {
                      setTimeout(function() {
                        console.log("slow finished");
                        resolve();
                      }, 3000);
                    });
                    $ctx.state = 2;
                    break;
                  case 2:
                    $ctx.state = -2;
                    break;
                  default:
                    return $traceurRuntime.continuation($ctx.end, $ctx, []);
                }
            }, this, arguments);
          }), this]);
        }, this, arguments);
      }
      function fast() {
        console.log("fast");
      }
      function run() {
        return $traceurRuntime.call(function() {
          return $traceurRuntime.continuation($traceurRuntime.asyncWrap, $traceurRuntime, [$traceurRuntime.initTailRecursiveFunction(function($ctx) {
            return $traceurRuntime.call(function($ctx) {
              while (true)
                switch ($ctx.state) {
                  case 0:
                    Promise.resolve(slow()).then($ctx.createCallback(2), $ctx.errback);
                    return;
                  case 2:
                    fast();
                    $ctx.state = -2;
                    break;
                  default:
                    return $traceurRuntime.continuation($ctx.end, $ctx, []);
                }
            }, this, arguments);
          }), this]);
        }, this, arguments);
      }
      run();
      return {};
    });
    //# sourceURL=traceured.js

Could you use `Promise` to return same result `slow().then(fast)` ? — guest271314, Jun 07 '16 at 02:01
Your only option to establish new syntax is to include a library that transpiles all scripts on-the-fly. — Bergi, Jun 07 '16 at 02:03
@guest271314, in fact we can, but this is just a simple code to explain. Using promises make our code a lot of verbose and the await operator comes to make the things easier. So I would like to use it to avoid this kind of thing. — GarouDan, Jun 07 '16 at 02:06
@Bergi, yes, this could be a solution, not a prefered one to me. For example, looks like this guys (https://github.com/yortus/asyncawait) created some thing similar to node.js. — GarouDan, Jun 07 '16 at 02:09
@GarouDan: `asyncawait`, despite the name, did not extend the syntax - instead they hacked the node.js core to be able to expose `async()` and `await()` functions that do magic with fibers. Well, you can do the same if you want to build your own browser… — Bergi, Jun 07 '16 at 02:14
You could use [`browserify`](http://browserify.org/) to create a single `javascript` file which included, for example, https://github.com/yortus/asyncawait#basic-example. Though, note, this could _"make our code a lot of verbose"_ compared to using `slow().then(fast)` to achieve same result? — guest271314, Jun 07 '16 at 02:14
@GarouDan: Notice that `async`/`await` still uses promises - it just doesn't need explicit `then` invocations and callbacks any more. — Bergi, Jun 07 '16 at 02:15
@GarouDan: What do you mean by "not a preferred one"? What's wrong with it, it seems to do exactly what you want? And no, as I mentioned, there is no other way than to run the transpiler at the client if you want to sent untranspiled script to the browser - and you always need to transpile new syntax. — Bergi, Jun 07 '16 at 02:16

How can we use javascript await operator in the browser adding just a third party library?

0 Answers0