1、最简单的使用
//RN中文网上写的https://mywebsite.com/mydata.json是伪代码,需要替换成自己实际请求地址
fetch('http://chenxiaoping.com/demo')
2.请求头和请求参数的定义
fetch('http://chenxiaoping.com/demo', {
//请求方式,GET或POST
method: 'GET',
//请求头定义
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
//请求参数,如果有的话,可以这样方式定义,注意需要服务端支持json入参,如果不支持的话,可以尝试下面的方式
//body: JSON.stringify({
// firstParam: 'value1',
// secondParam: 'value1',
// }),
//如果服务端不支持json入参,请使用这种拼接方式
//body: 'key1=value1&key2=value2'
}).then((response) => response.json()).then(
//响应体,resonse,json拿到的就已经是转化好的jsonObject了,使用起来就非常简便
(responseJson) => {
//输出打印current_user_url字段,输出的内容可以直接在androidStudio日志输出里面看到
console.log("请求回调:" + responseJson.current_user_url);
}
)
3、完整的代码
import React, {Component} from 'react';
import {View, Text, Alert, Button, StyleSheet} from 'react-native';
class NewWorkDemoActivity extends Component {
render() {
return (
<View style={styles.style_root}>
<Text style={styles.style_text}>HelloWorldddd</Text>
<Button onPress={request} title="发起网络请求"/>
</View>
);
}
}
//请求网络
const request = () => {
console.log("点击了事件");
fetch('http://chenxiaoping.com/demo', {
//请求方式,GET或POST
method: 'GET',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
}
}).then((response) => response.json()).then(
(responseJson) => {
console.log("请求回调:" + responseJson.current_user_url);
})
};
let styles = StyleSheet.create({
style_root: {
backgroundColor: "#fae",
flex: 1
},
style_text: {
margin: 20,
}
})
export default NewWorkDemoActivity
坚持每天更新,加油!!!