React-Native網絡請求的總結

關於React-Native中的網絡請求的實現。

1.get的請求方式的實現

1  //get請求
2   static  get(url, callback) {
3       fetch(url)
4       .then((response) => response.text())
5       .then((responseText) => {
6         callback(JSON.parse(responseText));
7       }).done();
8     }

get請求非常簡單基本就是這樣，再很少說了。

2.Post請求的實現

post請求我在這裏寫了兩種形式，一種是Content-Type爲application/json的形式，另外一種是Content-Type爲application/x-www-form-urlencoded。

2.1 application/json的形式

 1 static postJson (url, data, callback) {
 2     var fetchOptions = {
 3       method: 'POST',
 4       headers: {
 5         'Accept': 'application/json',
 6         //json形式
 7         'Content-Type': 'application/json'
 8       },
 9       body: JSON.stringify(data)
10     };
11 
12   fetch(url, fetchOptions)
13     .then((response) => response.text())
14     .then((responseText) => {
15       callback(JSON.parse(responseText));
16     }).done();
17   }

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

 1 static  postFrom(url, data, callback) {
 2       var fetchOptions = {
 3         method: 'POST',
 4         headers: {
 5           'Accept': 'application/json',
 6           //表單
 7           'Content-Type': 'application/x-www-form-urlencoded'
 8         },
 9         body:'data='+data+''
10       };
11 
12       fetch(url, fetchOptions)
13       .then((response) => response.text())
14       .then((responseText) => {
15         callback(JSON.parse(responseText));
16       }).done();
17     }

3 NetUtil的實現

 1 /**
 2  * NetUitl 網絡請求的實現
 3  * @author lidong
 4  * @date 2016-03-17 
 5  * https://github.com/facebook/react-native
 6  */
 7 'use strict';
 8 import React, {
 9   Component,
10 } from 'react-native';
11 
12 class NetUitl extends React.Component {
13 
14   //post請求
15   /**
16   *url :請求地址
17   *data:參數
18   *callback:回調函數
19   */
20   static  postFrom(url, data, callback) {
21       var fetchOptions = {
22         method: 'POST',
23         headers: {
24           'Accept': 'application/json',
25           'Content-Type': 'application/x-www-form-urlencoded'
26         },
27         body:'data='+data+''//這裏我參數只有一個data,你們能夠還有更多的參數
28       };
29 
30       fetch(url, fetchOptions)
31       .then((response) => response.text())
32       .then((responseText) => {
33         callback(JSON.parse(responseText));
34       }).done();
35     }
36   /**
37   *url :請求地址
38   *data:參數(Json對象)
39   *callback:回調函數
40   */
41 static postJson (url, data, callback) {
42     var fetchOptions = {
43       method: 'POST',
44       headers: {
45         'Accept': 'application/json',
46         //json形式
47         'Content-Type': 'application/json'
48       },
49       body: JSON.stringify(data)
50     };
51 
52   fetch(url, fetchOptions)
53     .then((response) => response.text())
54     .then((responseText) => {
55       callback(JSON.parse(responseText));
56     }).done();
57   }
58   //get請求
59   /**
60   *url :請求地址
61   *callback:回調函數
62   */
63   static  get(url, callback) {
64       fetch(url)
65       .then((response) => response.text())
66       .then((responseText) => {
67         callback(JSON.parse(responseText));
68       }).done();
69     }
70 
71 }
72 
73 module.exports = NetUitl;

4. 調用方法：

4.1 get的調用方法：

1 NetUtil.get("http://v.juhe.cn/weather/index?format="+format+"&key="+key+"&cityname="+cityname,function  (ret) {
2       //回調的結果處理;
3    })

4.2 postJson的調用

 1 let data={'username':'123','password':'123456','token':'HSHSIHIFAUINNSNAFKSKJFNKFKFNFNFNK'};
 2 NetUitl.postJson(url,,function (set){
 3     switch (set.retCode) {
 4       case "0000":
 5           alert("登陸成功");
 6         break;
 7      case "0001":
 8         alert("登陸失敗");
 9           break;
10       default:
11       alert("登陸失敗");
12     }
13   });

4.3postFrom的調用

 1  let url = Global.LOGIN;
 2   let map = new Map()
 3   map.set('username',phone);
 4   map.set('password',pwd);
 5   let sx = Util.mapToJson(Util.tokenAndKo(map));
 6   NetUitl.postFrom(url,sx,function (set){
 7     switch (set.retCode) {
 8       case "0000":
 9           alert("登陸成功");
10         break;
11      case "0001":
12         alert("登陸失敗");
13           break;
14       default:
15       alert("登陸失敗");
16     }
17   });