[Nuxt] Load Data from APIs with Nuxt and Vuex

In a server-rendered application, if you attempt to load data before the page renders and the data fails to load, your application will not run unless you handle the error properly. This lesson walks you through the options of handling load errors so that your users will always have a good experience.

 

<template>
  <article class="pa3 pa5-ns">
    <ul class="list pl0 ml0 center mw6 ba b--light-silver br2">
      <li v-for="todo of todos" class="ph3 pv3 bb b--light-silver">{{todo.task}}</li>
    </ul>
  </article>
</template>

<script>
  import { mapState } from 'vuex'
  import axios from 'axios'

  export default {

    async fetch ({store, redirect}) {
      try {
        const res = await axios.get('https://todos-cuvsmolowg.now.sh/todoss')
        store.commit('init', res.data)
      } catch (err) {
        redirect('/error')
        // store.commit('init', [])
      }
    },
    computed: {
      ...mapState({
        todos: (state) => state.todos
      })
    }
  }
</script>

 

There are three ways to handle loading data error:

1. try catch the async await:

      try {
        const res = await axios.get('https://todos-cuvsmolowg.now.sh/todoss')
        store.commit('init', res.data)
      } catch (err) {
        store.commit('init', [])
      }

 

2. Redirect to a error page:

<template>
  <p>
    There are some errors
  </p>
</template>

    async fetch ({store, redirect}) {
      try {
        const res = await axios.get('https://todos-cuvsmolowg.now.sh/todos')
        store.commit('init', res.data)
      } catch (err) {
        redirect('/error')
      }
    },

 

3. Default error page:

    async fetch ({store, redirect, error}) {
      try {
        const res = await axios.get('https://todos-cuvsmolowg.now.sh/todos')
        store.commit('init', res.data)
      } catch (err) {
        error({
          statusCode: 500,
          message: 'Something happened on server'
        })
      }
    },