React 开发（十六）：与 API 交互 - 使用 Fetch 和 Axios 获取数据
在现代前端开发中，与后端 API 进行交互是常见的需求。无论是获取数据、提交数据还是更新数据，理解如何在 React 中使用 API 是非常重要的。本篇文章将详细讲解如何在 React 中使用 Fetch 和 Axios 来与后端 API 进行交互，并提供相关的示例和分析。
目录
Fetch 和 Axios 概述
使用 Fetch 进行 API 请求
使用 Axios 进行 API 请求
Fetch 和 Axios 的对比
实践：React 中的 API 请求与数据展示
总结
1. Fetch 和 Axios 概述
Fetch
Fetch 是一个原生 JavaScript API，提供了一个基于 Promise 的方式来进行 HTTP 请求。它简单易用，并且是现代浏览器的标准功能。
优点：无需额外引入第三方库，广泛支持于现代浏览器。
缺点：不支持请求超时、取消请求等高级功能，错误处理相对简单。
Axios
Axios 是一个基于 Promise 的 HTTP 库，它简化了与 API 的交互，尤其在处理请求和响应拦截、错误处理等方面提供了更多功能。
优点：支持请求超时、取消请求、请求和响应拦截等，兼容性好，能自动将响应数据转为 JSON 格式。
缺点：需要额外引入第三方库，增加了项目的体积。
2. 使用 Fetch 进行 API 请求
Fetch 的使用非常简单。以下是如何在 React 中使用 Fetch 发起 GET 和 POST 请求的示例：
示例 1：GET 请求
import React, {
useEffect, useState } from 'react';
const FetchExample = () => {
const [data, setData] = useState([]);
const [loading, setLoading] = useState(true);
useEffect(() => {
fetch('https://jsonplaceholder.typicode.com/posts')
.then((response) => response.json())
.then((data) => {
setData(data);
setLoading(false);
})
.catch((error) => console.error('Error fetching data:', error));
}, []);
return (
{
loading ?
Loading...
:{
JSON.stringify(data, null, 2)}