阅读数:

react项目中使用fetch进行网络请求

0

说明

我们所有的web应用几乎都是UI+api+DB的模式,UI要获取获取进行呈现,离不开api的调用,今天我们就来说说
react项目中,利用fetch 如何调用API,

安装

项目我们引用业内成熟的isomorphic-fetch插件,

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

fetch

引用

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
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: []
}));
});
}

post

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
function post(postData, dispatch) {
return fetch('/api/save', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify({
data: postData
})
}).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(success({
msg: strings.NET_ERROR,
data: false
}));
}
// 正常业务处理
else {
dispatch(success({
msg: hasError ? text : '',
data: !hasError
}));
}
})
.catch((err) => {
dispatch(success({
msg: (__DEBUG__ && err.message) ? err.message : strings.NET_ERROR,
data: false
}));
});
}

最后

推荐另一款superagent

如有疑问或者更好的方案留言下方……^_^


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


0
赏点咖啡钱^.^