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 相关文章推荐
javascript firefox不显示本地预览图片问题的解决方法
Nov 12 Javascript
JS 字符串连接[性能比较]
May 10 Javascript
jquery validate.js表单验证的基本用法入门
May 13 Javascript
JQUBar 基于JQUERY的柱状图插件
Nov 23 Javascript
基于jquery实现的表格分页实现代码
Jun 21 Javascript
javascript设置金额样式转换保留两位小数示例代码
Dec 04 Javascript
JS之Date对象和获取系统当前时间详解
Jan 13 Javascript
JS实现的简单拖拽购物车功能示例【附源码下载】
Jan 03 Javascript
Vue动态组件与异步组件实例详解
Feb 23 Javascript
从0到1构建vueSSR项目之路由的构建
Mar 07 Javascript
详解Node.js异步处理的各种写法
Jun 09 Javascript
JavaScript 异步时序问题
Nov 20 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+mysql一个名片库程序
2006/10/09 PHP
开发大型 PHP 项目的方法
2007/01/02 PHP
PHP不用递归实现无限分级的例子分享
2014/04/18 PHP
你的编程语言可以这样做吗?
2006/09/07 Javascript
jQuery使用手册之 事件处理
2007/03/24 Javascript
经过绑定元素时会多次触发mouseover和mouseout事件
2014/02/28 Javascript
jQuery中appendTo()方法用法实例
2015/01/08 Javascript
js实现仿百度瀑布流的方法
2015/02/05 Javascript
jQuery遍历DOM的父级元素、子级元素和同级元素的方法总结
2016/07/07 Javascript
微信小程序  action-sheet详解及实例代码
2016/11/09 Javascript
BootStrap3使用错误记录及解决办法
2016/12/22 Javascript
详解vue.js 开发环境搭建最简单攻略
2017/06/12 Javascript
jQuery实现可兼容IE6的滚动监听功能
2017/09/20 jQuery
使用selenium抓取淘宝的商品信息实例
2018/02/06 Javascript
详解为生产环境编译Angular2应用的方法
2018/12/10 Javascript
微信小程序学习笔记之获取位置信息操作图文详解
2019/03/29 Javascript
优雅的处理vue项目异常实战记录
2019/06/05 Javascript
JS中FileReader类实现文件上传及时预览功能
2020/03/27 Javascript
js实现简单贪吃蛇游戏
2020/05/15 Javascript
Python中XlsxWriter模块简介与用法分析
2018/04/24 Python
如何更优雅地写python代码
2019/07/02 Python
python GUI库图形界面开发之PyQt5访问系统剪切板QClipboard类详细使用方法与实例
2020/02/27 Python
keras的三种模型实现与区别说明
2020/07/03 Python
html5新特性与用法大全
2018/09/13 HTML / CSS
C语言中一个结构不能包含指向自己的指针吗
2012/05/25 面试题
办公室主任岗位职责
2013/11/08 职场文书
委托书范本
2014/04/02 职场文书
党的群众路线教育学习材料
2014/05/12 职场文书
初中生300字旷课检讨书
2014/11/19 职场文书
西柏坡导游词
2015/02/05 职场文书
千手观音观后感
2015/06/03 职场文书
六五普法心得体会2016
2016/01/21 职场文书
2016见义勇为事迹材料汇总
2016/03/01 职场文书
护理自荐信
2019/05/14 职场文书
导游词之太行山青龙峡
2020/01/14 职场文书
Spring Boot 的创建和运行示例代码详解
2022/07/23 Java/Android