我们在项目中经常会用到 HTTP 请求来访问网络,HTTP(HTTPS) 请求通常分为 "GET"、"PUT"、"POST"、"DELETE",如果不指定默认为 GET 请求。
在项目中我们常用到的一般为 GET 和 POST 两种请求方式,针对带参数的表单提交这类的请求,我们通常会使用 POST 的请求方式。
为了发出 HTTP 请求,我们需要使用到 React Native 提供的 Fetch API 来进行实现。要从任意地址获取内容的话,只需简单地将网址作为参数传递给 fetch 方法即可(fetch 这个词本身也就是获取的意思
GET如果你想要通过 GET 方法去请求数据并转化成 JSON,可以通过如下代码实现:
- fetch('https://facebook.github.io/react-native/movies.json')
- .then((response) => response.json())
- .then((responseJson) => {
- return responseJson.movies;
- })
- .catch((error) => {
- console.error(error);
- });
通过上面的请求把返回的 Response 转化成 JSON Object,然后取出 JSON Object 里的 movies 字段。同时,如果发生 Error,如网络不通或访问连接错误等, 会被 .catch 。在正常的情况下,我们可以得到如下结果:
POST(一)
- {
- "title": "The Basics - Networking",
- "description": "Your app fetched this from a remote endpoint!",
- "movies": [
- { "title": "Star Wars", "releaseYear": "1977"},
- { "title": "Back to the Future", "releaseYear": "1985"},
- { "title": "The Matrix", "releaseYear": "1999"},
- { "title": "Inception", "releaseYear": "2010"},
- { "title": "Interstellar", "releaseYear": "2014"}
- ]
- }
当然,上面是最基本的 GET 请求,Fetch 还有可选的第二个参数,可以用来定制 HTTP 请求一些参数。你可以指定 Headers 参数,或是指定使用 POST 方法,又或是提交数据等等:Fetch API 还支持自定义 Headers,更换 Method,添加 Body 等。
- let url = "http://www.yousite.com/xxxx.ashx"
- let params = {"name ":"admin ","password ":"admin "};
- fetch(url, {
- method: 'POST',
- headers: {
- 'Accept': 'application/json',
- 'Content-Type': 'application/json',
- },
- body: JSON.stringify(params)
- })"
上面构建了一个基本的 POST 请求,添加了自己的 Headers:Accept 和 Content-Type,添加了 Body。
POST(二)POST(三) 推荐
- let url = "http://www.yousite.com/xxxx.ashx";
- let params = "username = admin & password = admin";
- fetch(url, {
- method: 'POST',
- headers: {
- 'Content-Type': 'application/x-www-form-urlencoded'
- },
- body: params,
- }).then((response) = >{
- if (response.ok) {
- return response.json();
- }
- }).then((json) = >{
- console.log(json)
- }).
- catch((error) = >{
- console.error(error);
- });
通过上面两种方法,我们还有一种方式可以发送 POST 请求,当然这种方式也是被推荐使用的。
如果你的服务器无法识别上面 POST 的数据格式,那么可以尝试传统的 form 格式,示例如下:
- let REQUEST_URL = 'http://www.yousite.com/xxxx.ashx';
- // `首先我们需要自己创建一个FormData,来存请求参数`
- let parameters = new FormData();
- parameters.append("mt", "30013");
- parameters.append("pg", "1");
- parameters.append('ps', '20');
- fetch(REQUEST_URL, {
- method: 'POST',
- body: parameters
- }).then(
- (result) => {
- if (result.ok) {
- console.log(result)
- result.json().then(
- (obj) => {
- console.log(obj)
- }
- )
- }
- }
- ).catch((error) => {
- console.log(error)
- Alert.alert('Error')
- })
推荐这种方法的好处还有一个,就是可以在 FormData 中直接传递字节流实现上传图片的功能,代码如下:
处理服务器的响应数据
- uploadImage(){
- let formData = new FormData();
- let file = {uri: uri, type: 'multipart/form-data', name: 'a.jpg'};
- formData.append("images",file);
- fetch(url,{
- method:'POST',
- headers:{
- 'Content-Type':'multipart/form-data',
- },
- body:formData,
- })
- .then((response) => response.text() )
- .then((responseData)=>{
- console.log('responseData',responseData);
- })
- .catch((error)=>{console.error('error',error)});
- }
上面的例子演示了如何发起请求。很多情况下,你还需要处理服务器回复的数据。 网络请求天然是一种异步操作,Fetch 方法会返回一个 Promise,这种模式可以简化异步风格的代码,关于 Promise,请参考: Promise
处理服务器返回的数据,我们已经在上面第二种和第三种的 POST 请求中实现了数据的处理。具体代码参考上面的实现代码。
默认情况下,iOS 会阻止所有非 https 的请求。如果你请求的接口是 http 协议,那么首先需要添加一个 App Transport Security 的例外。
来源: http://www.jb51.net/article/129615.htm