阅读数:

react项目中的用户体验之各种提示

0

说明

在react web项目中,为了更好的提升用户体验,我们需要做一个异常捕获来展示给用户,比如一个友好的loading,
让用户知道你在干嘛,而不是”我是不是没点上”,”我的网络太慢了”等等用户的自我怀疑,亦或是”什么破玩意,卡死了”等等
对于服务的吐槽。本文将介绍如何更多的避免这种用户冲突。

实现

  • redux 部分

注意:项目我们引用业内成熟的isomorphic-fetch插件,框架为react+redux+router+webpack,
实例中以get请求为例。

1
npm install --save isomorphic-fetch es6-promise

引用

1
2
require('es6-promise').polyfill();
require('isomorphic-fetch');

get

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
export function list(value=initial){
return {
type: LIST,
payload: value
};
}
export function fetchList(dispatch) {
return fetch('/api/list')
.then((response) => response.json())
.then((json) => {
let hasError = false;
let text = '';
/// /api/list正常返回格式{errcode:0,errmsg:'',data:[]}
if (json.errcode !== 0) {
hasError = true;
text = json.errmsg;
} else {
hasError = false;
text = '';
}
// 网络异常 如断网
if (json.error) {
dispatch(list({
msg: strings.NET_ERROR,
data: []
}));
}
// 正常业务处理
else {
dispatch(list({
msg: hasError ? text : '',
data: hasError ? [] : json.data
}));
}
})
// 异常处理
.catch((err) => {
dispatch(list({
msg: (__DEBUG__ && err.message) ? err.message : strings.NET_ERROR,
data: []
}));
});
}

initial

1
2
3
4
const initial = {
msg: strings.LOADING,
data: []
};
  • 说明

    大家可能已经注意到了,不管是初始化还是异常处理还是正确返回,我们都有一个msg,正常有4种情况:

    1、loading
    2、’’
    3、net_error
    4、catch_other
    我们可以依赖这四种情况分别在render层给予用户不同提示

  • render改造

1
2
3
4
{this.props.msg ===strings.LOADING && <Toast type='loading'/>}
{this.props.msg ==='' && this.props.data.length>0 && <List data={this.props.data}>}
{this.props.msg ==='' && this.props.data.length<=0 && <Empty />}
{this.props.msg !=='' && this.props.msg != strings.LOADING && <Error err={this.props.msg}/>}

^-^欢迎回复交流^-^


0
赏点咖啡钱^.^