React Native探索(五)使用fetch进行网络请求
2017-06-07 00:13
507 查看
相关文章
React Native探索系列
其中method用于定义请求的方法,这里不用写method也可以,fetch默认的method就是GET。fetch方法会返回一个Promise对象,这个Promise对象中包含了响应数据response,也就是注释1处的response参数。在注释1处调用then方法将response打印在控制台Console中,then方法同样也会返回Promise对象,Promise对象可以进行链式调用,这样就可以通过多次调用then方法对响应数据进行处理。在注释2处通过catch方法来处理请求网络错误的情况。
除了上面这一种写法,我们还可以使用Request,如下所示。
我们先创建了Request对象,并对它进行设置,最后交给fetch处理。
为了验证fetch的get请求,需要添加触发get请求的代码逻辑,如下所示。
这里添加了一个TouchableHighlight,并定义了它的点击事件,一旦点击就会触发get方法请求网络。运行程序点击“get请求”,这时在控制台Console中就会显示回调的Response对象的数据,它包含了响应状态(status)、头部信息(headers)、请求的url(url)、返回的数据等信息。这次请求的响应状态status为200,返回的数据是JSON格式的,用Charles抓包来查看返回的JSON,如下图所示。
status (number) : HTTP请求的响应状态行。
statusText (String) : 服务器返回的状态报告。
ok (boolean) :如果返回200表示请求成功,则为true。
headers (Headers) : 返回头部信息。
url (String) :请求的地址。
Response对象还提供了多种方法:
formData():返回一个带有FormData的Promise。
json() :返回一个带有JSON对象的Promise。
text():返回一个带有文本的Promise。
clone() :复制一份response。
error():返回一个与网络相关的错误。
redirect():返回了一个可以重定向至某URL的response。
arrayBuffer():返回一个带有ArrayBuffer的Promise。
blob() : 返回一个带有Blob的Promise。
接下来对返回的Response进行简单的数据处理,如下所示。
访问淘宝IP地址库会返回JSON数据,因此在注释1处调用response的json方法,将response转换成一个带有JSON对象的Promise,也就是注释2处的jsonData。最后取出jsonData中数据并展示在Alert中,这里data是一个对象,如果它是一个对象数组我们可以这样获取它的数据:
点击“get请求”,效果如下所示。
在注释1处将method改为POST,在注释2处添加请求的body。与get请求类似,这里也添加一个触发事件来进行post请求,当点击“post请求”时,查看Charles抓包的请求的信息,如下图所示。
可以看到请求数据是一个GSON字符串,因为淘宝IP库并不支持此类型的POST请求,所以不会返回我们需要的地理信息数据。
首先创建一个FetchUtils.js,代码如下所示。
在FetchUtils中定义了send方法,对GET和POST请求做了区分处理,并在注释1处通过callback将响应数据response回调给调用者。
最后调用FetchUtils的send方法,分别进行GET和POST请求:
这样我们使用fetch访问网络时,只需要传入需要的参数,并对返回的jsonData 进行处理就可以了。
github源码
参考资料
Fetch API
fetch-issues-274
MDN Promise教程
ReactNative网络fetch数据并展示在listview中
React Native中的网络请求fetch和简单封装
在 JS 中使用 fetch 更加高效地进行网络请求
Using Fetch
欢迎关注我的微信公众号,第一时间获得博客更新提醒,以及更多成体系的Android相关原创技术干货。
扫一扫下方二维码或者长按识别二维码,即可关注。
React Native探索系列
前言
React Native可以使用多种方式来请求网络,比如fetch、XMLHttpRequest以及基于它们封装的框架,fetch可以说是替代XMLHttpRequest的产物,这一节我们就来学习fetch的基本用法。1.get请求
fetch API是基于 Promise 设计的,因此了解Promise也是有必要的,推荐阅读MDN Promise教程 。get请求访问淘宝IP库
我们先从最基础的get请求开始,get请求的地址为淘宝IP地址库,里面有访问接口的说明。请求代码如下所示。fetch('http://ip.taobao.com/service/getIpInfo.php?ip=59.108.51.32', { method: 'GET', headers: { 'Content-Type': 'application/json' } }).then((response) => {//1 console.log(response); }).catch((err) => {//2 console.error(err); });
其中method用于定义请求的方法,这里不用写method也可以,fetch默认的method就是GET。fetch方法会返回一个Promise对象,这个Promise对象中包含了响应数据response,也就是注释1处的response参数。在注释1处调用then方法将response打印在控制台Console中,then方法同样也会返回Promise对象,Promise对象可以进行链式调用,这样就可以通过多次调用then方法对响应数据进行处理。在注释2处通过catch方法来处理请求网络错误的情况。
除了上面这一种写法,我们还可以使用Request,如下所示。
let request = new Request('http://liuwangshu.cn', { method: 'GET', headers: ({ 'Content-Type': 'application/json' }) }); fetch(request).then((response) => { console.log(response); }).catch((err) => { console.error(err); });
我们先创建了Request对象,并对它进行设置,最后交给fetch处理。
为了验证fetch的get请求,需要添加触发get请求的代码逻辑,如下所示。
import React, {Component} from 'react'; import {AppRegistry, View, Text, StyleSheet, TouchableHighlight} from 'react-native'; class Fetch extends Component { render() { return ( <View style={styles.container}> <TouchableHighlight underlayColor='rgb(210,260,260)' style={{padding: 10, marginTop: 10, borderRadius: 5,}} onPress={this.get} > <Text >get请求</Text> </TouchableHighlight> </View> ); } get() { fetch('http://ip.taobao.com/service/getIpInfo.php?ip=59.108.51.32', { method: 'GET', }).then((response) => { console.log(response);//1 }).catch((err) => {//2 console.error(err); }); } } const styles = StyleSheet.create({ container: { alignItems: 'center', } }); AppRegistry.registerComponent('FetchSample', () => Fetch);
这里添加了一个TouchableHighlight,并定义了它的点击事件,一旦点击就会触发get方法请求网络。运行程序点击“get请求”,这时在控制台Console中就会显示回调的Response对象的数据,它包含了响应状态(status)、头部信息(headers)、请求的url(url)、返回的数据等信息。这次请求的响应状态status为200,返回的数据是JSON格式的,用Charles抓包来查看返回的JSON,如下图所示。
Response对象解析
Response对象中包含了多种属性:status (number) : HTTP请求的响应状态行。
statusText (String) : 服务器返回的状态报告。
ok (boolean) :如果返回200表示请求成功,则为true。
headers (Headers) : 返回头部信息。
url (String) :请求的地址。
Response对象还提供了多种方法:
formData():返回一个带有FormData的Promise。
json() :返回一个带有JSON对象的Promise。
text():返回一个带有文本的Promise。
clone() :复制一份response。
error():返回一个与网络相关的错误。
redirect():返回了一个可以重定向至某URL的response。
arrayBuffer():返回一个带有ArrayBuffer的Promise。
blob() : 返回一个带有Blob的Promise。
接下来对返回的Response进行简单的数据处理,如下所示。
get() { fetch('http://ip.taobao.com/service/getIpInfo.php?ip=59.108.23.12', { method: 'GET', headers: { 'Content-Type': 'application/json' } }).then((response) => response.json())//1 .then((jsonData) => {//2 let country = jsonData.data.country; let city = jsonData.data.city; alert("country:" + country + "-------city:" + city); }); }
访问淘宝IP地址库会返回JSON数据,因此在注释1处调用response的json方法,将response转换成一个带有JSON对象的Promise,也就是注释2处的jsonData。最后取出jsonData中数据并展示在Alert中,这里data是一个对象,如果它是一个对象数组我们可以这样获取它的数据:
let country=jsonData.data[0].country;
点击“get请求”,效果如下所示。
2.post请求
post请求的代码如下所示。post() { fetch('http://ip.taobao.com/service/getIpInfo.php', { method: 'POST',//1 headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({//2 'ip': '59.108.23.12' }) }).then((response) => response.json()) .then((jsonData) => { let country = jsonData.data.country; let city = jsonData.data.city; alert("country:" + country + "-------city:" + city); }); }
在注释1处将method改为POST,在注释2处添加请求的body。与get请求类似,这里也添加一个触发事件来进行post请求,当点击“post请求”时,查看Charles抓包的请求的信息,如下图所示。
可以看到请求数据是一个GSON字符串,因为淘宝IP库并不支持此类型的POST请求,所以不会返回我们需要的地理信息数据。
3.简单封装fetch
如果每次请求网络都要设定method、headers、body等数据,同时还要多次调用then方法对返回数据进行处理,显然很麻烦,下面就对上面例子中的get和post请求做一个简单的封装。首先创建一个FetchUtils.js,代码如下所示。
import React, {Component} from 'react'; class FetchUtils extends React.Component { static send(method, url, data, callback) { let request; if (method === 'get') { request = new Request(url, { method: 'GET', headers: ({ 'Content-Type': 'application/json' }) }); } else if (method === 'post') { request = new Request(url, { method: 'POST', headers: ({ 'Content-Type': 'application/json' }), body: JSON.stringify(data) }); } fetch(request).then((response) => response.json()) .then((jsonData) => { callback(jsonData);//1 }); } } module.exports = FetchUtils;
在FetchUtils中定义了send方法,对GET和POST请求做了区分处理,并在注释1处通过callback将响应数据response回调给调用者。
最后调用FetchUtils的send方法,分别进行GET和POST请求:
let FetchUtils=require('./FetchUtils'); ... sendGet() { FetchUtils.send('get', 'http://ip.taobao.com/service/getIpInfo.php?ip=59.108.23.16', '', jsonData => { let country = jsonData.data.country; let city = jsonData.data.city; alert("country:" + country + "-------city:" + city); }) } sendPost() { FetchUtils.send('post', 'http://ip.taobao.com/service/getIpInfo.php', {'ip': '59.108.23.16'}, jsonData => { let country = jsonData.data.country; let city = jsonData.data.city; alert("country:" + country + "-------city:" + city); }) }
这样我们使用fetch访问网络时,只需要传入需要的参数,并对返回的jsonData 进行处理就可以了。
github源码
参考资料
Fetch API
fetch-issues-274
MDN Promise教程
ReactNative网络fetch数据并展示在listview中
React Native中的网络请求fetch和简单封装
在 JS 中使用 fetch 更加高效地进行网络请求
Using Fetch
欢迎关注我的微信公众号,第一时间获得博客更新提醒,以及更多成体系的Android相关原创技术干货。
扫一扫下方二维码或者长按识别二维码,即可关注。
相关文章推荐
- React Native中的网络请求fetch和简单封装
- 【React Native开发】 - fetch网络请求
- 在 JS 中使用 fetch 更加高效地进行网络请求
- react-native网络请求Fetch中遇到的坑
- React-Native学习笔记之:Fetch网络请求
- ReactNative基础(四)了解ListView的使用、实现GridView效果、编写一个真实网络请求案例
- React Native中的网络请求fetch和简单封装
- React Native中的网络请求fetch和简单封装
- react native 使用fetch进行网络请求(https),解决SSLHandshake问题,以及怎样进行二次封装
- 在 JS 中使用 fetch 更加高效地进行网络请求
- React-Native 之 网络请求 fetch
- React Native 网络请求封装:使用Promise封装fetch请求
- React Native 网络请求封装:使用Promise封装fetch请求
- 在 JS 中使用 fetch 更加高效地进行网络请求
- React Native从零开始(七)Fetch网络请求
- ReactNative踩坑日志——使用async/await语法解决网络请求的异步导致的指令执行顺序错乱问题
- 在 JS 中使用 fetch 更加高效地进行网络请求
- 在 JS 中使用 fetch 更加高效地进行网络请求
- react-native(Fetch网络请求数据)
- RN中使用fetch进行网络请求的几种场景和姿势