zoukankan      html  css  js  c++  java
  • [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'
            })
          }
        },
  • 相关阅读:
    C库函数中字符串处理函数集合(转)
    浅谈C++底层机制
    vc2008快捷键
    Delphi格式输出的用法
    Devenv 命令行开关
    DX皮肤控制
    C#格式化
    linq查询DataView
    WCF中的session用法
    VS2012clickonce发布问题
  • 原文地址:https://www.cnblogs.com/Answer1215/p/7230701.html
Copyright © 2011-2022 走看看