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'
            })
          }
        },
  • 相关阅读:
    爬取校园新闻首页的新闻的详情,使用正则表达式,函数抽离
    网络爬虫基础练习
    Hadoop综合大作业
    hive基本操作与应用
    用mapreduce 处理气象数据集
    熟悉常用的HBase操作
    爬虫大作业
    熟悉常用的HDFS操作
    数据结构化与保存
    获取全部校园新闻
  • 原文地址:https://www.cnblogs.com/Answer1215/p/7230701.html
Copyright © 2011-2022 走看看