React-Native中网络请求的总结
2017-03-16 22:50
267 查看
前几篇文章写了关于React-Native中自己遇到的this的问题和组件嵌套的问题做了总结。今天要写的是关于React-Native中的网络请求的实现。
2
3
4
5
6
7
8
9
1
2
3
4
5
6
7
8
9
get请求很是简单基本就是这样,再不多说了。
post请求我在这里写了两种形式,一种是Content-Type为application/json的形式,另一种是Content-Type为application/x-www-form-urlencoded。
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
2
3
1
2
3
2
3
4
5
6
7
8
9
10
11
12
13
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
以上就是React-Native中的网络请求的实现转载请标明出处:http://blog.csdn.net/u010046908/article/details/50916511本文出自:【李东的博客】
这里是我的一个学习React-Native的开源库:点击这里
1.get的请求方式的实现
//get请求 static get(url, callback) { fetch(url) .then((response) => response.text()) .then((responseText) => { callback(JSON.parse(responseText)); }).done(); }1
2
3
4
5
6
7
8
9
1
2
3
4
5
6
7
8
9
get请求很是简单基本就是这样,再不多说了。
2.Post请求的实现
post请求我在这里写了两种形式,一种是Content-Type为application/json的形式,另一种是Content-Type为application/x-www-form-urlencoded。
2.1 application/json的形式
static postJson (url, data, callback) { var fetchOptions = { method: 'POST', headers: { 'Accept': 'application/json', //json形式 'Content-Type': 'application/json' }, body: JSON.stringify(data) }; fetch(url, fetchOptions) .then((response) => response.text()) .then((responseText) => { callback(JSON.parse(responseText)); }).done(); }1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2.2 application/x-www-form-urlencoded的形式
static postFrom(url, data, callback) { var fetchOptions = { method: 'POST', headers: { 'Accept': 'application/json', //表单 'Content-Type': 'application/x-www-form-urlencoded' }, body:'data='+data+'' }; fetch(url, fetchOptions) .then((response) => response.text()) .then((responseText) => { callback(JSON.parse(responseText)); }).done(); }1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
3 NetUtil的实现
/**1
* NetUitl 网络请求的实现
* @author lidong
* @date 2016-03-17
* https://github.com/facebook/react-native */
'use strict';
import React, {
Component,
} from 'react-native';
class NetUitl extends React.Component {
//post请求
/**
*url :请求地址
*data:参数
*callback:回调函数
*/
static postFrom(url, data, callback) {
var fetchOptions = {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/x-www-form-urlencoded'
},
body:'data='+data+''//这里我参数只有一个data,大家可以还有更多的参数
};
fetch(url, fetchOptions)
.then((response) => response.text())
.then((responseText) => {
callback(JSON.parse(responseText));
}).done();
}
/**
*url :请求地址
*data:参数(Json对象)
*callback:回调函数
*/
static postJson (url, data, callback) { var fetchOptions = { method: 'POST', headers: { 'Accept': 'application/json', //json形式 'Content-Type': 'application/json' }, body: JSON.stringify(data) }; fetch(url, fetchOptions) .then((response) => response.text()) .then((responseText) => { callback(JSON.parse(responseText)); }).done(); }//get请求
/**
*url :请求地址
*callback:回调函数
*/
static get(url, callback) {
fetch(url)
.then((response) => response.text())
.then((responseText) => {
callback(JSON.parse(responseText));
}).done();
}
}
module.exports = NetUitl;
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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
4. 调用方法:
4.1 get的调用方法:
NetUtil.get("http://v.juhe.cn/weather/index?format="+format+"&key="+key+"&cityname="+cityname,function (ret) { //回调的结果处理; })1
2
3
1
2
3
4.2 postJson的调用
let data={'username':'123','password':'123456','token':'HSHSIHIFAUINNSNAFKSKJFNKFKFNFNFNK'}; NetUitl.postJson(url,,function (set){ switch (set.retCode) { case "0000": alert("登录成功"); break; case "0001": alert("登录失败"); break; default: alert("登录失败"); } });1
2
3
4
5
6
7
8
9
10
11
12
13
1
2
3
4
5
6
7
8
9
10
11
12
13
4.3postFrom的调用
let url = Global.LOGIN; let map = new Map() map.set('username',phone); map.set('password',pwd); let sx = Util.mapToJson(Util.tokenAndKo(map)); NetUitl.postFrom(url,sx,function (set){ switch (set.retCode) { case "0000": alert("登录成功"); break; case "0001": alert("登录失败"); break; default: alert("登录失败"); } });1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
以上就是React-Native中的网络请求的实现转载请标明出处:http://blog.csdn.net/u010046908/article/details/50916511本文出自:【李东的博客】
这里是我的一个学习React-Native的开源库:点击这里
相关文章推荐
- React-Native中网络请求的总结
- react-native 网络请求,超时总结
- React-Native中网络请求的总结
- react-native(Fetch网络请求数据)
- react-native 项目实战 -- 新闻客户端(4) -- 请求网络数据
- React-Native中网络请求
- React Native 网络请求
- React-Native 在iOS9之后,网络请求默认为Https请求,如需支持Http,修改info.plist文件添加键值对设置允许http访问。
- React Native中的网络请求fetch和简单封装
- React-Native 学习笔记十七(网络请求)
- React Native 学习笔记(九)--网络请求 & 界面跳转
- ReactNative基础(四)了解ListView的使用、实现GridView效果、编写一个真实网络请求案例
- React-Native 之 GD (八)GET 网络请求封装
- 【React Native开发】 - fetch网络请求
- react-native网络请求Fetch中遇到的坑
- React Native中的网络请求fetch和简单封装
- React Native 网络请求封装:使用Promise封装fetch请求
- React-Native 之 网络请求 fetch
- react native 开发框架,封装网络请求,自定义控件,常用工具类
- React Native从零开始(七)Fetch网络请求