在 React 最佳实践中使用 axios 调用 API答案

【问题标题】：API call using axios in React best practices在 React 最佳实践中使用 axios 调用 API
【发布时间】：2021-10-30 16:30:04
【问题描述】：

我正在调用后端 API 以使用 async/await axios 在我的前端 React 应用程序中获取产品。对于这个调用，我定义了一个函数如下：

export const getProduct = ():Promise<Product> => {
  const {data} = await axios.get<Product>('http://myurl.com/api/getproduct');
  return data;
}

或者，我可以使用下面的代码返回 get 返回的所有内容，

export const getProduct = ():Promise<AxiosResponse<Product>> => {
  return axios.get<Product>('http://myurl.com/api/getproduct');
}

我想知道是否有任何最佳实践建议可以选择一个而不是另一个。

【问题讨论】：

为什么要强迫客户处理AxiosResponse？如果将axios 替换为Javascript 的fetch 会怎样？所有客户都应该改变吗？
作为大团队的一员，我不得不使用 axios。
你不必泄露它。尤其是在大型团队和项目中，您不希望一个调用或模块的实现细节泄露给其他人。 getProducts 的调用者没有充分的理由知道它是如何加载的。如果您决定加载缓存并从会话存储中加载呢？

标签： reactjs typescript axios

【解决方案1】：

我建议你不要返回所有内容，通常你实现一个隐藏 HTTP 接口的类。您可以将其命名为 service、client 或 sdk，没关系。但是你不公开实现细节（如 HTTP 响应）并只返回你需要的东西（数据）是什么问题。特别是你的函数的名字是getProduct，所以它应该返回一个产品，而不是HTTP响应。

【讨论】：