Navigation Menu

Skip to content

Instantly share code, notes, and snippets.

@kieranbarker

kieranbarker/index.html

Created March 20, 2022 19:19
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save kieranbarker/90d3249d4723acd7a7ab11e7bff39dc4 to your computer and use it in GitHub Desktop.
Save kieranbarker/90d3249d4723acd7a7ab11e7bff39dc4 to your computer and use it in GitHub Desktop.
Download ZIP
A simple demo of the top-level await keyword in vanilla JS.
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Users</title>
</head>
<body>
<h1>Users</h1>
<p>Check the JavaScript console.</p>
<script src="index.js" type="module"></script>
</body>
</html>
Raw
index.js
import users from "./users.js";
if (users instanceof Error) {
console.error(users);
} else {
console.log(users);
}
Raw
users.js
const API = "https://jsonplaceholder.typicode.com/users";
let users;
async function getJSON(response) {
if (response.ok) {
const data = await response.json();
return Promise.resolve(data);
}
const { status, statusText } = response;
const error = new Error(`${status} ${statusText}`);
return Promise.reject(error);
}
try {
const response = await fetch(API);
users = await getJSON(response);
} catch (error) {
users = error;
}
export default users;
@kieranbarker
Copy link
Author

kieranbarker commented Mar 20, 2022 •
edited

Because of security features that web browsers implement, JavaScript modules generally don’t work with the file:// protocol. You’ll therefore need to run a local web server on your computer.

Here’s a list of one-liners for starting a local web server.

@G3Kappa
This comment was marked as a violation of GitHub Acceptable Use Policies
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment