React Native中的网络请求fetch和简单封装
React Native中的网络请求fetch使用方法最为简单,但却可以实现大多数的网络请求,需要了解更多的可以访问:
https://segmentfault.com/a/1190000003810652
/**
* Sample React Native App
* https://github.com/facebook/react-native
* 周少停 2016-09-28
* fetch请求数据 header 参数 response转json 请求方式
*/ import React, {Component} from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
TouchableOpacity
} from 'react-native'; var Project = React.createClass({
render() {
return (
<View style={styles.container}>
<TouchableOpacity onPress={this.ssss}>
<Text>访问</Text>
</TouchableOpacity>
</View>
);
},
ssss(){
fetch('http://www.pintasty.cn/home/homedynamic', {
method: 'POST',
headers: { //header
'token': 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VySWQiOiJVLTliZGJhNjBjMjZiMDQwZGJiMTMwYWRhYWVlN2FkYTg2IiwiZXhwaXJhdGlvblRpbWUiOjE0NzUxMTg4ODU4NTd9.ImbjXRFYDNYFPtK2_Q2jffb2rc5DhTZSZopHG_DAuNU'
},
body: JSON.stringify({ //参数
'start': '0',
'limit': '20',
'isNeedCategory': true,
'lastRefreshTime': '2016-09-25 09:45:12'
})
})
.then((response) => response.json()) //把response转为json
.then((responseData) => { // 上面的转好的json
alert(responseData); /
// console.log(responseData);
})
.catch((error)=> {
alert('错误了');
})
}
}); const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF'
}
}); AppRegistry.registerComponent('Project', () => Project);
fetch是人家已经封装好,再度封装只是基于自己项目进行的封装,这里只是基于公司项目实现一下,讲解一下回调:
封装实现:
/**
* NetUitl 网络请求的实现
* https://github.com/facebook/react-native
*/
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
ListView,
Image,
TouchableOpacity,
Platform,
AsyncStorage
} from 'react-native'; class NetUitl extends React.Component{
/*
* get请求
* url:请求地址
* data:参数
* callback:回调函数
* */
static get(url,params,callback){
if (params) {
let paramsArray = [];
//拼接参数
Object.keys(params).forEach(key => paramsArray.push(key + '=' + params[key]))
if (url.search(/\?/) === -1) {
url += '?' + paramsArray.join('&')
} else {
url += '&' + paramsArray.join('&')
}
}
//fetch请求
fetch(url,{
method: 'GET',
})
.then((response) => {
callback(response)
}).done();
}
/*
* post请求
* url:请求地址
* data:参数
* callback:回调函数
* */
static post(url,params,headers,callback){
//fetch请求
fetch(url,{
method: 'POST',
headers:{
'token': headers
},
body:JSON.stringify(params)
})
.then((response) => response.json())
.then((responseJSON) => {
callback(responseJSON)
}) .done();
} } module.exports = NetUitl;
调用:
rightAction(){
let params = {'start':'0',limit:'20','isNeedCategory': true, 'lastRefreshTime': '2016-09-25 09:45:12'};
NetUitl.post('http://www.pintasty.cn/home/homedynamic',params,'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VySWQiOiJVLTliZGJhNjBjMjZiMDQwZGJiMTMwYWRhYWVlN2FkYTg2IiwiZXhwaXJhdGlvblRpbWUiOjE0NzUxMTg4ODU4NTd9.ImbjXRFYDNYFPtK2_Q2jffb2rc5DhTZSZopHG_DAuNU',function (set) {
//下面的就是请求来的数据
console.log(set)
})
//get请求,以百度为例,没有参数,没有header
NetUitl.get('https://www.baidu.com/','',function (set) {
//下面是请求下来的数据
console.log(set)
}) }
另:因为iOS9对https的调整,需要在项目的info.plist添加Key:NSAllowsArbitraryLoads,具体方法看http://www.cnblogs.com/shaoting/p/5148323.html
完整源码下载:https://github.com/pheromone/React-Native-1
React Native中的网络请求fetch和简单封装的更多相关文章
- 从零学React Native之14 网络请求
通过HTTP或者HTTPS协议与网络侧服务器交换数据是移动应用中常见的通信方式. node-fetch是RN推荐的请求方式. React Native框架在初始化项目时, 引入了node-fetch包 ...
- React native中使用XMLHttpRequest请求数据
一.代码 import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View } from ' ...
- 在React Native中,使用fetch网络请求 实现get 和 post
//在React Native中,使用fetch实现网络请求 /* fetch 是一个封装程度更高的网络API, 使用了Promise * Promise 是异步编程的一种解决方案 * Promise ...
- React-Native 之 网络请求 fetch
前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所 ...
- react native中如何往服务器上传网络图片
let common_url = 'http://192.168.1.1:8080/'; //服务器地址 let token = ''; //用户登陆后返回的token /** * 使用fetch实现 ...
- React Native 在用户网络故障时自动调取缓存
App往往都有缓存功能,例如常见的新闻类应用,如果你关闭网络,你上次打开App加载的数据还在,只是不能加载新的数据了. 我的博客bougieblog.cn,欢迎前来尬聊. 集中处理请求 如果你fetc ...
- 《React Native 精解与实战》书籍连载「React Native 中的生命周期」
此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...
- React Native中的远程调试是不可靠的
一.原因 当您发现rn app在关闭远程调试后,一些功能无法正常工作时,这很可能是由于设备上的JavaScript执行环境与远程调试器之间的细微差别造成的. 例如,日期问题,Date构造函数似乎接受C ...
- 在 React Native 中使用 Redux 架构
前言 Redux 架构是 Flux 架构的一个变形,相对于 Flux,Redux 的复杂性相对较低,而且最为巧妙的是 React 应用可以看成由一个根组件连接着许多大大小小的组件的应用,Redux 也 ...
随机推荐
- Python对整形数字进行加密和解密
# -*- coding:utf-8 -*- __author__ = 'Ray' class Encryption: """整形数字简单的一个加密/解密算法" ...
- code异常处理
private void copyPrivateRawResuorceToPubliclyAccessibleFile() { InputStream inputStream = null; File ...
- R----Shiny包介绍学习
为什么用Shiny Shiny让数据分析师写完分析与可视化代码后,稍微再花几十分钟,就可以把分析代码工程化,将分析成果快速转化为交互式网页分享给别人.所以,如果你是一名使用R的数据分析师,选择Shin ...
- [问题2014A05] 解答
[问题2014A05] 解答 (1) 将矩阵 \(A\) 分解为两个矩阵的乘积: \[A=\begin{bmatrix} 1 & 1 & \cdots & 1 & 1 ...
- MySQL安装(转)
本文介绍MySQL的安装 可以单独阅读,也可以作为PHP环境搭建的一部分 PHP完整配置信息请参考 http://www.cnblogs.com/azhe-style/articles/php_env ...
- xml scheme 示例解析
第一个示例解析 第二个示例解析
- Educational Codeforces Round 6 E. New Year Tree dfs+线段树
题目链接:http://codeforces.com/contest/620/problem/E E. New Year Tree time limit per test 3 seconds memo ...
- M1卡介绍
本文整理自网络. M1卡是指菲利浦下属子公司恩智浦出品的芯片缩写,全称为NXP Mifare1系列,常用的有S50及S70两种型号,目前都有国产芯片与其兼容,属于非接触式IC卡.最为重要的优点是可读可 ...
- PHP保留两位小数的几种方法
$num = 10.4567; //第一种:利用round()对浮点数进行四舍五入 echo round($num,2); //10.46 //第二种:利用sprintf格式化字符串 $format_ ...
- java jar包解析:打包文件,引入文件
java jar包解析:打包文件,引入文件 cmd下: jar命令:package包打包 javac命令:普通类文件打包 Hello.java: package org.lxh.demo; publi ...