0

I can read a local file and print it out with fetch

fetch(localFileUrl)
    .then(response => response.text())
    .then(text => console.log(text))

but I couldn't figure a way to save the content into a global variable (and immediately use it).

I tried

var fileContent = fetch(localFileUrl)
    .then(response => { return response.text() })

console.log(fileContent)

only to get Promise {<pending>}

also tried

var fileContent = "init"

fetch(localFileUrl)
    .then(response => response.text())
    .then(text => fileContent = text)

console.log(fileContent)

but it prints out init, not file content

How do I force thie promise evaulated before executing later code?

Rahn
  • 4,787
  • 4
  • 31
  • 57
  • you can call and assign whatever you want inside the then functions since the data will be available at that stage. so instead of return value you can say doTheThingFunction(value); and then inside that function do whatever you want – Andam Oct 11 '22 at 12:53
  • add 'await' before fetch(...) if you are within an async function – Mossaab Oct 11 '22 at 12:56
  • @Mossaab no, not within an async function. Can I save file content into a global variable? – Rahn Oct 11 '22 at 13:02

2 Answers2

1

If you don't want to use the result inside the then function, I would suggest you to create an asynchronous function:

Solution 1: Asynchronous funciton

async function fetchFile() {
    const response = await fetch(localFileUrl);
    const fileContent = await response.text();
    console.log(fileContent);

    // ... work with the text
}

Edit: After your update, I think what you're trying to do is using async in the top level. It may work in modern runtime environments:

Solution 2: Using await at the top level

var fileContent = "init";

const response = await fetch(localFileUrl);
const fileContent = await response.text();

// ... work with the text
console.log(fileContent);
Louis Wilke
  • 147
  • 5
  • Is it possible to avoid async function? I hope to save the file content into a global variable. – Rahn Oct 11 '22 at 13:00
  • Not really, it is just a sequential representation of `fetch().then( ... ).then( ... )`. You can still access the global variable, but you must make sure to access it only **after** setting a value to `fileContent`. Edit: Can you show us where/how you want to access the global variable? – Louis Wilke Oct 11 '22 at 13:03
  • add a 2nd example to illustrate my intention – Rahn Oct 11 '22 at 13:05
1

Try this:

let fileContent;
fetch(localFileUrl)
    .then(response => response.text())
    .then(text => fileContent = text)

You can also use this in an async function.

const response = await fetch(localFileUrl)
const fileContent = await response.text() // or response.json() if it's the case

(AFTER YOUR UDPATE)

There is a small trick to use async/await in a "global" environment.

async function main() {
    const response = await fetch(localFileUrl)
    const fileContent = await response.text()
    
    console.log(fileContent) // Now has the right value

    // ... Rest of your code
}
main();

You can now write all your code inside the main function.

Hedi Zitouni
  • 179
  • 1
  • 8
  • Is it possible to avoid async function? I hope to save the file content into a global variable. – Rahn Oct 11 '22 at 13:01
  • The first solution doesn't use async function. However fileContent will have a value only when the fetch call will be finished. The rest of your code will continue to be executed in the same time. If you want to stop the execution until fileContent gets a value, you have to use async/await OR write the rest of your code directly as a callback in the second .then – Hedi Zitouni Oct 11 '22 at 13:05