使用React构建REST后端API调用的最佳方式是什么？

Question

目前，我和一些同事正在构建一个全栈web应用程序，使用React作为前端框架。在这个应用程序中，我们需要在多个资源上执行CRUD操作，因此需要多个页面。

在我之前的经验中，我发现教程/课程将API调用放在services文件夹中。Here's a simple example。

然而，我意识到这种方法不能解决加载/错误状态。因此，我尝试用钩子来解决这个问题，遵循我发现的另一个例子：code。这对于我实现的一个特性来说工作得很好，但我不知道它的可扩展性有多大。

我的问题是，什么是更好的方法？还有什么我没提到的吗？

Answer 1

Reactjs是一个库，而不是像Angular这样的框架，没有一种单一的方法来处理你的项目结构。有很多选择，试着遵循好的做法；如果你正在开发一个需要扩展的大型项目，使用Redux作为状态管理库，对于我来说，对于一个简单的React项目，我们创建了一个名为services的文件夹，并在一个索引文件中准备了所有的服务：

    /*  root services ⚓️ .. */

import axios from 'axios';



const API_URL = 'http://yourapi.com/api/';
const headers = { 'Content-Type': 'application/json' };


const add = (data) => axios.post(`${API_URL}/form`, data, { headers });

const getData = () => axios.get(`${API_URL}/hotels`, { headers });


 etc ...


export { 
  add,
  getData

};

以及对组件的调用

import { serviceName  } from '../services/index'; 
serviceName({/*params if it's necessary */ })
    .then(data => {
       //---Get your Data 
    })
    .catch(err => {
       //---Handle your Api call error 
    });