native react ssh_React-Native中网络请求的总结

前几篇文章写了关于React-Native中自己遇到的this的问题和组件嵌套的问题做了总结。今天要写的是关于React-Native中的网络请求的实现。

1.get的请求方式的实现

1

2

3

4

5

6

7

8

9

1

2

3

4

5

6

7

8

9//get请求

static get(url,callback) {

fetch(url)

.then((response) => response.text()) .then((responseText) => { callback(JSON.parse(responseText)); }).done(); }

get请求很是简单基本就是这样，再不多说了。

2.Post请求的实现

post请求我在这里写了两种形式，一种是Content-Type为application/json的形式，另一种是Content-Type为application/x-www-form-urlencoded。

2.1 application/json的形式

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

18static postJson (url,data,callback) {

var fetchOptions = {

method: 'POST',headers: {

'Accept': 'application/json',//json形式

'Content-Type': 'application/json'

},0); box-sizing: border-box;">body: JSON.stringify(data)

};

fetch(url,fetchOptions)

.(); }

2.2 application/x-www-form-urlencoded的形式

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

static postFrom(url,callback) {

var fetchOptions = {

headers: {

//表单

'application/x-www-form-urlencoded'

},0); box-sizing: border-box;">body:'data='+data+''

};

fetch(url,fetchOptions)

.(); }

3 NetUtil的实现

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

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/** * 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,callback) {

var fetchOptions = {

method: ''//这里我参数只有一个data,大家可以还有更多的参数

};

fetch(url,fetchOptions)

.then((response) => response.text())

.then((responseText) => {

callback(JSON.parse(responseText));

}).done();

}

/** *url :请求地址 *data:参数(Json对象) *callback:回调函数 */

static postJson (url,callback) {

var fetchOptions = {

method: //json形式

//get请求

/** *url :请求地址 *callback:回调函数 */

static get(url,callback) {

fetch(url)

.then((response) => response.text())

.then((responseText) => {

callback(JSON.parse(responseText));

}).done();

}

}

module.exports = NetUitl;

4. 调用方法：

4.1 get的调用方法：

1

2

3

1

2

3NetUtil.get("http://v.juhe.cn/weather/index?format="+format+"&key="+key+"&cityname="+cityname,function (ret) {

//回调的结果处理;

})

4.2 postJson的调用

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

13let data={'username':'123',0); box-sizing: border-box;">'password':'123456',0); box-sizing: border-box;">'token':'HSHSIHIFAUINNSNAFKSKJFNKFKFNFNFNK'};

NetUitl.postJson(url,102); box-sizing: border-box;">(set){

switch (set.retCode) {

case "0000":

alert("登录成功");

break;

"0001":

alert("登录失败");

break;

default:

alert("登录失败");

}

});

4.3postFrom的调用

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

17let url = Global.LOGIN;

let map = new Map()

map.set('username',phone);

'password',pwd);

let sx = Util.mapToJson(Util.tokenAndKo(map));

NetUitl.postFrom(url,sx,function (set){

switch (set.retCode) {

"登录成功");

break;

"登录失败");

break;

default:

alert("登录失败");

}

});

这里是我的一个学习React-Native的开源库：点击这里