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 });