How to add support for async/await in old browsers.

I want to add support for async/await in javascript for firefox v47. So that I can use async function () { await something; } [Can I use–Browser support tables for modern web technologies.] Async functions says that firefox v47 does’t support “Async functions”. What do I have to do to use " Async functions" in old browsers.
I’m using php on server-side. I’ve no idea about that "babel’ thing. thanks! :slightly_smiling_face:

Hi kny (welcome to the forums!)

While you can’t add async/await functionality to older browsers like FF47, you can transform your code that uses it into functionally equivalent code that doesn’t use it. That’s what Babel is. It’s a transformer or transpiler for code. It takes code using new features and transforms it into code that does the same thing but only uses older, more compatible features.

If you’re heard of TypeScript, that does the same thing, in addition to adding types to JavaScript. Two-for one with that one.

Usually to get these to work, you have to run them through a build system. And depending on how you’re dealing with your frontend code (are you using separate files or injecting them via PHP?), this may be difficult to do. If you’re not already set up for this, it might be easier to stick with the promise API using then() and catch() instead of async/await. Otherwise I think I’d recommend TypeScript because its a little easier to deal with and doesn’t mess with a bunch of different plugins (babel may still need the regenerator runtime for async/await, I’m not sure - that was always confusing). Even though TypeScript supports typed JavaScript, you don’t have to use it. It works with regular JavaScript too.

https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html

1 Like

To add on to what @senocular said, you can use the REPL on the babeljs site to get copy/pasteable “traditional” code for more modern equivalents: https://babeljs.io/en/repl

Here is an example using async and await turned into something that would work in older browsers:

@kirupa, Can I directly use the code generated at https://babeljs.io/repl in my project. I mean, should I replace my existing original code with this newly generated code? And one more thing, its (https://babeljs.io/repl 's) output is extremely messy, It’s entirely different from my own code, too difficult to debug anything in it.
Well, thanks! :slight_smile:

Plz tell me, How can I use babel in Php? Everywhere I see is that “npm” thing. I think, It’s related to node.js but my project runs on a server which is powered by php. I don’t know what I’ve to do to use babel to “transform” or “transpile” my js code. Well, @kirupa’s mention about https://babeljs.io/repl is helpful but I’ve to do this thing manually after every change in my js files.

What these build steps (like these NPM imports) do is create a bundled JS file during development-time. At runtime, there will be no NPM imports for your code. You will just have plain HTML, CSS, and JS. This will be independent of what you do with PHP.

1 Like

You don’t use babel in PHP. Babel is a tool developers use for transforming code. The last link in my first post shows how this works with TypeScript (which isn’t that different from Babel): you start with one file, run it through the tool, and it generates a new version of the file. This new file is the file you would then deploy to your website. Any time you make a change to the original source code, you’d have to re-run the transpiler tool and get an updated version of the code.

Most people have build systems in place that make this process easier. They can automatically build new versions of your transpiled files when you make changes to the original source files, even keep those changes in sync with your browser as you work. These are usually driven by Node, a desktop environment for running JavaScript.

You should be able to find some tutorials out there for setting this up. I think kirupa has one, but I also think its focused on doing it with React (which I doubt you want to get caught up in right now).

1 Like