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


Posted in Javascript onDecember 02, 2017

我们在项目中经常会用到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的例外。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
FCK调用方法..
Dec 21 Javascript
JavaScript 编程引入命名空间的方法
Jun 29 Javascript
JQuery Dialog(JS 模态窗口,可拖拽的DIV)
Feb 07 Javascript
div当滚动到页面顶部的时候固定在顶部实例代码
May 27 Javascript
JQuery获取样式中的background-color颜色值的问题
Aug 20 Javascript
javascript计算当月剩余天数(天数计算器)示例代码
Jan 09 Javascript
js实现3D图片逐张轮播幻灯片特效代码分享
Sep 09 Javascript
Vue-resource实现ajax请求和跨域请求示例
Feb 23 Javascript
解决AngualrJS页面刷新导致异常显示问题
Apr 20 Javascript
Vue 2.5.2下axios + express 本地请求404的解决方法
Feb 21 Javascript
JS插件clipboard.js实现一键复制粘贴功能
Dec 04 Javascript
JS如何调用WebAssembly编译出来的.wasm文件
Nov 05 Javascript
vue微信分享 vue实现当前页面分享其他页面
Dec 02 #Javascript
Vue按需加载的具体实现
Dec 02 #Javascript
使用Vue完成一个简单的todolist的方法
Dec 01 #Javascript
将jquery.qqFace.js表情转换成微信的字符码
Dec 01 #jQuery
如何让你的JS代码更好看易读
Dec 01 #Javascript
javascript中new Array()和var arr=[]用法区别
Dec 01 #Javascript
JS笛卡尔积算法与多重数组笛卡尔积实现方法示例
Dec 01 #Javascript
You might like
php 带逗号千位符数字的处理方法
2012/01/10 PHP
php实现源代码加密的方法
2015/07/11 PHP
CI框架出现mysql数据库连接资源无法释放的解决方法
2016/05/17 PHP
PHP SPL 被遗落的宝石【SPL应用浅析】
2018/04/20 PHP
PHP7.0连接DB操作实例分析【基于mysqli】
2019/09/26 PHP
父子窗体间传递JSON格式的数据的代码
2010/12/25 Javascript
JS判断元素为数字的奇异写法分享
2012/08/01 Javascript
Jquery each方法跳出循环,并获取返回值(实例讲解)
2013/12/12 Javascript
禁用Tab键JS代码兼容Firefox和IE
2014/04/18 Javascript
Extjs的FileUploadField文件上传出现了两个上传按钮
2014/04/29 Javascript
JS实现复制内容到剪贴板功能兼容所有浏览器(推荐)
2016/06/17 Javascript
AngularJS通过$location获取及改变当前页面的URL
2016/09/23 Javascript
JavaScript数组操作详解
2017/02/04 Javascript
详解Immutable及 React 中实践
2018/03/01 Javascript
vue实现树形菜单效果
2018/03/19 Javascript
node.js文件操作系统实例详解
2019/11/05 Javascript
vue 解决移动端弹出键盘导致页面fixed布局错乱的问题
2019/11/06 Javascript
js中复选框的取值及赋值示例详解
2020/10/18 Javascript
[57:47]Fnatic vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python中assert用法实例分析
2015/04/30 Python
用TensorFlow实现多类支持向量机的示例代码
2018/04/28 Python
python将类似json的数据存储到MySQL中的实例
2019/07/12 Python
详解Python 4.0 预计推出的新功能
2019/07/26 Python
python利用xlsxwriter模块 操作 Excel
2020/10/14 Python
html5声频audio和视频video等新特性详细说明
2012/12/26 HTML / CSS
Java平台和其他软件平台有什么不同
2015/06/05 面试题
幼儿教师个人求职信范文
2013/09/21 职场文书
找工作最新求职信
2013/12/22 职场文书
销售主管竞聘书
2014/03/31 职场文书
大学生党员自我评价范文
2014/04/09 职场文书
白血病捐款倡议书
2014/05/14 职场文书
领导干部保密承诺书
2014/08/30 职场文书
行政专员岗位职责说明书
2014/09/01 职场文书
2014年办公室主任工作总结
2014/11/12 职场文书
解决IDEA翻译插件Translation报错更新TTK失败不能使用
2022/04/24 Python
CSS子盒子水平和垂直居中的五种方法
2022/07/23 HTML / CSS