[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的更多相关文章
- [Nuxt] Use Vuex Actions to Delete Data from APIs in Nuxt and Vue.js
You'll begin to notice as you build out your actions in Vuex, many of them will look quite similar. ...
- mysql load data 乱码
解决方案: http://stackoverflow.com/questions/26256421/sql-load-data-infile-utf8-issue 即: load data local ...
- Mybatis拦截器 mysql load data local 内存流处理
Mybatis 拦截器不做解释了,用过的基本都知道,这里用load data local主要是应对大批量数据的处理,提高性能,也支持事务回滚,且不影响其他的DML操作,当然这个操作不要涉及到当前所lo ...
- mysql load data 乱码的问题
新学mysql在用load data导入txt文档时发现导入的内容,select 之后是乱码,先后把表,数据库的字符集类型修改为utf8,但还是一样,最后在 http://bbs.chinaunix. ...
- mysql load data infile的使用 和 SELECT into outfile备份数据库数据
LOAD DATA [LOW_PRIORITY | CONCURRENT] [LOCAL] INFILE 'file_name.txt' [REPLACE | IGNORE] INTO TABLE t ...
- 快速的mysql导入导出数据(load data和outfile)
1.load data: ***实际应用:把日志生成的xls文件load到MySQL中: mysql_cmd = "iconv -c -f utf-8 -t gbk ./data/al_ve ...
- 记录load data infile 的用法
load data local infile 'd:/1.txt' into table tcm.wm_dis_category fields terminated by';' lines termi ...
- [MySQL]load data local infile向MySQL数据库中导入数据时,无法导入和字段不分离问题。
利用load data将文件中的数据导入数据库表中的时候,遇到了两个问题. 首先是load data命令无法执行的问题: 命令行下输入load data local infile "path ...
- load data ERROR 1197 (HY000)错误
有一份csv格式的文件,大小在14G左右.max_binlog_cache_size=4G. 登录mysql实例,选择对应的表通过load data往指定表里导数.大概20分钟左右,报以下错误: ER ...
随机推荐
- c++值传递,指针传递,引用传递以及指针与引用的区别
值传递: 形参是实参的拷贝,改变形参的值并不会影响外部实参的值.从被调用函数的角度来说,值传递是单向的(实参->形参),参数的值只能传入, 不能传出.当函数内部需要修改参数,并且不希望这个改变影 ...
- words2
餐具:coffee pot 咖啡壶coffee cup 咖啡杯paper towel 纸巾napkin 餐巾table cloth 桌布tea -pot 茶壶tea set 茶具tea tray 茶盘 ...
- Kinect 开发 —— 保持视频影像
相比直接将影像显示出来,如果能将录制到的影像保存到硬盘上就好了.但是,影像录制,是需要一定的技巧,在网上可以看到很多例子演示如何将Kinect获取到的影像以图片的形式保存到本地,前面的博文也介绍了这一 ...
- iOS 基于第三方QQ授权登录
基于iOS实现APP的第三方QQ登陆.接入第三方SDK时的一个主要的步骤: 1,找到相关的开放平台.QQ互联平台,http://connect.qq.com/: 2,注冊成功后创建自己的APP.填写一 ...
- 用for和while循环求e的值[e=1+1/1!+1/2!+1/3!+1/4!+1/5!+...+1/n!]
/*编敲代码,依据下面公式求e的值. 要求用两种方法计算: 1)for循环.计算前50项 2)while循环,直至最后一项的值小于10-4 e=1+1/1!+1/2!+1/3!+1/4!+1/5!+. ...
- TextView -无法调节字体、边框的距离
今天调节一个字体边框距离,结果一直都实现不了,布局如下 <RelativeLayout xmlns:android="http://schemas.android.com/apk/re ...
- 16.REPL 命令
转自:http://www.runoob.com/nodejs/nodejs-tutorial.html ctrl + c - 退出当前终端. ctrl + c 按下两次 - 退出 Node REPL ...
- Android NineGridLayout — 仿微信朋友圈和QQ空间的九宫格图片展示自定义控件
NineGridLayout 一个仿微信朋友圈和QQ空间的九宫格图片展示自定义控件. GitHub:https://github.com/HMY314/NineGridLayout 一.介绍 1.当只 ...
- CISP/CISA 每日一题 九(2017-11-30 09:25)
电子银行风险管理责任: 1.风险管理是董事会和高级管理层的责任 2.实施技术是信息技术高级管理层的责任 3.测量和监控风险是经营管理层的责任 管理层在实施一个新的电子银行应用程序之前要 ___ ...
- 洛谷——P1101 单词方阵
https://www.luogu.org/problem/show?pid=1101#sub 题目描述 给一nXn的字母方阵,内可能蕴含多个“yizhong”单词.单词在方阵中是沿着同一方向连续摆放 ...