I have a piece of code with an API call in the topmost JS import which I need to use everywhere else in the project.
How to make this asynchronous?
My HTML file looks like:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="src/style.css">
</head>
<body>
<h1 id="header"></h1>
<script src="src/script1.js"></script>
<script src="src/script2.js"></script>
</body>
</html>
First JS file:
const fetchData= async () => {
const configUrl = 'https://jsonplaceholder.typicode.com/todos/1';
try {
const response = await fetch(configUrl);
if (!response.ok) {
throw new Error(`Network response was not ok: ${response.status} - ${response.statusText}`);
}
const res = await response.json();
console.log('data 0:',res)
return data;
} catch (error) {
console.error('Error fetching data:', error);
}
};
window.data = fetchData();
console.log("data 1:",data);
Second JS file:
console.log("data 2:",window.data)
Basically I want window.data with the data from the endpoint to be accessible everywhere. I want to continue the program execution only after the api call is done. That is, the thread should be blocked for the API call and rest of the program (js files) should execute only after the api call.
Im not ready to move other JS file code to first 1 nor import it inside first using @import in .then block of first.
Is there any clean approach for this?
Live example: https://playcode.io/1696111
In the example I want console.log inside script2.js to print the API data.