Skip to content

Instantly share code, notes, and snippets.

@cferdinandi

cferdinandi/1-promise-then.html

Created March 25, 2025 18:37
Show Gist options
  • Save cferdinandi/82a6d9b47a1c83c7dbc2fd30f05452a6 to your computer and use it in GitHub Desktop.
Save cferdinandi/82a6d9b47a1c83c7dbc2fd30f05452a6 to your computer and use it in GitHub Desktop.
Download ZIP
Watch the tutorial for this code: https://youtu.be/-KT7fSw0MuQ
Raw
1-promise-then.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Promise.then()</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<script>
function callAPI () {
fetch('https://jsonplaceholder.typicode.com/posts/').then(function (response) {
return response.json();
}).then(function (data) {
console.log('Message 1', data);
});
console.log('Message 2');
}
callAPI();
</script>
</body>
</html>
Raw
2-promise-then--run-order.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Promise.then().then()</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<script>
function callAPI () {
fetch('https://jsonplaceholder.typicode.com/posts/').then(function (response) {
return response.json();
}).then(function (data) {
console.log('Message 1', data);
return data;
}).then(function (data) {
console.log('Message 2', data);
});
}
callAPI();
</script>
</body>
</html>
Raw
3-promise-then--errors.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Promise.then().catch()</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<script>
function callAPI () {
fetch('https://jsonplaceholder.typicode.com/postses/').then(function (response) {
if (!response.ok) {
throw response;
}
return response.json();
}).then(function (data) {
console.log('Message 1', data);
return data;
}).then(function () {
console.log('Message 2', data);
}).catch(function (error) {
console.warn('error', error);
});
}
callAPI();
</script>
</body>
</html>
Raw
4-async-await.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>async and await</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<script>
async function callAPI () {
let request = await fetch('https://jsonplaceholder.typicode.com/posts/');
console.log('Message 1');
let response = await request.json();
console.log('Message 2', response);
}
callAPI();
</script>
</body>
</html>
Raw
5-async-await--errors.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>try catch</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<script>
async function callAPI () {
try {
let request = await fetch('https://jsonplaceholder.typicode.com/postses/');
if (!request.ok) {
throw request;
}
let response = await request.json();
console.log('response', response);
} catch (error) {
console.warn('error', error);
}
}
callAPI();
</script>
</body>
</html>
Raw
6-async-await--returns-a-promise.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>async await promise</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<script>
async function callAPI () {
try {
let request = await fetch('https://jsonplaceholder.typicode.com/posts/');
if (!request.ok) {
throw request;
}
let response = await request.json();
console.log('response', response);
return response;
} catch (error) {
console.warn('error', error);
}
}
let data = callAPI().then(function (data) {
console.log('data 2', data);
});
console.log('data', data);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment