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'
            })
          }
        },
  • 相关阅读:
    perl自定义简易的面向对象的栈与队列类
    java idea实现.java文件编译成class并运行
    git代码管理及提交
    k8s和docker的区别
    pycharm查看代码结构的方法
    ssh 登录的方式
    excel分析数据绘制统计直方图
    linux普通用户使用yum安装nginx,并使用nginx
    iterm2 + virtualbox + centos环境搭建
    python源码安装
  • 原文地址:https://www.cnblogs.com/Answer1215/p/7230701.html
Copyright © 2011-2022 走看看