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引起的内存泄漏问题
Oct 08 Javascript
js数组的操作详解
Mar 27 Javascript
你的 mixin 真的兼容 ECMAScript 5 吗?
Apr 11 Javascript
Javascript页面添加到收藏夹的简单方法
Aug 07 Javascript
JS实现模仿微博发布效果实例代码
Dec 16 Javascript
jquery实现的随机多彩tag标签随机颜色和字号大小效果
Mar 27 Javascript
jquery禁止回车触发表单提交
Dec 12 Javascript
JavaScrip调试技巧之断点调试
Oct 22 Javascript
深入理解React中es6创建组件this的方法
Aug 29 Javascript
JS 动态判断PC和手机浏览器实现代码
Sep 21 Javascript
Jil,高效的json序列化和反序列化库
Feb 15 Javascript
前端路由&webpack基础配置详解
Jun 10 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
Yii框架扩展CGridView增加导出CSV功能的方法
2017/05/24 PHP
使用laravel指定日志文件记录任意日志
2019/10/17 PHP
php实现的简单多进程服务器类完整示例
2020/02/01 PHP
Laravel + Elasticsearch 实现中文搜索的方法
2020/02/02 PHP
在页面上点击任一链接时触发一个事件的代码
2007/04/07 Javascript
Javascript表达式中连续的 && 和 || 之赋值区别
2010/10/17 Javascript
JS模拟面向对象全解(一、类型及传递)
2011/07/13 Javascript
什么是DOM(Document Object Model)文档对象模型
2012/03/05 Javascript
JQuery为页面Dom元素绑定事件及解除绑定方法
2014/04/23 Javascript
js和jquery设置disabled属性为true使按钮失效
2014/08/07 Javascript
Javascript学习笔记之函数篇(六) : 作用域与命名空间
2014/11/23 Javascript
JS获得图片alt信息的方法
2015/04/01 Javascript
input file上传 图片预览功能实例代码
2016/10/25 Javascript
前端实现文件的断点续传(前端文件提交+后端PHP文件接收)
2016/11/04 Javascript
Javascript基础回顾之(三) js面向对象
2017/01/31 Javascript
Vue.js实现多条件筛选、搜索、排序及分页的表格功能
2020/11/24 Javascript
详解vue与后端数据交互(ajax):vue-resource
2017/03/16 Javascript
基于JS脚本语言的基础语法详解
2017/07/22 Javascript
Vue中添加手机验证码组件功能操作方法
2017/12/07 Javascript
代码详解Vuejs响应式原理
2017/12/20 Javascript
vue单文件组件lint error自动fix与styleLint报错自动fix详解
2019/01/08 Javascript
浅谈VUE防抖与节流的最佳解决方案(函数式组件)
2019/05/22 Javascript
layui给下拉框、按钮状态、时间赋初始值的方法
2019/09/10 Javascript
javascript实现扫雷简易版
2020/08/18 Javascript
解决vue-cli输入命令vue ui没效果的问题
2020/11/17 Javascript
Python判断字符串与大小写转换
2015/06/08 Python
在Qt中正确的设置窗体的背景图片的几种方法总结
2019/06/19 Python
使用TensorFlow对图像进行随机旋转的实现示例
2020/01/20 Python
Python爬虫如何破解JS加密的Cookie
2020/11/19 Python
记一次python 爬虫爬取深圳租房信息的过程及遇到的问题
2020/11/24 Python
如何用python爬取微博热搜数据并保存
2021/02/20 Python
The North Face北面英国官网:美国著名户外品牌
2017/12/13 全球购物
美国农场鲜花速递:The Bouqs
2018/07/13 全球购物
优秀研究生主要事迹
2014/06/03 职场文书
2015年汽车销售员工作总结
2015/07/24 职场文书
2016五一手机促销广告语
2016/01/28 职场文书