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 1.0.4 - New Wave Javascript(js源文件)
Jan 15 Javascript
jQuery对象与DOM对象之间的转换方法
Apr 15 Javascript
javascript跨域刷新实现代码
Jan 01 Javascript
JavaScript实现自己的DOM选择器原理及代码
Mar 04 Javascript
JavaScript保留两位小数的2个自定义函数
May 05 Javascript
JQuery删除DOM节点的方法
Jun 11 Javascript
理解JavaScript事件对象
Jan 25 Javascript
详细介绍RxJS在Angular中的应用
Sep 23 Javascript
element ui里dialog关闭后清除验证条件方法
Feb 26 Javascript
angularJs select绑定的model取不到值的解决方法
Oct 08 Javascript
Element Input组件分析小结
Oct 11 Javascript
vue实现页面内容禁止选中功能,仅输入框和文本域可选
Nov 09 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与SQL注入攻击[二]
2007/04/17 PHP
写出高质量的PHP程序
2012/02/04 PHP
PHP设计模式之调解者模式的深入解析
2013/06/13 PHP
PHP获取当前url的具体方法全面解析
2013/11/26 PHP
PHP实现Javascript中的escape及unescape函数代码分享
2015/02/10 PHP
PHP保存带BOM文件的方法
2015/02/12 PHP
php截取中文字符串函数实例
2015/02/23 PHP
在Linux系统下一键重新安装WordPress的脚本示例
2015/06/30 PHP
PDO::getAvailableDrivers讲解
2019/01/28 PHP
php7 list()、session及其他模块的修改实例分析
2020/05/25 PHP
javascript中数组的冒泡排序使用示例
2013/12/18 Javascript
点击显示指定元素隐藏其他同辈元素的方法
2014/02/19 Javascript
事件委托与阻止冒泡阻止其父元素事件触发
2014/09/02 Javascript
H5手机端多文件上传预览插件
2017/04/21 Javascript
Vuex 进阶之模块化组织详解
2018/01/12 Javascript
JavaScript 跨域之POST实现方法
2018/05/07 Javascript
使用webpack搭建vue项目实现脚手架功能
2019/03/15 Javascript
微信小程序的授权实现过程解析
2019/08/02 Javascript
Vue分页效果与购物车功能
2019/12/13 Javascript
Vue $emit()不能触发父组件方法的原因及解决
2020/07/28 Javascript
解决VUE项目localhost端口服务器拒绝连接,只能用127.0.0.1的问题
2020/08/14 Javascript
python的Tqdm模块的使用
2018/01/10 Python
Python cookbook(数据结构与算法)字典相关计算问题示例
2018/02/18 Python
Python采集代理ip并判断是否可用和定时更新的方法
2018/05/07 Python
Python面向对象基础入门之设置对象属性
2018/12/11 Python
Python读取JSON数据操作实例解析
2020/05/18 Python
法国滑雪假期的专家:Ski Planet
2019/11/02 全球购物
使用索引有什么好处
2016/07/27 面试题
编写一个 C 函数,该函数在一个字符串中找到可能的最长的子字符串,且该字符串是由同一字符组成的
2015/07/23 面试题
职员竞岗演讲稿
2014/05/14 职场文书
加薪申请报告范本
2015/05/15 职场文书
电影建国大业观后感
2015/06/01 职场文书
教师学期述职自我鉴定
2019/08/16 职场文书
Java生成读取条形码和二维码的简单示例
2021/07/09 Java/Android
Win11怎么把合并的任务栏分开 Win11任务栏合并分开教程
2022/04/06 数码科技
Nginx安装配置详解
2022/06/25 Servers