await.-variables

await. variables

await.-variables make interactively debugging Promises a breeze. - https://github.com/rafaelgieschke/await.-variables

JavaScript’s Promises (in ECMAScript 2015) and async functions (in ECMAScript 2017) are great but can be hard to debug interactively in Consoles.

This library helps by letting you declare await. variables. They are like var variables but automatically resolve Promises, print the fulfillment value (using console.log) and assign the fulfillment value to themselves. Additionally, they automatically execute parameter-less async (arrow) functions:

Screenshot Screenshot

// Load library:
fetch("https://rafaelgieschke.github.io/await.-variables/await.js").then(v=>v.text()).then(eval);
// Instead of:
var promise = fetch("/");
// Execute this in Console:
await. a = fetch("/");
// (Be sure to include the dot after await!)
// Wait some time until result of `Promise` gets printed in Console.
a = a.text();
// Wait some more time.
a.match(/<a href/g);
// Or, everything in a single step:
await. b = async()=> (await (await fetch("/")).text()).match(/<a href/g);

If you forgot to declare an await. variable, you can convert a normal global var variable into an await. retroactively:

c = fetch("/");
await. c;

If you want an await. variable to lose its special powers, you can “undeclare” it via the delete operator:

delete c;
c = fetch("/");
// No longer tries to automatically resolve c.

If the Promise gets rejected, its rejection value will be printed using console.error and also get assigned to the variable:

await. d = fetch("invalid://");

Installation

In the Browser

Execute:

fetch("https://rafaelgieschke.github.io/await.-variables/await.js").then(v=>v.text()).then(eval);

in the console.

Depending on the CSP of the target web page (if any), you might have more luck using:

document.documentElement.appendChild(document.createElement("script")).src="https://rafaelgieschke.github.io/await.-variables/await.js";

To automate the process, you can bookmark this await.-variables bookmarklet (if you cannot see a link, you might have to look at this documentation at github.io) and click it on the target page. It will try both ways of execution.

You can also load it by adding a <script> element to your web page:

<script src="https://rafaelgieschke.github.io/await.-variables/await.js"></script>

Lastly, you can also import await.-variables as a module:

import "https://rafaelgieschke.github.io/await.-variables/await.js";

For Node.js

npm install await.-variables
require("await.-variables");

Goals of await.-variables

Shouldn’t they be called async. variables?

Maybe. Maybe not.

License

MIT


Fork me on GitHub