首页 > 代码库 > [Nuxt] Load Data from APIs with Nuxt and Vuex
[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‘ }) } },
[Nuxt] Load Data from APIs with Nuxt and Vuex
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。