在React Native中,使用fetch网络请求 实现get 和 post
//在React Native中,使用fetch实现网络请求 /* fetch 是一个封装程度更高的网络API, 使用了Promise
* Promise 是异步编程的一种解决方案
* Promise 对象代表一个异步操作,有三种状态:Pending(进行中) Resolved(已完成) Rejected(已失效)
*
* Promise 实例生成以后,可以分别制定'完成' 和'失败'状态的回调函数,实现方式:链式调用方法
*
* 语法:
* fetch(参数)
* .then(完成的回调函数)
* .catch(失败的回调函数)
*
* fetch(url,opts)
* .then((response) => {
* //网络请求成功,执行该回调函数,得到响应对象,通过response可以获取请求的数据
* //json text等 //你可以在这个时候将Promise对象转换成json对象:response.json()
//转换成json对象后return,给下一步的.then处理
*
* return response.text();
* //或 return response.json();
* })
* .then((resonseData) => {
* //处理请求得到的数据
* })
* .catch((error) => {
* //网络请求失败,执行该回到函数,得到错误信息
* })
*
*
*
* */ //练习一, 使用get 和post方式获取数据 //将事件放在组件外部
function getRequest(url) {
var opts = {
method:"GET"
}
fetch(url,opts)
.then((response) => {
return response.text(); //返回一个带有文本的对象
})
.then((responseText) => {
alert(responseText)
})
.catch((error) => {
alert(error)
}) }
//Post方法, 需要请求体body
/*
* FromData
* 主要用于序列化表单以及创建与表单格式相同的数据
*
* var data = new FormData();
* data.append("name","hello");
* append方法接收两个参数,键和值(key,value),分别表示表单字段的名字 和 字段的值,可添加多个
*
* 在jQuery中,"key1=value1&key2=valu2" 作为参数传入对象框架,会自动分装成FormData形式
* 在Fetch 中,进行post进行post请求,需要自动创建FormData对象传给body
*
* */
function postRequest(url) {
//将"key1=value1&key2=valu2" 形式封装整FromData形式
let formData = new FormData();
formData.append("username","hello");
formData.append("password","1111aaaa"); var opts = {
method:"POST", //请求方法
body:formData, //请求体
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
}, } fetch(url,opts)
.then((response) => {
//你可以在这个时候将Promise对象转换成json对象:response.json()
//转换成json对象后return,给下一步的.then处理
return response.text
})
.then((responseText) => {
alert(responseText)
})
.catch((error) => {
alert(error)
})
} var GetData = React.createClass({ render:function () {
return(
<View style={styls.container}>
{/*注意: 方法调用方式,绑定了this */}
<TouchableOpacity onPress={getRequest.bind(this,"http://project.lanou3g.com/projects/bj/reactnative/login.php?username=lanou&password=123")}>
<View style={styles.btn}>
<Text>Get</Text>
</View>
</TouchableOpacity> <TouchableOpacity onPress={postRequest.bind(this,"http://project.lanou3g.com/projects/bj/reactnative/login.php")}>
<View style={styles.btn}>
<Text>Post</Text>
</View>
</TouchableOpacity>
</View> );
} }); var styles = StyleSheet.create({
container:{
flex:1,
backgroundColor:'cyan',
marginTop:30,
flexDirection:'row',
justifyContent:'center',
alignItems:'center'
},
btn:{
width:60,
height:30,
borderWidth:1,
borderColor:"yellow",
justifyContent:'center',
alignItems:'center'
} });
在React Native中,使用fetch网络请求 实现get 和 post的更多相关文章
- React native 中使用Fetch请求数据
一.代码 import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View } from ' ...
- fetch网络请求 get 和 post
//在React Native中,使用fetch实现网络请求 /* fetch 是一个封装程度更高的网络API, 使用了Promise* Promise 是异步编程的一种解决方案* Promise 对 ...
- React Native中的网络请求fetch和简单封装
React Native中的网络请求fetch使用方法最为简单,但却可以实现大多数的网络请求,需要了解更多的可以访问: https://segmentfault.com/a/1190000003810 ...
- react native中如何往服务器上传网络图片
let common_url = 'http://192.168.1.1:8080/'; //服务器地址 let token = ''; //用户登陆后返回的token /** * 使用fetch实现 ...
- 《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 也 ...
- react native 中的ListView
ListView 的运用: 1.首先在react native中引入这个组件: 2.初始化的ListView 的相关属性: constructor(props) { super(props); con ...
- React Native 中的component 的生命周期
React Native中的component跟Android中的activity,fragment等一样,存在生命周期,下面先给出component的生命周期图 getDefaultProps ob ...
随机推荐
- 初学python之路-day07-字符编码
今天的博客主要关于字符编码,并对前几天学习的数据类型做些总结. 学习字符编码的目的:解决乱码问题. 应用程序打开文本文件的三步骤 1.打开应用程序 2.将数据加载到内存中 3.cpu将内存中的数 ...
- https请求之绕过证书安全校验工具类(原)
package com.isoftstone.core.util; import java.io.BufferedReader; import java.io.ByteArrayOutputStrea ...
- mysql 函数学习(常用)
1.时间函数(组1) SELECT CURRENT_DATE() AS date, CURRENT_TIME() AS `time`, CURRENT_TIMESTAMP() AS `timestam ...
- 末学者笔记——SAMBA服务、FTP服务讲解
samba服务 一.概念: Smb主要作为网络通信协议; Smb是基于cs(client,sever)架构: 完成Linux与windows之间的共享:linux与linux之间共享用NFS 二. ...
- python-循环&运算符
一.while 循环语句 while 循环语句的基本用法如下: while 条件表达式: 循环体 当条件表达式的返回值为真时,则执行循环体中的语句,执行完毕后,重新判断条件表达式的返回值,直到表达式的 ...
- dataGridView笔记
最近用dataGridView比较多,先把代码备份在这里,有时间系统总结一下 using FindId.DAL; using FindId.Model; using System; using Sys ...
- ASP.NET Core快速入门学习笔记(第1章:介绍与引入)
课程链接:http://video.jessetalk.cn/course/explore 良心课程,大家一起来学习哈! 任务1:课程介绍 任务2:环境安装 下载地址:https://dotnet.m ...
- MAC Undefined symbols for architecture x86_64 cv::imwrite
因为homebrew安装opencv时用的是clang,而CLion中使用的是gcc编译器. 将clion中的编译器改回默认的clang就行了.
- android studio 虚拟机adb.exe已停止工作的处理
在搭建完android studio 后使用虚拟机或真机调试程序,出现如下错误. 在运行里输入cmd,打开命令行工具,使用netstat -aon|findstr 5037查看adb.exe的50 ...
- Unity Rain Ai 插件基本使用(二)
前言 在前面的教程中我们已经基本实现了路径导航和障碍物规避. 但是这样我们并没有让我们的角色学会思考,他只是机械的去完成一些步骤,这并不能体现Rain插件的智能. 一个角色他应该有多个不同的状态,待机 ...