React Fetch入门：轻松掌握从API获取数据的技巧

Dec 15, 2024

—

在React开发中，与后端API的交互是构建动态和交互式应用程序的关键部分。
fetch
是一种现代、简洁的方式来处理网络请求，它是原生的JavaScript API，无需额外的库即可使用。本篇文章将带你入门React Fetch，学习如何从API获取数据，并将其集成到你的React应用中。
简介
fetch
API 允许你发送请求到指定的URL，并获取响应。它基于Promise设计，使得异步操作更加直观和易于管理。在React中，
fetch
可以与
useState
和
useEffect
等Hook结合使用，来管理组件的状态和副作用。
使用fetch进行数据请求
以下是一个使用
fetch
从API获取数据的简单示例：
import React, { useState, useEffect } from ‘react’;

function DataFetchingComponent() {
const [data, setData] = useState([]);
const [loading, setLoading] = useState(true);

useEffect(() => {
fetch(‘https://api.example.com/data’)
.then(response => response.json())
.then(data => {
setData(data);
setLoading(false);
})
.catch(error => {
console.error(‘Error fetching data:’, error);
setLoading(false);
});
}, []);

if (loading) {
return

加载中…

;
}

return (

{data.map(item => (

{item.name}

))}

);
}
在这个例子中，我们创建了一个名为
DataFetchingComponent
的React组件。它使用
useState
来创建
data
和
loading
状态，并使用
useEffect
来触发数据请求。
fetch(‘https://api.example.com/data’)
发送一个GET请求到指定的URL。
response.json()
将响应体解析为JSON格式。
解析后的数据通过
setData
更新到组件的状态中。
请求完成后，
setLoading
被设置为
false
，从而停止加载状态。
处理响应和错误
fetch
返回一个Promise，这意味着你可以使用
.then()
和
.catch()
来处理成功和失败的情况。上面的代码示例展示了如何处理成功的响应和捕获请求过程中可能发生的错误。
使用async/await
虽然
.then()
和
.catch()
是处理Promise的传统方式，但使用
async/await
可以使异步代码的书写和阅读更加直观。
以下是如何使用
async/await
重写上面的示例：
import React, { useState, useEffect } from ‘react’;

async function fetchData() {
try {
const response = await fetch(‘https://api.example.com/data’);
const data = await response.json();
setData(data);
setLoading(false);
} catch (error) {
console.error(‘Error fetching data:’, error);
setLoading(false);
}
}