前几篇文章写了关于React-Native中自己遇到的this的问题和组件嵌套的问题做了总结。今天要写的是关于React-Native中的网络请求的实现。
1.get的请求方式的实现
//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的形式
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
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的实现
/**
* 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 {
/**
*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+''
};
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',
'Content-Type': 'application/json'
},
body: JSON.stringify(data)
};
fetch(url, fetchOptions)
.then((response) => response.text())
.then((responseText) => {
callback(JSON.parse(responseText));
}).done();
}
/**
*url :请求地址
*callback:回调函数
*/
static get(url, callback) {
fetch(url)
.then((response) => response.text())
.then((responseText) => {
callback(JSON.parse(responseText));
}).done();
}
}
module.exports = NetUitl;
- 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
4. 调用方法:
4.1 get的调用方法:
NetUtil.get("http://v.juhe.cn/weather/index?format="+format+"&key="+key+"&cityname="+cityname,function (ret) {
})
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("登录失败");
}
});
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的开源库:点击这里