reactjs - React 在哪里做 api 响应的映射

Question

这更像是一个关于我找不到答案的 React 应用程序结构的一般性问题。以下是我的文件夹结构，并且是官方 React Material UI 主题使用的文件夹结构：

▼ src
  ▸ api
  ▸ components
  ▸ contexts
  ▸ hooks
  ▸ icons
  ▸ lib
  ▸ pages
  ▸ slices
  ▸ store
  ▸ theme
  ▸ types
  ▸ utils

我想他们中的大多数都是不言自明的。但是，我面临一个不确定性；api调用。我正在使用 Axios 库来处理 api 请求。以下是category.tsapi 文件夹内部的示例：

import axios from '../lib/axios';

const endpoint = 'categories';

const readCategories = async () => axios.get<Array<Category>>(endpoint);
const postCategory = async (category: Category) => axios.post<Category>(endpoint, { params: category });

大多数时候，必须将响应 api 数据映射到不同的外观模型。这里有什么建议？

1. 直接在组件中映射它？可能不如必须在多个组件中完成重复映射那么好......
2. 直接在api层中转换数据，即category.ts我的情况下的文件？这将允许不在组件中做任何额外的工作，但不同的组件可能需要不同的转换。
3. 在将 api 模型作为输入的单独方法中，将其转换为所需的模型，然后返回它？
4. 不同的建议...

标签： reactjsaxios

Answer 1

您应该在 Utils 文件夹中的单独文件中创建单独的函数。这将使您的组件保持清洁。该功能可以重复使用。