This course teaches all the major concepts you need to build a production ready SaaS application by step by step _building a fully functional application_. The course is divided into two main parts - the _frontend_, which uses Svelte to build an interactive, rich user interface and the _backend_, which uses Express and PostgreSQL to build a server that handles data management.

Svelte is an exciting new frontend UI framework that offers a very developer friendly workflow and easy to learn syntax. Express and PostgreSQL are tried-and-true technologies that provide a rock solid backend.

Across about 7 hours of video instruction with full source code, this course covers everything from setting up your development environment to securing your application with a multi-tenant architecture and ultimately deploying the application to production.

Build a Svelte app with Node.js, Express, and Postgresql

In this course, we'll be creating a full stack SaaS application with Svelte, Express and PostgreSQL

Fullstack Svelte

---
title: How to Use Axios to Fetch Data From APIs for Svelte Apps
description: Fetching Data from the Frontend with Axios
privateVideoUrl: https://fullstack.wistia.com/medias/hnbbkrx8e4
isPublicLesson: false
code: https://gitlab.com/fullstackio/books/newline-course-apps/blair-googer-fullstack-svelte-app/-/tree/main/code_postgres_(author_original)/module_05/lesson_01/App
---

### 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:

1.  A user navigates to a route in a Single Page Application
2.  The component for the route needs data from the server
3.  The component shows a loading spinner icon to tell the user that something is happening
4.  The component triggers a network call to fetch the data
5.  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">`:



```html
<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:

![hardcoded-lunch-week-list](https://d2uusema5elisf.cloudfront.net/courses/fullstack-svelte/module_06/lesson_06.01/public/hardcoded-lunch-week-list.png)

### 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`, import`onMount` and update the `lunchWeekList` array in the `onMount` function:



```js
<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:

![lunch-week-list-onMount](https://d2uusema5elisf.cloudfront.net/courses/fullstack-svelte/module_06/lesson_06.01/public/lunch-week-onMount.png)

Cool. We have the `onMount` function working successfully.

### Using Axios to Fetch Data

Axios gives us an easy syntax to fetch data from APIs:

```js
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.

Fetching Data from the Frontend with Axios