React-Native中网络请求的总结-白红宇

转载请标明出处:本文出自:【李东的博客】

前几篇文章写了关于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的开源库：