fetch网络请求 get 和 post

Posted Da雪山

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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‘
}

});





































































































































以上是关于fetch网络请求 get 和 post的主要内容,如果未能解决你的问题,请参考以下文章

使用 fetch 发送带有数据对象的 get 请求

原生Javascript使用fetch发起请求_模拟get|post|文件流下载等

javascript ajax 调用通过仅使用 POST 方法的 fetch 调用:奇怪的行为是 post 后跟 get plus 再次请求所有资源?

通过 Fetch React Native Post Request 引发网络请求失败

react-native-Fetch初体验

POST 请求适用于 Postman,但不适用于 axios 或 .fetch()