[Nuxt] Load Data from APIs with Nuxt and Vuex
2024-09-05 00:54:55
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'
})
}
},
最新文章
- 使用bat/vbs/ahk对Windows下进行自动化操作
- 关于通过jq /js 实现验证单选框 复选框是否都有被选中
- 翻译：AKKA笔记 - 介绍Actors
- SQL&&LINQ:左（外）连接，右（外）连接，内连接，完全连接，交叉连接，多对多连接
- cordova3.X 运用grunt生成plugin自定义插件骨架
- 二维码zxing源码分析（四）wifi部分
- 利用powershell进行远程服务器管理（命令行模式）
- 1005 - Rooks（规律）
- Vue（三十）公共组件
- php boolean
- 教你一招：解决Win 10安装软件时提示：文件系统错误 （-1073740940）
- scrapy-redis(一)
- ORA-01403:no data found 解决办法
- pyHook监听用户鼠标、键盘事件
- hibernate4 ， spring3 使用 org.springframework.orm.hibernate3.annotation.AnnotationSessionFactoryBean 报错 Implementing class
- sqlserver 抓取所有执行语句 SQL语句分析 死锁 抓取
- angular指令的详细讲解，不断补充
- linux web.py spawn-fcgi web.py 配置
- Problem A: C语言习题 链表建立，插入，删除，输出
- ARM Linux系统调用的原理