25 与 API 交互之使用 Axios 获取数据

在前端开发中，与后端 API 进行交互是非常重要的。通过 API，我们可以从服务器获取数据，进而在我们的应用中展示这些数据。在本篇文章中，我们将集中讨论如何使用 Axios这个流行的 HTTP 客户端库来获取数据。

1. 安装 Axios

首先，在你的 React 项目中安装 Axios。如果你还没有创建 React 项目，可以通过以下命令来快速创建：

npx create-react-app my-app --template typescript
cd my-app

然后安装 Axios：

npm install axios

2. 创建一个 API 服务

为了更好地管理我们的 API 请求，我们可以创建一个单独的服务文件，以便后续的重用。在 src 目录下创建一个名为 api.ts 的文件，内容如下：

import axios from 'axios';

const api = axios.create({
  baseURL: 'https://jsonplaceholder.typicode.com', // 示例 API
  timeout: 1000,
});

export const fetchPosts = async () => {
  const response = await api.get('/posts');
  return response.data;
};

在这个示例中，我们使用 Axios 创建了一个名为 api 的实例，并设置了基本的配置，比如 baseURL 和请求的超时时间。fetchPosts 函数用于获取博客文章列表。

3. 在组件中使用 Axios 获取数据

接下来，我们将在 React 组件中使用这个 API 服务。创建一个名为 Posts.tsx 的新组件，并添加以下代码：

import React, { useEffect, useState } from 'react';
import { fetchPosts } from './api';

interface Post {
  id: number;
  title: string;
  body: string;
}

const Posts: React.FC = () => {
  const [posts, setPosts] = useState<Post[]>([]);
  const [loading, setLoading] = useState<boolean>(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    const getPosts = async () => {
      try {
        const data = await fetchPosts();
        setPosts(data);
      } catch (err) {
        setError('获取数据失败');
      } finally {
        setLoading(false);
      }
    };

    getPosts();
  }, []);

  if (loading) {
    return <div>加载中...</div>;
  }

  if (error) {
    return <div>{error}</div>;
  }

  return (
    <div>
      <h2>博文列表</h2>
      <ul>
        {posts.map(post => (
          <li key={post.id}>
            <h3>{post.title}</h3>
            <p>{post.body}</p>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default Posts;

代码解析

• 状态管理: 我们使用 useState 来管理 posts, loading 和 error 的状态。
• 数据获取: useEffect 钩子在组件挂载时调用 getPosts 函数，该函数通过 fetchPosts 来获取数据并更新状态。
• 错误处理: 如果在获取数据时发生错误，我们会更新 error 状态并在页面中显示错误信息。

4. 在应用中渲染 Posts 组件

最后，我们需要在主应用组件中渲染 Posts 组件。例如，在 src/App.tsx 中：

import React from 'react';
import Posts from './Posts';

const App: React.FC = () => {
  return (
    <div>
      <h1>我的博客</h1>
      <Posts />
    </div>
  );
};

export default App;

5. 小结

在这一篇中，我们详细探讨了如何使用 Axios 来与 API 交互，获取数据并在 React 组件中展示。通过创建 API 服务，我们能够更方便地管理我们的 HTTP 请求。这种结构不仅让代码更整洁，还促进了代码的复用。在下一篇中，我们将讨论如何处理异步请求的相关知识，敬请期待！