React Native 使用Fetch发送网络请求的示例代码
我们在项目中经常会用到HTTP请求来访问网络，HTTP(HTTPS)请求通常分为"GET"、"PUT"、"POST"、"DELETE"，如果不指定默认为GET请求。
在项目中我们常用到的一般为GET和POST两种请求方式，针对带参数的表单提交这类的请求，我们通常会使用POST的请求方式。
为了发出HTTP请求，我们需要使用到ReactNative提供的FetchAPI来进行实现。要从任意地址获取内容的话，只需简单地将网址作为参数传递给fetch方法即可（fetch这个词本身也就是获取的意思
GET
如果你想要通过GET方法去请求数据并转化成JSON，可以通过如下代码实现：
fetch('https://facebook.github.io/react-native/movies.json')
.then((response)=>response.json())
.then((responseJson)=>{
returnresponseJson.movies;
})
.catch((error)=>{
console.error(error);
});
通过上面的请求把返回的Response转化成JSONObject，然后取出JSONObject里的movies字段。同时，如果发生Error，如网络不通或访问连接错误等，会被.catch。在正常的情况下，我们可以得到如下结果：
{
"title":"TheBasics-Networking",
"description":"Yourappfetchedthisfromaremoteendpoint!",
"movies":[
{"title":"StarWars","releaseYear":"1977"},
{"title":"BacktotheFuture","releaseYear":"1985"},
{"title":"TheMatrix","releaseYear":"1999"},
{"title":"Inception","releaseYear":"2010"},
{"title":"Interstellar","releaseYear":"2014"}
]
}
POST（一）
当然，上面是最基本的GET请求，Fetch还有可选的第二个参数，可以用来定制HTTP请求一些参数。你可以指定Headers参数，或是指定使用POST方法，又或是提交数据等等：FetchAPI还支持自定义Headers，更换Method，添加Body等。
leturl="http://www.yousite.com/xxxx.ashx”
letparams={"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（二）
leturl="http://www.yousite.com/xxxx.ashx”;
letparams="username=admin&password=admin”;
fetch(url,{
method:'POST',
headers:{
'Content-Type':'application/x-www-form-urlencoded'
},
body:params,
}).then((response)=>{
if(response.ok){
returnresponse.json();
}
}).then((json)=>{
console.log(json)
}).catch((error)=>{
console.error(error);
});
POST(三)推荐
通过上面两种方法，我们还有一种方式可以发送POST请求，当然这种方式也是被推荐使用的。
如果你的服务器无法识别上面POST的数据格式，那么可以尝试传统的form格式，示例如下：
letREQUEST_URL='http://www.yousite.com/xxxx.ashx';
//`首先我们需要自己创建一个FormData，来存请求参数`
letparameters=newFormData();
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(){
letformData=newFormData();
letfile={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协议，那么首先需要添加一个AppTransportSecurity的例外。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。