[Nuxt] Load Data from APIs with Nuxt and Vuex
2017-07-24 19:47
495 查看
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.
There are three ways to handle loading data error:
1. try catch the async await:
2. Redirect to a error page:
3. Default error page:
<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' }) } },
相关文章推荐
- [Nuxt] Use Vuex Actions to Delete Data from APIs in Nuxt and Vue.js
- [Nuxt] Display Vuex Data Differently in Each Page of Nuxt and Vue.js
- [Nuxt] Navigate with nuxt-link and Customize isClient Behavior in Nuxt and Vue.js
- [Vue] Preload Data using Promises with Vue.js and Nuxt.js
- Along with all the above benefits, you cannot overlook the space efficiency and performance gains in using DataFrames and Dataset APIs for two reasons.
- [Nuxt] Update Vuex State with Mutations and MapMutations in Vue.js
- load data from (txt/ table and so on)
- Advanced Load Testing Scenarios with JMeter: Part 2 - Data-Driven Testing and Assertions
- [Nuxt] Add Arrays of Data to the Vuex Store and Display Them in Vue.js Templates
- [Vue] Create Vue.js Layout and Navigation with Nuxt.js
- extjs load data from mysql with php example
- [Nuxt] Build a Navigation Component in Vue.js and Use in a Nuxt Layout
- CWaveFile -- a Class for Working with and Representing Data from WAVEs
- Sample: Write And Read data from HDFS with java API
- [Vue] Build Vue.js Apps with the Vue-CLI and Nuxt.js
- [Nuxt] Setup a "Hello World" Server-Rendered Vue.js Application with the Vue-CLI and Nuxt
- How to load 3d model from different domain and display it with Three.js
- CS001496 - Gather data from web page with JavaScript, WebKit, and Qt
- CS001496 - Gather data from web page with JavaScript, WebKit, and Qt
- [D3] Load and Inspect Data with D3 v4