Javascript Fetch API Tutorial to Read Local Text File and Display it in Browser Using Async Await

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

<!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>

<!DOCTYPE html>

<head>

<title>FETCH API (XMLHTTPREQUEST OBJECT) AJAX</title>

</head>

<body>

</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

KANE WILLIAMSON IS THE CAPTAIN OF NEW ZEALAND.

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

let file = "file.txt"

    // fetch api

    fetch(file)
    .then((x) => {
        console.log(x)
        return x.text()
    })
    .then((y) => {
        document.getElementById('result').innerHTML = y
    })

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 divelement. 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

getText("file.txt")

   async function getText(file){
    let x = await fetch(file)
    let y = await x.text()
    document.getElementById('result').innerHTML = y
   }

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.