native数据类型 react_react-native中的请求数据
很多移动应用都需要从远程地址中获取数据或资源。你可能需要给某个 REST API 发起 POST 请求以提交用户数据,又或者可能仅仅需要从某个服务器上获取一些静态内容。
使用 Fetch
React Native 提供了和 web 标准一致的Fetch API,用于满足开发者访问网络的需求。
发起请求
要从任意地址获取内容的话,只需简单地将网址作为参数传递给 fetch 方法即可(fetch 这个词本身也就是获取的意思):
fetch('https://mywebsite.com/mydata.json');
Fetch 还有可选的第二个参数,可以用来定制 HTTP 请求一些参数。你可以指定 header 参数,
或是指定使用 POST 方法,又或是提交数据等等:
fetch('https://mywebsite.com/endpoint/', {
method: 'POST',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({
firstParam: 'yourValue',
secondParam: 'yourOtherValue',
}),
});
提交数据的格式关键取决于 headers 中的Content-Type。Content-Type有很多种,对应 body 的格式也有区别。到底应该采用什么样的Content-Type取决于服务器端,
所以请和服务器端的开发人员沟通确定清楚。常用的'Content-Type'除了上面的'application/json',还有传统的网页表单形式,示例如下:
fetch('https://mywebsite.com/endpoint/', {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
body: 'key1=value1&key2=value2',
});
注意:使用 Chrome 调试目前无法观测到 React Native 中的网络请求,你可以使用第三方的react-native-debugger来进行观测。
我暂时还没有到使用react-native-debugger的时候,到了再写一篇关于这个使用的博客
处理服务器的响应数据
上面的例子演示了如何发起请求。很多情况下,你还需要处理服务器回复的数据。
网络请求天然是一种异步操作(译注:同样的还有asyncstorage,请不要再问怎样把异步变成同步!无论在语法层面怎么折腾,
、它们的异步本质是无法变更的。异步的意思是你应该趁这个时间去做点别的事情,比如显示 loading,而不是让界面卡住傻等)。
Fetch 方法会返回一个Promise,这种模式可以简化异步风格的代码。
function getMoviesFromApiAsync() {
return fetch('https://facebook.github.io/react-native/movies.json')
.then((response) => response.json())
.then((responseJson) => {
return responseJson.movies;
})
.catch((error) => {
console.error(error);
});
}
你也可以在 React Native 应用中使用 ES2017 标准中的async/await 语法:
// 注意这个方法前面有async关键字
async function getMoviesFromApi() {
try {
// 注意这里的await语句,其所在的函数必须有async关键字声明
let response = await fetch(
'https://facebook.github.io/react-native/movies.json',
);
let responseJson = await response.json();
return responseJson.movies;
} catch (error) {
console.error(error);
}
}
别忘了 catch 住fetch可能抛出的异常,否则出错时你可能看不到任何提示。
下面是使用fetch的一个小例子
import React from 'react';
import { FlatList, ActivityIndicator, Text, View } from 'react-native';
export default class FetchExample extends React.Component {
constructor(props){
super(props);
this.state = { isLoading: true }
}
componentDidMount() {
return fetch('https://facebook.github.io/react-native/movies.json')
.then((response) => response.json())
.then((responseJson) => {
this.setState({
isLoading: false,
dataSource: responseJson.movies,
}, function(){
});
})
.catch((error) =>{
console.error(error);
});
}
render() {
if(this.state.isLoading){
return(
)
}
return(
data={this.state.dataSource}
renderItem={({item}) => {item.title},{item.releaseYear}}
keyExtractor={(item, index) => item.id}
/>
)
}
}
我们在模拟器上面可以看到
模拟器上的数据,返回的就是我们请求并展示的
我们可以在浏览器看看到我们请求的数据类型
使用其他的网络库
React Native 中已经内置了XMLHttpRequest API(也就是俗称的 ajax)。一些基于 XMLHttpRequest 封装的第三方库也可以使用,
例如frisbee或是axios等。但注意不能使用 jQuery,因为 jQuery 中还使用了很多浏览器中才有而 RN 中没有的东西(所以也不是所有 web 中的 ajax 库都可以直接使用)。
var request = new XMLHttpRequest();
request.onreadystatechange = (e) => {
if (request.readyState !== 4) {
return;
}
if (request.status === 200) {
console.log('success', request.responseText);
} else {
console.warn('error');
}
};
request.open('GET', 'https://mywebsite.com/endpoint/');
request.send();
需要注意的是,安全机制与网页环境有所不同:在应用中你可以访问任何网站,没有跨域的限制。
WebSocket 支持
React Native 还支持WebSocket,这种协议可以在单个 TCP 连接上提供全双工的通信信道。
var ws = new WebSocket('ws://host.com/path');
ws.onopen = () => {
// connection opened
ws.send('something'); // send a message
};
ws.onmessage = (e) => {
// a message was received
console.log(e.data);
};
ws.onerror = (e) => {
// an error occurred
console.log(e.message);
};
ws.onclose = (e) => {
// connection closed
console.log(e.code, e.reason);
};
native数据类型 react_react-native中的请求数据相关推荐
- angular开发中对请求数据层的封装
代码地址如下: http://www.demodashi.com/demo/11481.html 一.本章节仅仅是对angular4项目开发中数据请求封装到model中 仅仅是在项目angular4项 ...
- Webservice开发之xsd中开发请求数据的响应接口
场景 SpringBoot整合spring-ws开发webservice接口(全流程详细教程)参照: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article ...
- python查看dataframe数据类型_python pandas中DataFrame类型数据操作函数的方法
python数据分析工具pandas中DataFrame和Series作为主要的数据结构. 本文主要是介绍如何对DataFrame数据进行操作并结合一个实例测试操作函数. 1)查看DataFrame数 ...
- c语言中其不同数据类型,C语言中不同类型数据间的转换
§2.4 不同类型数据间的转换 2.4.1 基本概念 C语言允许数据值从一种类型转换成另一种类型.数据类型的转换有如下三种基本形式: (1)同一类型但长度不同的数据间的转换. (2)定点方式与浮点方式 ...
- vue异步数据 报错_vue中异步请求数据,异步请求还没完成,文件就执行了就会报错,怎么解决?...
vue中,axios异步加载数据,但是有的文件里面需要用到异步拿到的数据,数据还没拿到,文件已经执行了,这时候数据就是空,就会报错,这个问题怎么解决? 具体表现: 我这边vue项目是进入页面的时候会调 ...
- 网络通信中关于请求数据、断点续传和写入本地文件
- (void)viewDidLoad { [super viewDidLoad]; NSLog(@"%@",NSHomeDirectory()); //取得已下载数据大小 NSU ...
- Controller中请求数据的方式
1.路径变量 url中定义(变量名)作为占位符,使用@PathVariable对应变量 2.@RequestParam 可以获取url中的请求数据 请求数据类型为x-www-from-urlencod ...
- jeesite如何已生成数据的数据源_如何在postman中自动生成接口请求数据,这个功能你需要知道,可结合浏览器和两大抓包工具使用...
在做接口调试或测试时,请求中的每个参数都要按照接口文档填写到postman的对应位置中,很是麻烦.那是否有这样一个功能?可以帮我们自动生成接口数据,无需修改,直接发送请求就可以呢. 这里面我们需要借助 ...
- SpringMVC_4.请求数据
请求数据 说明: SpringMVC提供了从请求对象中获取请求数据的 两种 方式 : 自动获取 和 手动获取 . 注意 : 若注入的数据乱码或类型不匹配,会导致注入失败.[性别乱码, ...
最新文章
- 前沿技术 | 自动机器学习综述
- 详解Android实现全屏正确方法
- header+php+xiazai_php使用header函数实现文件下载
- 退居二线VS在深圳发展,一个十年IT人的选择之难
- java this关键字的使用_Java this 关键字的使用方法详解
- CString,string,char*,比较
- ascii码与键盘代码的区别
- ubuntu E: Could not get lock /var/lib/dpkg/lock - open
- 微信消息推送之过长的文本消息拆分踩坑
- html 图片轮播渐变,简单的jquery图片轮播渐变
- python zip 压缩文件夹
- Python +Tesseract白嫖武动乾坤番外篇最终章文字版
- ROS moveit cartesian_demo 机械臂笛卡尔空间路径速度限制
- tomcat 报错 Status 500 - Mapper method ‘xxxxx‘ has an unsupported return type: class xxx
- 任务调度的合理性 (25 分)
- Metasploit的使用-入门
- 唐澳华的亚索有错吗?
- 算法训练-二进制加法
- # SOM-算法原理
- ORA-8102报错的修复方式
热门文章
- 贝塞尔曲线 花束直播点赞效果
- 数据库复习1——数据库体系结构和关系系统
- 直接运行PowerShell脚本
- sublime tex创建可服用的片段
- Java中Split函数的用法技巧
- java反射的效率有多高
- Jakarta Commons:巧用类和组件1
- cmake 头文件 库文件 路径搜索 CMAKE_INCLUDE_PATH CMAKE_LIBRARY_PATH
- linux lsof 已打开的文件列表
- python3 pip 报错 pip is configured with locations that require TLS/SSL