如何在react native中将axios调用与组件分开？

import axios from 'axios';

const api = axios.create({
  baseURL: 'https://api.example.com', // 设置API的基本URL
  timeout: 5000, // 设置请求超时时间
});

export const getPosts = () => {
  return api.get('/posts'); // 发起GET请求获取帖子列表
};

export const createPost = (postData) => {
  return api.post('/posts', postData); // 发起POST请求创建新的帖子
};

// 可以继续定义其他的API请求函数

import React, { useEffect, useState } from 'react';
import { View, Text } from 'react-native';
import { getPosts } from './api'; // 引入API函数

const PostList = () => {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    const fetchPosts = async () => {
      try {
        const response = await getPosts(); // 调用API函数获取帖子列表
        setPosts(response.data); // 更新帖子列表状态
      } catch (error) {
        console.error(error);
      }
    };

    fetchPosts();
  }, []);

  return (
    <View>
      {posts.map((post) => (
        <Text key={post.id}>{post.title}</Text>
      ))}
    </View>
  );
};

export default PostList;