React Native Fetch网络请求,HR的话扎心了
在React Native中,你可以使用fetch
进行网络请求。以下是一个简单的例子,展示了如何使用fetch
发送GET请求并处理响应:
import React, { useState, useEffect } from 'react';
import { Text, View, Button, ActivityIndicator } from 'react-native';
const FetchExample = () => {
const [isLoading, setIsLoading] = useState(false);
const [data, setData] = useState(null);
const fetchData = async () => {
setIsLoading(true);
try {
const response = await fetch('https://api.example.com/data');
if (!response.ok) {
throw new Error('Network response was not ok');
}
const jsonResponse = await response.json();
setData(jsonResponse);
} catch (error) {
console.error('Error fetching data: ', error);
} finally {
setIsLoading(false);
}
};
useEffect(() => {
fetchData();
}, []);
if (isLoading) {
return <ActivityIndicator />;
}
if (data) {
return (
<View>
<Text>Data received: {JSON.stringify(data)}</Text>
</View>
);
}
return (
<View>
<Button title="Fetch Data" onPress={fetchData} />
</View>
);
};
export default FetchExample;
这段代码展示了如何在React Native组件中使用fetch
来获取数据,并在加载数据时显示一个加载指示器,在数据加载完毕后显示数据内容。同时,它还包含了错误处理,以便在请求失败时给出反馈。
评论已关闭