React-Native中网络请求的总结

原创 2016年03月17日 19:50:12

转载请标明出处:http://blog.csdn.net/u010046908/article/details/50916511本文出自:【李东的博客】

前几篇文章写了关于React-Native中自己遇到的this的问题和组件嵌套的问题做了总结。今天要写的是关于React-Native中的网络请求的实现。

1.get的请求方式的实现

 //get请求
  static  get(url, callback) {
      fetch(url)
      .then((response) => response.text())
      .then((responseText) => {
        callback(JSON.parse(responseText));
      }).done();
    }

get请求很是简单基本就是这样,再不多说了。

2.Post请求的实现

post请求我在这里写了两种形式,一种是Content-Type为application/json的形式,另一种是Content-Type为application/x-www-form-urlencoded。

2.1 application/json的形式

static postJson (url, data, callback) {
    var fetchOptions = {
      method: 'POST',
      headers: {
        'Accept': 'application/json',
        //json形式
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(data)
    };

  fetch(url, fetchOptions)
    .then((response) => response.text())
    .then((responseText) => {
      callback(JSON.parse(responseText));
    }).done();
  }

2.2 application/x-www-form-urlencoded的形式

 static  postFrom(url, data, callback) {
      var fetchOptions = {
        method: 'POST',
        headers: {
          'Accept': 'application/json',
          //表单
          'Content-Type': 'application/x-www-form-urlencoded'
        },
        body:'data='+data+''
      };

      fetch(url, fetchOptions)
      .then((response) => response.text())
      .then((responseText) => {
        callback(JSON.parse(responseText));
      }).done();
    }

3 NetUtil的实现

/**
 * NetUitl 网络请求的实现
 * @author lidong
 * @date 2016-03-17 
 * https://github.com/facebook/react-native
 */
'use strict';
import React, {
  Component,
} from 'react-native';

class NetUitl extends React.Component {

  //post请求
  /**
  *url :请求地址
  *data:参数
  *callback:回调函数
  */
  static  postFrom(url, data, callback) {
      var fetchOptions = {
        method: 'POST',
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/x-www-form-urlencoded'
        },
        body:'data='+data+''//这里我参数只有一个data,大家可以还有更多的参数
      };

      fetch(url, fetchOptions)
      .then((response) => response.text())
      .then((responseText) => {
        callback(JSON.parse(responseText));
      }).done();
    }
  /**
  *url :请求地址
  *data:参数(Json对象)
  *callback:回调函数
  */
static postJson (url, data, callback) {
    var fetchOptions = {
      method: 'POST',
      headers: {
        'Accept': 'application/json',
        //json形式
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(data)
    };

  fetch(url, fetchOptions)
    .then((response) => response.text())
    .then((responseText) => {
      callback(JSON.parse(responseText));
    }).done();
  }
  //get请求
  /**
  *url :请求地址
  *callback:回调函数
  */
  static  get(url, callback) {
      fetch(url)
      .then((response) => response.text())
      .then((responseText) => {
        callback(JSON.parse(responseText));
      }).done();
    }

}

module.exports = NetUitl;

4. 调用方法:

4.1 get的调用方法:

NetUtil.get("http://v.juhe.cn/weather/index?format="+format+"&key="+key+"&cityname="+cityname,function  (ret) {
      //回调的结果处理;
   })

4.2 postJson的调用

let data={'username':'123','password':'123456','token':'HSHSIHIFAUINNSNAFKSKJFNKFKFNFNFNK'};
NetUitl.postJson(url,,function (set){
    switch (set.retCode) {
      case "0000":
          alert("登录成功");
        break;
     case "0001":
        alert("登录失败");
          break;
      default:
      alert("登录失败");
    }
  });

4.3postFrom的调用

  let url = Global.LOGIN;
  let map = new Map()
  map.set('username',phone);
  map.set('password',pwd);
  let sx = Util.mapToJson(Util.tokenAndKo(map));
  NetUitl.postFrom(url,sx,function (set){
    switch (set.retCode) {
      case "0000":
          alert("登录成功");
        break;
     case "0001":
        alert("登录失败");
          break;
      default:
      alert("登录失败");
    }
  });

以上就是React-Native中的网络请求的实现,欢迎大家来共同学习,有问题可以联系QQ:1561281670

这里是我的一个学习React-Native的开源库:点击这里

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

React Native 采用Fetch方式发送跨域POST请求

Fetch以后是趋势,势必要取代传统的Ajax,而且RN框架支持Fetch。下面仅做了一个跨域请求的例子,在本域请求是一样的,而且更简单一些。客户端环境用的是RN写的一个页面,也可以用浏览器的cons...

RN实战项目网络请求封装

RN实战项目网络请求封装 网络相关学习文档,参考 RN中文网文档 RN中主要是用fetch来完成异步网络请求的,传统的ajax慢慢的会被fetch替代 RN中文网fetch API ...

react-native 网络请求,超时总结

react-native 网络请求总结参考:[1] http://blog.csdn.net/u010046908/article/details/50916511 [2] https://git...
  • cdkd123
  • cdkd123
  • 2017年05月24日 17:04
  • 1364

React-Native网络请求加载界面

React-Native网络请求加载界面  当一个界面在从网络获取数据时,由于网速因素,需要个等待界面,这时候我们必须展示个友好界面,就是加载界面。这个加载动画可以使用react-native-spi...

react native 判断网络状态

转:http://blog.csdn.net/yangysng07/article/details/51583604 React Native 获取网络状态 NetworkInfo Reac...

React Native第一个Demo(2)网络获取数据和ListView

继续上一篇React Native第一个Demo(1) 1、网络获取真实数据 1.定义变量 把下面url变量放在index.ios.js顶部,通常是要放在 imports下面。 var R...

React Native Get,Post请求

React Native为我们提供了fetch框架进行网络请求。Fetch请求static async request(url, method, body, params) { DEB...

React Native网络请求(Frisbee网络框架)

Frisbee介绍这是GitHub上JavaScript一款网络请求框架,使用方便,很大程度简化了react原始的网络请求方式,仓库地址:https://github.com/joinspontane...

React-Native中网络请求的总结

前几篇文章写了关于React-Native中自己遇到的this的问题和组件嵌套的问题做了总结。今天要写的是关于React-Native中的网络请求的实现。 1.get的请求方式的实现 //g...

《React-Native系列》31、 Fetch发送POST请求的坑与解决方案

我们在请求http接口时候,通常都会使用get和post的方式,针对表单提交这类的请求,我们通常采用post方式。那么在RN中的Fetch API中post提交有哪些坑呢?让我们撸起来。我们先来说说S...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:React-Native中网络请求的总结
举报原因:
原因补充:

(最多只允许输入30个字)