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 相关文章推荐
jquery 学习之二 属性(类)
Nov 25 Javascript
jquery radio 操作代码
Mar 16 Javascript
jQuery News Ticker 基于jQuery的即时新闻行情展示插件
Nov 05 Javascript
js限制textarea每行输入字符串长度的代码
Oct 31 Javascript
表格单元格交错着色实现思路及代码
Apr 01 Javascript
jquery showModelDialog的使用方法示例详解
Nov 19 Javascript
js调试工具Console命令详解
Oct 21 Javascript
jQuery基于正则表达式的表单验证功能示例
Jan 21 Javascript
Vue如何引入远程JS文件
Apr 20 Javascript
使用vue官方提供的模板vue-cli搭建一个helloWorld案例分析
Jan 16 Javascript
Express下采用bcryptjs进行密码加密的方法
Feb 07 Javascript
vue响应式原理与双向数据的深入解析
Jun 04 Vue.js
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自定义扩展名获取函数示例
2016/12/12 PHP
JavaScript静态的动态
2006/09/18 Javascript
Highslide.js是一款基于js实现的网页中图片展示插件
2020/03/30 Javascript
分享20款好玩的jQuery游戏
2011/04/17 Javascript
同一页面多个商品倒计时JS 基于面向对象的javascript
2012/02/16 Javascript
原生js实现查找/添加/删除/指定元素的class
2013/04/12 Javascript
jquery在ie7下选择器的问题导致append失效的解决方法
2016/01/10 Javascript
Ionic实现页面下拉刷新(ion-refresher)功能代码
2016/06/03 Javascript
jQuery获取radio选中项的值实例
2016/06/18 Javascript
Node.js读取文件内容示例
2017/03/07 Javascript
在vue.js中抽出公共代码的方法示例
2017/06/08 Javascript
angularjs实现时间轴效果的示例代码
2017/11/29 Javascript
微信小程序之圆形进度条实现思路
2018/02/22 Javascript
详解js跨域请求的两种方式,支持post请求
2018/05/05 Javascript
jQuery+CSS实现的标签页效果示例【测试可用】
2018/08/14 jQuery
基于Vue2实现简易的省市区县三级联动组件效果
2018/11/05 Javascript
微信小程序身份证验证方法实现详解
2019/06/28 Javascript
three.js 制作动态二维码的示例代码
2020/07/31 Javascript
python基础教程之简单入门说明(变量和控制语言使用方法)
2014/03/25 Python
Python的面向对象编程方式学习笔记
2016/07/12 Python
python迭代dict的key和value的方法
2018/07/06 Python
python判断文件是否存在,不存在就创建一个的实例
2019/02/18 Python
对python中的控制条件、循环和跳出详解
2019/06/24 Python
python用Tkinter做自己的中文代码编辑器
2020/09/07 Python
Django用内置方法实现简单搜索功能的方法
2020/12/18 Python
python 制作本地应用搜索工具
2021/02/27 Python
Soft Cotton捷克:来自爱琴海棉花的浴袍
2017/02/01 全球购物
GUESS西班牙官方网上商城:美国服饰品牌
2017/03/15 全球购物
澳大利亚在线性感内衣商店:Fantasy Lingerie
2021/02/07 全球购物
公司前台辞职报告
2014/01/19 职场文书
元旦红领巾广播稿
2014/02/19 职场文书
天猫某品牌专卖店运营计划书
2014/03/21 职场文书
欢度春节标语
2014/07/01 职场文书
股东合作协议书
2014/09/12 职场文书
三十年再续同学情倡议书
2019/11/27 职场文书
Java如何实现树的同构?
2021/06/22 Java/Android