React Native 使用Fetch发送网络请求的示例代码

我们在项目中经常会用到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 。在正常的情况下，我们可以得到如下结果：

{
 "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"}
 ]
}

post（一）

当然，上面是最基本的 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（二）

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请求，当然这种方式也是被推荐使用的。

如果你的服务器无法识别上面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的例外。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。