React Native 入门(十二) - Fetch 网络请求

前端之家收集整理的这篇文章主要介绍了React Native 入门(十二) - Fetch 网络请求前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

当前 RN 版本:0.50 @H_301_3@ 操作环境:Windows 10

文章同步自简书:http://www.jianshu.com/p/b3c1b4298d18

不知不觉中,RN 0.50 已经发布了。两个多礼拜没有接触 RN 了,已经忘得差不多了,赶紧再恶补一下写写博客,否则真的会忘得一干二净。这篇文章简单介绍 RN 中的网络请求。

使用 Fetch

Fetch 使用起来很简单,只需要简单的一行代码就可以实现网络请求:

  1. fetch(url)

它还可以有第二个可选的参数,用来进行请求的配置。比如指定 header 参数、指定 GET 或 POST 方法、提交表单数据等等。可以参考 Fetch请求文档 来查看所有可用的参数。

  1. var options = {
  2. method: 'POST',headers: {
  3. 'Accept': 'application/json','Content-Type': 'application/json',},body: JSON.stringify({
  4. firstParam: 'yourValue',secondParam: 'yourOtherValue',})
  5. };
  6.  
  7. fetch(url,options);

发起请求之后要对请求到的数据进行处理, Fetch 使用链式调用的方式来进行操作,格式如下:

  1. fetch('https://facebook.github.io/react-native/movies.json')
  2. .then((response) => { // 获取到网络请求返回的对象 response.json() }) .then((result) => { // 网络请求成功,处理请求到的数据 }) .catch((error) => { // 网络请求失败,处理错误信息 });

你还可以使用 ES7 标准中的 async/await 语法:

  1. // 注意这个方法前面有 async 关键字
  2. async getMoviesFromApi() {
  3. try {
  4. // 注意这里的 await 语句,其所在的函数必须有 async 关键字声明
  5. let response = await fetch('https://facebook.github.io/react-native/movies.json');
  6. let result = await response.json();
  7. return responseJson.movies;
  8. } catch(error) {
  9. console.error(error);
  10. }
  11. }

Promise 封装

Promise 是专门用来处理异步请求的。由于我对它也不是很熟悉,大家可以在网上查询更多的资料。

我们写个工具类 HttpUtil.js 并在其中利用 Promise 封装 getpost 方法代码参考如下。

  1. export default class HttpUtil {
  2.  
  3. /**
  4. * 利用 Promise 的 get 方式请求
  5. * @param url
  6. * @returns {Promise}
  7. */
  8. static get(url) {
  9. return new Promise((resolve,reject) => { fetch(url) .then(response => response.json()) .then(result => resolve(result)) .catch(error => reject(error)) }) } /** * 利用 Promisepost 方式请求 * @param url * @param params * @returns {Promise} */ static post(url,params) { return new Promise((resolve,reject) => { fetch(url,{ method: 'POST',headers: { 'Accept': 'application/json','Content-Type': 'application/json' },body: JSON.stringify(params) }) .then(response => response.json()) .then(result => resolve(result)) .catch(error => reject(error)) }) } }

接下来我们需要进行网络请求的时候就可以直接使用了。

  1. export default class FetchTest extends Component {
  2.  
  3. constructor(props) {
  4. super(props);
  5. this.state = {
  6. text: '返回结果'
  7. }
  8. }
  9.  
  10. get() {
  11. HttpUtil.get('https://facebook.github.io/react-native/movies.json')
  12. .then(result => this.setState({text: JSON.stringify(result)}))
  13. .catch(error => console.error(error))
  14. }
  15.  
  16. post() {
  17. var data = {username: 'ayuhani',password: '123456'}
  18. HttpUtil.post('http://rapapi.org/mockjsdata/26411/ayuhani/post',data)
  19. .then(result => this.setState({text: JSON.stringify(result)}))
  20. .catch(error => console.error(error))
  21. }
  22.  
  23. render() {
  24. return <View style={{flex: 1}}>
  25. <View style={{margin: 16}}>
  26. <Button
  27. title={'get'}
  28. onPress={() => this.get()}
  29. />
  30. <Button
  31. title={'post'}
  32. onPress={() => this.post()}
  33. />
  34. <Text style={{marginTop: 16}}>{this.state.text}</Text>
  35. </View>
  36. </View>
  37. }
  38. }

看一下运行效果

代码确实简洁了不少,当然应该还有更好的封装方法,以后学到了再来分享吧。

猜你在找的React相关文章