react native学习笔记8——网络请求
|
react native提供ajax和fetch的网络请求的方式，ajax即XMLHttpRequest (XHR)，是一种传统的网络请求的方式，其配置和调用方式比较混乱，不符合职责分离的原则，基于事件的异步模型的写法，没有采用Promise的fetch简洁。因此本文重点介绍fetch进行网络请求的用法， 关于ajax只介绍其基本使用方法。 fetchfetch的基本格式为： fetch(url,fetchOptions) //发起网络请求
.then((response) => {
// 数据解析方式
})
.then((responseData) => {
// 获取到的数据处理
})
.catch((error) => {
// 错误处理
})
.done();
发起网络请求上述示例的第一行 fetch('https://mywebsite.com/mydata.json')
此外fetch还有可选的第二个参数，即示例中的 fetch('https://mywebsite.com/endpoint/',{
method: 'POST',headers: {
'Content-Type': 'application/x-www-form-urlencoded',},body:'key1=value1&key2=value2',})
fetchOptions是一个对象，它包含了如下可选参数的设置:
参数解释： headers: {
'Accept': 'application/json',//希望接受的数据类型为json
'Content-Type': 'application/json',//发送的实体数据的数据类型为json
}
2.body的传入参数有三种方式： 方式一: 不推荐，可能在某些服务器无法识别。 JSON.stringify({key1:value1,key2:value2,...})
方式二: 传统的form格式 'key1=value1&key2=value2'
方式三: 使用FormData let formData = new FormData();
formData.append("key1","value1");
formData.append("key2","value2");
3.mode：控制是否允许跨域：
如下是一个采用post方式的网络请求： let formData = new FormData();
formData.append("key1","value1");
formData.append("key2","value2");
fetch(url,{
method: "POST",headers: {
"Content-Type": "application/x-www-form-urlencoded"
},body:formData,})
处理服务器的响应数据前面介绍了发起请求，接下来介绍处理服务器的响应数据。fetch由于采用了promise的异步处理方式，因此在写网络请求这种异步操作特别简洁顺滑。 fetch('https://facebook.github.io/react-native/movies.json') //发起网络请求
.then((response) => response.json()) // 数据解析方式
.then((responseJson) => { // 获取到的数据处理
return responseJson.movies;
})
.catch((error) => { // 错误处理
console.error(error);
});
ES6箭头的写法类似于android开发中的Lambda表达式，将异步的操作以同步的形式展现出来，但这里我们要注意，不管语法上怎么改变，它们的异步本质是无法变更的，这仍是一个异步操作。
示例代码如下： const url = 'https://api.douban.com/v2/book/isbn/9787302315582';
fetch(url)
.then((response)=>response.json())
.then(
(responseJson)=> {
let bookinfo = responseJson;
console.log(bookinfo);
}
)
.catch((error)=>console.error(error))
实例下面结合前面介绍的生命周期及State、Props的知识，演示一个获取网络数据资源以列表的形式显示出来的实例。还是老规矩，先把页面的框架写出来。 1.渲染加载中的界面在获取真实的网络数据之前，我们的界面首先要显示一个加载中Text，并设置其样式 import React,{Component} from "react";
import {
Text,Image,View,StyleSheet,}from 'react-native';
export default class FetchNetDataDemo extends Component {
render() {
return (
<Text style={Styles.loading}>加载中...</Text> ) } } const Styles = StyleSheet.create({ loading:{ textAlign: "center",fontSize: 16,padding: 20 },})
2.获取网络数据下面将通过豆瓣提供的api获取网络上一个真实的书本信息。在上一节组件的生命周期中介绍过，组件初始化阶段由 constructor(props) {
super(props);
this.state = {
bookinfo: null
};
}
组件在渲染 fetchBookinfoList() {
const url = 'https://api.douban.com/v2/book/isbn/9787302315582';
fetch(url)
.then((response)=>response.json())
.then(
(responseJson)=> {
let bookinfo = responseJson;
console.log(bookinfo);
this.setState({
bookinfo: bookinfo,})
}
)
.catch((error)=>console.error(error))
}
componentDidMount() {
this.fetchBookinfoList();
}
3.将获取到的网络数据显示在界面上修改 render() {
let item = this.state.bookinfo;
if (item) {
return this.renderItem(item);
}else {
return (
<Text style={Styles.loading}>加载中...</Text> ) } } renderItem(item) { return ( <View style={Styles.container}> <Image style={Styles.image_book} source={{uri: item.image}}/> <View style={Styles.right}> <Text style={Styles.text_title}>{item.title}</Text> <Text style={Styles.text_price}>{item.publisher}</Text> </View> </View> ) }
重新刷新，首先会看到”加载中…”提示语直到网络请求数据加载完成。 完整代码示例： import React,}from 'react-native';
export default class FetchNetDataDemo extends Component {
constructor(props) {
super(props);
this.state = {
bookinfo: null
};
}
//发起网络请求，获取数据
fetchBookinfoList() {
const url = 'https://api.douban.com/v2/book/isbn/9787302315582';
fetch(url)
.then((response)=>response.json())
.then(
(responseJson)=> {
let bookinfo = responseJson;
console.log(bookinfo);
this.setState({
bookinfo: bookinfo,})
}
)
.catch((error)=>console.error(error))
}
//页面渲染完成后会调用该方法
componentDidMount() {
this.fetchBookinfoList();
}
render() {
let item = this.state.bookinfo;
if (item) {
return this.renderItem(item);
}else {
return (
<Text style={Styles.loading}>加载中...</Text> ) } } //绘制展示数据的界面 renderItem(item) { return ( <View style={Styles.container}> <Image style={Styles.image_book} source={{uri: item.image}}/> <View style={Styles.right}> <Text style={Styles.text_title}>{item.title}</Text> <Text style={Styles.text_price}>{item.publisher}</Text> </View> </View> ) } } const Styles = StyleSheet.create({ container: { backgroundColor: "white",height: 100,flexDirection: "row",alignItems: "center" },right: { flexDirection: "column",height: 80,flexGrow: 1,loading:{ textAlign: "center",image_book: { width: 80,resizeMode: "cover",marginHorizontal: 12 },text_title: { color: "black",lineHeight: 24,text_price: { color: "gray",fontSize: 12,lineHeight: 20,})
ajaxXMLHttpRequest 即俗称的ajax，React Native 中 XMLHttpRequest 的实现几乎和 Web 是一样的，不同的是在React Native 中XMLHttpRequest API不存在跨域的限制。其写法如下： let request = new XMLHttpRequest();
request.onreadystatechange = (e) => {
if (request.readyState !== 4) {
return;
}
if (request.status === 200) {
console.log(request.responseText);
}
};
request.open('GET','http://www.weather.com.cn/data/cityinfo/101010100.html');
request.send();
样例代码: import React,{ Component } from 'react';
import {
AppRegistry,Text,View
} from 'react-native';
//默认应用的容器组件
export default class XMLHttpRequestDemo extends Component {
//构造函数
constructor(props) {
super(props);
this.state = {
responseText: "请求网络数据"
};
}
//渲染
render() {
return (
<View style={styles.container}> <Text style={styles.item}>{this.state.responseText}</Text> </View> ); } componentDidMount() { this.doXMLHttpRequest(); } //使用XMLHttpRequest请求数据 doXMLHttpRequest(){ let request = new XMLHttpRequest(); request.onreadystatechange = (e) => { if (request.readyState !== 4) { return; } if (request.status === 200) { this.setState({responseText: request.responseText}) console.log(request.responseText); } else { alert("请求失败！"); } }; request.open('GET','http://www.weather.com.cn/data/cityinfo/101010100.html'); request.send(); } } //样式定义 const styles = StyleSheet.create({ container:{ flex: 1,marginTop:25 },item:{ textAlign: "center",});
本文的所有源码在这里 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |