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网络请求

React Native从零开始(七)Fetch网络请求 先上效果图 因为网络请求比较简单,所以我们直接先开始看语法然后看这个GET和POST不同的实现就好。 一、...
  • SuperBigLw
  • SuperBigLw
  • 2017年01月16日 15:07
  • 5488

React Native 网络请求封装:使用Promise封装fetch请求

React Native中虽然也内置了XMLHttpRequest 网络请求API(也就是俗称的ajax),但XMLHttpRequest 是一个设计粗糙的 API,不符合职责分离的原则,配置和调用方...
  • Cy_Shay
  • Cy_Shay
  • 2017年10月20日 11:17
  • 358

React Native 网络请求封装:使用Promise封装fetch请求

React Native中虽然也内置了XMLHttpRequest 网络请求API(也就是俗称的ajax),但XMLHttpRequest 是一个设计粗糙的 API,不符合职责分离的原则,配置和调...
  • sinat_17775997
  • sinat_17775997
  • 2017年05月08日 17:36
  • 6280

ReactNative官网例子练习(三)——请求网络

要想完成一个APP,网络请求获取后台的数据基本上是必须的。无论是咋Android中还是在ios中都是非常重要的部分ReactNative中当然也不例外。 React Native提供了和web标准一...
  • mingyunxiaohai
  • mingyunxiaohai
  • 2016年09月02日 14:21
  • 4504

React Native网络请求学习笔记(Android版本)

概述 示例 效果 js端代码 注意事项 实现原理 原理概述 js端代码分析待完善 JNI端代码分析待完善 android端代码分析 代码下载地址 参考资料 概述 这篇文章首先会...
  • u012227177
  • u012227177
  • 2017年03月10日 14:46
  • 4078

React Native中的网络请求fetch和简单封装

React Native中的网络请求fetch使用方法最为简单,但却可以实现大多数的网络请求,需要了解更多的可以访问: https://segmentfault.com/a/1190000003...
  • sinat_17775997
  • sinat_17775997
  • 2016年12月21日 14:40
  • 2356

ReactNative-网络请求

ReactNative网络请求这部分很简单但也很重要只要知道web页面网络请求,这边也完全适应。这里通过代码家API结合ListView的使用来简单试用下fetch的get请求。get请求先看效果图 ...
  • u014360817
  • u014360817
  • 2016年09月06日 10:13
  • 4009

react native 学习笔记----网络

React Native提供了和web标准一致的Fetch API,用于满足开发者访问网络的需求。 发起网络请求 要从任意地址获取内容的话,只需简单地将网址作为参数传递给fetch方法即可:...
  • wxq888
  • wxq888
  • 2016年08月31日 21:25
  • 1377

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

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

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

Fetch以后是趋势,势必要取代传统的Ajax,而且RN框架支持Fetch。下面仅做了一个跨域请求的例子,在本域请求是一样的,而且更简单一些。客户端环境用的是RN写的一个页面,也可以用浏览器的cons...
  • u012620506
  • u012620506
  • 2016年08月28日 16:05
  • 18572
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:React-Native中网络请求的总结
举报原因:
原因补充:

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