Welcome folks today in this blog post we will be reading the content of local text file and display it in browser using fetch api and async await in javascript. All the full source code of the application is shown below.
Get Started
In order to get started you need to make an index.html
file and copy paste the following code
index.html
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>FETCH API (XMLHTTPREQUEST OBJECT) AJAX</title> </head> <body> <div id="result"></div> </body> </html> |
As you can see we have added the div
element and we have given the id
which is result. And here we will be displaying the content
of the text file using the fetch
api and async await.
Now just create the text
file called file.txt
inside the root directory and copy paste the following code
file.txt
1 |
KANE WILLIAMSON IS THE CAPTAIN OF NEW ZEALAND. |
Fetching Content of Text File Using FETCH API
Now we will be fetching the content of the text file using the fetch api in the browser. For this we need to add the javascript code as shown below
1 2 3 4 5 6 7 8 9 10 11 12 |
let file = "file.txt" // fetch api fetch(file) .then((x) => { console.log(x) return x.text() }) .then((y) => { document.getElementById('result').innerHTML = y }) |
As you can see in the above code we are declaring the path of the file which is stored in the root directory. And then we are initializing the fetch
api constructor and it is returning the promise we can handle it using the then
statement. And then inside it we are converting the response to text
using the text()
method. And again it returns the promise inside it we are attaching the value or response coming inside the div
element. We are manipulating the innerHTML
property and assigning the response
as shown above.
Fetching Content of Text File Using Async & Await
Now we will be doing the same thing using the async
and await
statement with the fetch
api. We can handle the promises using the async and await. This will considerably reduces the amount of code and complexity also. You can see the code as shown below
1 2 3 4 5 6 7 |
getText("file.txt") async function getText(file){ let x = await fetch(file) let y = await x.text() document.getElementById('result').innerHTML = y } |
As you can see in the above code we are calling the custom function and passing the path of the text file. And then inside the function we are calling the fetch api. And we are using the await
statement. And then we are converting the response to text using the text()
method. And then we are attaching the response to the div element using the id
. And here we are manipulating the innerHTML property to the response.