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等**   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    }

fetch(url,opts)        .then((response) => {            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‘    }

});
时间: 2024-10-11 04:41:38

fetch网络请求 get 和 post的相关文章

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

React Native中虽然也内置了XMLHttpRequest 网络请求API(也就是俗称的ajax),但XMLHttpRequest 是一个设计粗糙的 API,不符合职责分离的原则,配置和调用方式非常混乱,而且基于事件的异步模型写起来也没有现代的 Promise 友好.而Fetch 的出现就是为了解决 XHR 的问题,所以ReactNative官方推荐使用Fetch API.http://blog.csdn.net/withings/article/details/71331726 fet

React Native探索(五)使用fetch进行网络请求

前言 React Native可以使用多种方式来进行网络请求,比如fetch.XMLHttpRequest以及基于它们封装的框架,fetch可以说是替代XMLHttpRequest的产物,这一节我们就来学习fetch的基本用法. 1.get请求 fetch API是基于 Promise 设计的,因此了解Promise也是有必要的,推荐阅读MDN Promise教程 . get请求访问淘宝IP库 我们先从最基础的get请求开始,get请求的地址为淘宝IP地址库,里面有访问接口的说明.请求代码如下所

iOS 网络请求Json自动转存到CoreData(二)

项目需求:从网络获取Json后,将Json自动转存到CoreData中. 继上一篇日志,那么这篇的主要内容是:将Json存到CoreData中. 说话实话,无非就是KVC赋值,思路清晰明了,但是我在想一个问题,有没有办法做到通用呢?那么问题来了-挖机技术哪家强! 好了不扯淡了,虽然KVC暂时满足我项目需求,那个通用办法我还在寻找中,能力有限,不过我会努力. 顺便分享一篇 讲述 这个网络请求数据存放到CoreData的介绍 Process remote service data into Core

RN实战项目网络请求封装(二)

RN实战项目网络请求封装(二) 网络相关学习文档,参考 RN中文网文档 RN中主要是用fetch来完成异步网络请求的,传统的ajax慢慢的会被fetch替代 RN中文网fetch API 案例 fetch('https://mywebsite.com/endpoint/', { method: 'POST', //请求方法 默认get headers: { 'Accept': 'application/json', 'Content-Type': 'application/json', //数据

React Native中的网络请求

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

Android 网络请求json数据,解析json数据,生成对应的java bean类一步到位,快速开发

Android 网络请求一般都涉及到图片和JSON数据,怎样快速的请求网络JSON数据,解析JSON数据,并且一步生成自己想要的Java bean实体类?这个涉及到Android 开发效率的问题.由于接触Android 网络这方面比较多,自然就找到一些好的方法来快速开发Android 网络模块的相关内容,接下来就为大家揭晓 一步快速请求,解析JSON 数据生成对应的Java bean实体类的方法. 注:我们先把思路讲解下吧: 1.网络请求JSON数据代码可以自己写,当然我还是推荐使用网络上开源的

Kotlin + 协程 + Retrofit + MVVM优雅的实现网络请求

前言 最近一直在修炼Kotlin,说实话真香真好用,刚好公司准备交给我一个新项目,于是打算直接用Kotlin来构建项目.刚好整体架构搭建完毕了,于是把网络请求这一部分先分享给大家.这次使用到的是 协程+ retrofit +mvvm的模式,我这儿直接用一个简单的demo来看一下具体的实现方式吧.文章只是描述实现思路,需要demo的直接跳到文末. 项目配置 首先先引入所需要的依赖 implementation 'android.arch.lifecycle:extensions:1.1.1' //

ios编程之网络请求

网络请求有GET请求和POST请求,get和post实现的时候可以选择同步或者异步实现.看一个请求是GET还是POST就看网址后面有没有携带请求体. GET与POST 区别 1.get请求 请求的网址全部明文显示 安全性不高 2.get请求 请求的网址 有字符数的限制 大概255个 3.post请求 请求的网址 不光是有一个请求的网址 还可以携带请求体 这个请求体 是以NSData形式存在 安全性较高 4.post请求没有字符数的限制 GET同步和GET异步 同步请求是在请求数据的时候不能做其他

Swift网络请求(Moya篇)

在使用Alamofire进行网络请求的时候,相信大部分的同学都会封装一个抽象的NetworkLayer,如"APIManager" 或者 "NetworkModel"等等.但是位置业务功能增加,会渐渐混合各种请求,不够清晰,而Moya能很好地解决这类问题.Moya在Alamofire基础上进行封装,是一个允许高度自定义的网络层,可以根据具体的需求进行接口的设置.具体的介绍可以参考Moya的官方链接,结构图如下: 接下来就介绍一下Moya的一些常见的用法: (一)根据