But it is also asynchronous; it is designed to react to events and to trigger jobs that take an unknown amount of time to complete.
Then it loops back around and checks for new statements in the queue.
document.addEventListener('DOMContentLoaded', function() { console.log('The page is ready!'); });
setTimeout(function() { console.log('One second has passed.'); }, 1000);
fillKettle(); // wait until it's finished, then... boilWater(); // wait until it's finished, then... addLeaves('green'); // wait until it's finished, then... steepTea('1 minute');
fillKettle(function() { boilWater(function() { addLeaves('green', function() { steepTea('1 minute'); }); }); });
fillKettle(function() { boilWater(function() { addLeaves('green', function() { steepTea('1 minute', function() { pourTea(function() { serveTea(function() { drinkTea(); }); }); }); }); }); });
doThis().then(doThat);
doThis().then(doThat).then(doSomethingElse);
doThis() .then(doThat) .then(doSomethingElse);
fillKettle(() => { boilWater(() => { addLeaves('green', () => { steepTea('1 minute'); }); }); });
fillKettle() .then(boilWater) .then(() => addLeaves('green')) .then(() => steepTea('1 minute'));
fillKettle() .then(boilWater) .then(() => addLeaves('green')) .then(() => steepTea('1 minute')) .then(pourTea) .then(serveTea) .then(drinkTea);
const myPromise = new Promise();
const myPromise = new Promise(function (resolve, reject) { setTimeout(function() { resolve(); }, 1000) // Takes 1 second to resolve });
const myPromise = new Promise(function (resolve, reject) { setTimeout(function() { resolve(); }, 1000); }); myPromise.then(() => console.log('all done!')); console.log('starting operation...');
starting operation... all done!
const myPromise = new Promise(function (resolve, reject) { setTimeout(function() { resolve('Hong Shui Oolong'); }, 1000) // Takes 1 second to resolve }); myPromise.then(tea => console.log(`Today's tea is ${tea}`));
Today's tea is Hong Shui Oolong
fetch('https://jsonplaceholder.typicode.com/todos/1') .then(response => response.json()) .then(json => console.log(json))
{ "userId": 1, "id": 1, "title": "delectus aut autem", "completed": false }
boilWater() .catch(() => console.error('There was a problem making tea.'))
fillKettle() .then(boilWater) .then(() => addLeaves('green')) .then(() => steepTea('1 minute')) .catch(() => console.error('There was a problem making tea.'))
const done = new Promise(resolve => resolve('hello')) done .then(greeting => console.log(`${greeting}, my friend!`))
hello, my friend!
const done = Promise.resolve('hello') done .then(greeting => console.log(`${greeting}, my friend!`))
let isMakingTea = true; boilWater() .then(steepTea) .catch(() => console.error('Failed to make tea.')) .finally(() => { isMakingTea = false; });
const imageLoader = loadImages(); const soundLoader = loadSounds(); const movieLoader = loadMovies(); const loader = Promise.all([ imageLoader, soundLoader, movieLoader, ]); loader.then(startGame);
const response = await fetch('https://jsonplaceholder.typicode.com/todos/1') const json = await response.json(); console.log(json);
async function getDataFromServer() { const response = await fetch('https://jsonplaceholder.typicode.com/todos/1') const json = await response.json(); return json; } async function main() { console.log(await getDataFromServer()); } main();
function main() { boilWater() .then(() => addLeaves('green')) .then(() => steepTea('1 minute')) .then(drinkTea); } main();
async function main() { await boilWater(); await addLeaves('green'); await steepTea('1 minute')); drinkTea(); } main();
async function main() { try { await fillKettle(); await boilWater(); await addLeaves('green'); await steepTea('1 minute')); drinkTea(); } catch (error) { console.error('There was a problem making tea.'); } } main();