Fetching Data with Axios
Fetching Data from the Frontend with Axios
Fetching Data in Web Apps#
In this lesson, we are going to learn how to use our frontend Svelte application to fetch data from our backend Express endpoints. The following is a common use case in web applications:
A user navigates to a route in a Single Page Application
The component for the route needs data from the server
The component shows a loading spinner icon to tell the user that something is happening
The component triggers a network call to fetch the data
When the data is retrieved, the loading spinner is hidden and the UI is updated with the data
There is a lot going on in the above steps, but Svelte makes it easy to dynamically update the UI with spinner icons and data. We will also use a library called Axios that makes HTTP network calls in JavaScript.
We will follow the above example steps to fetch our lunchWeekList
and display the data on our frontend admin/manage-menus
component.
Open up LunchMenuAdmin.svelte
and start by adding a variable called lunchWeekList
to the script and to the markup under the <h1 class="title is-4">
:
<script>
export let currentRoute
let lunchWeekList = ['test1', 'test2']
</script>
<div>
<nav class="breadcrumb" aria-label="breadcrumbs">
<ul>
<li>
<a href="/">Home</a>
</li>
<li>
<a href="/admin/manage-menus">Lunch Menu Administration</a>
</li>
<li class="is-active">
<a href="/#">{$user.schoolName}</a>
</li>
</ul>
</nav>
{lunchWeekList}
</div>
Run npm run start
and get the front end started, then bring up the manage-menus route.
As a reminder, the frontend dev server runs on port 5000. Here's the link to the manage-menus route we used before http://localhost:5000/admin/manage-menus.
You should see the lunchWeekList
rendered on the DOM:

On-Mount Initialization#
In the Front End Routing module, we discussed the Svelte onMount
lifecycle function. onMount
is a good place to set up component initialization code, such as fetching data from a server.
Next, in LunchMenuAdmin.svelte
, importonMount
and update the lunchWeekList
array in the onMount
function:
<script>
import { onMount } from 'svelte'
export let currentRoute
let lunchWeekList = []
// add the function here
onMount(async () => {
lunchWeekList = ['list', 'updated', 'on', 'mount']
})
</script>
Confirm that the onMount
function updated the state correctly:

Cool. We have the onMount
function working successfully.
Using Axios to Fetch Data#
Axios gives us an easy syntax to fetch data from APIs:
import axios from 'axios'
onMount(async () => {
try {
let response = await axios.get('https://an-api-route')
let data = response.data
} catch (e) {
console.error('Error fetching data')
}
})
While the above syntax looks pretty straightforward, there is some complexity lurking under the covers. An important concept in the above code is the usage of async
or await
. Network calls in JavaScript are asynchronous functions which means that JavaScript doesn't block and wait for the line of code to finish. The next line of code can execute prior to the previous line finishing.
This page is a preview of Fullstack Svelte