Question

当前，我和一些同事正在使用React作为我们的前端框架来构建完整的Web应用程序。在此应用程序中，我们需要对多个资源（因此多个页面）执行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 
    });

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

1 个答案: