Is it possible to store a value out of fetch API for use after page reload?

[DSB Audio David Sweeney Bear]

I'm trying to store a variable from data loaded through a fetch API, so that it's available for use outside the "promise" - i.e. so that I can generate a variable and them compare it on page reload. So far, I have something like this, but it doesn't work:

let extractedVal = await main(x);

let xml = "";
let apiUrl = "link/to/myfile.xml";

async function getXml() {
let response = await fetch("link/to/myfile.xml");
let text = await response.text();
xml = new DOMParser().parseFromString(text, "text/xml");
return xml;
}
async function main() {
xml = await getXml(apiUrl)
console.log(xml);
var x = 1;
return x;
}

i get the error at line 1:

Uncaught SyntaxError: await is only valid in async functions and the top level

or:

x is not defined

if I don't use await Surely, I'm not seeking to do the impossible here? All the methods I can find for "hoisting" a local variable into global scope seem to fail.

[Richard Deeming]

Top-level await[^] is currently only supported in modules[^]. For regular Javascript code, you would need to wrap it in a function. For example:

let xml = null;

(async () => {
const apiUrl = "link/to/myfile.xml";
const response = await fetch(apiUrl);
const text = await response.text();
xml = new DOMParser().parseFromString(text, "text/xml");
console.log(xml);
})();

NB: If you access the xml variable before the fetch has completed, it will still be null. Another approach would be to store a promise[^] in the variable, and await that when you want to access it:

const xml = (async () => {
const apiUrl = "link/to/myfile.xml";
const response = await fetch(apiUrl);
const text = await response.text();
const result = new DOMParser().parseFromString(text, "text/xml");
console.debug("xml:", result);
return result;
})();

---

"These people looked deep within my soul and assigned me a number based on the order in which I joined." - Homer

[jsc42]

DSB Audio (David Sweeney-Bear) wrote:

All the methods I can find for "hoisting" a local variable into global scope seem to fail.

You can't hoist across scopes. Hoisting merely moves definitions of variables to the top of the scope that they are defined in (but the initial value assigned to it is still done in the place where the they appear in the script text). You must define the 'x' in the scope that owns it (pref. not the global scope) and then it is visible in all inner scopes unless hidden by declaring another 'x' in a scope between the defining one and the using one. You can create a variable in the global scope from any other scope by using it without declaring it first (e.g. not in a var statement) - this is bad practice, so please do not do that.