React Native中的网络请求fetch使用方法最为简单,但却可以实现大多数的网络请求,需要了解更多的可以访问:
https://segmentfault.com/a/1190000003810652
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 | /** * 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是人家已经封装好,再度封装只是基于自己项目进行的封装,这里只是基于公司项目实现一下,讲解一下回调:
封装实现:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 | /** * 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; |
调用:
1 2 3 4 5 6 7 8 9 10 11 12 13 | 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
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· NetPad:一个.NET开源、跨平台的C#编辑器
· PowerShell开发游戏 · 打蜜蜂
· 凌晨三点救火实录:Java内存泄漏的七个神坑,你至少踩过三个!
2015-10-06 iOS常用设计模式:MVC、单例、代理、观察者。