How to Create an Async Function via “new Function”
One thing I love about JavaScript is that there are many ways to accomplish the same task, one such example being creating functions. There are several patterns for functions; one of the last you see used is the new Function
method:
/* new Function(arg1, arg2 (...), body) */
const myFunction = new Function('users', 'salary', 'return users * salary');
What if you want to use this new Function
method to create an async function? You need to be a bit clever, and thanks to MDN, we have an answer:
// Shim for allowing async function creation via new Function
const AsyncFunction = Object.getPrototypeOf(async function(){}).constructor;
// Usage
const fetchPage = new AsyncFunction("url", "return await fetch(url);");
fetchPage("/").then(response => { ... });
The usage of Object.getPrototypeOf(async function(){}).constructor
is super clever, as a native AsyncFunction
doesn't exist. I don't believe that I've ever used the new Function
pattern but that doesn't mean you don't! And now you can make them asynchronous!
![Serving Fonts from CDN]()
For maximum performance, we all know we must put our assets on CDN (another domain). Along with those assets are custom web fonts. Unfortunately custom web fonts via CDN (or any cross-domain font request) don't work in Firefox or Internet Explorer (correctly so, by spec) though...
![Responsive Images: The Ultimate Guide]()
Chances are that any Web designers using our Ghostlab browser testing app, which allows seamless testing across all devices simultaneously, will have worked with responsive design in some shape or form. And as today's websites and devices become ever more varied, a plethora of responsive images...
![Fix Anchor URLs Using MooTools 1.2]()
The administrative control panel I build for my customers features FCKEditor, a powerful WYSIWYG editor that allows the customer to add links, bold text, create ordered lists, and so on. I provide training and documentation to the customers but many times they simply forget to...
![HTML5’s placeholder Attribute]()
HTML5 has introduced many features to the browser; some HTML-based, some in the form of JavaScript APIs, but all of them useful. One of my favorites if the introduction of the placeholder
attribute to INPUT elements. The placeholder
attribute shows text in a field until the...
fetch() is already an async function, can you change your example?