Question

我是ReactJS的新手。如何在一个地方通常维护对所有API调用的获取。仅通过传递参数来更改URL和查询字符串并获取返回数据。像这样=>（在角度上，他们维护了service.ts中的API，并从component.ts进行了调用并订阅了返回数据。）

Answer 1

有不同的方法，最简单的方法（我从React开始使用的一种方法）是使用Axios （我更喜欢axios而不是fetch）并将所有api调用存储在服务中文件夹，例如，您的项目结构如下：

react project
  src
    service
      service1.js
      service2.js

和服务如下：

注意：我采用这种方式工作，因为您可能会在多个组件中使用某些服务，因此，如果您需要修复某些问题，则只需要更新您的服务即可

import axios from 'axios';

function getObjects() {
  return axios.get("http://yourservice/yourendpoint");
}

export {
  getObjects,
};

根据您使用的方法（旧的有状态组件或挂钩），您就可以在组件中导入并使用服务

import React from 'react';
import {getObjects} from './service/service1.js'

const MyComponent = () => {
    const [data, setData] = useState([]);

    useEffect(() => {
       getObjects().then(result=> setData(result.data));
    }, []);

    // use your sample
}

这只是一个例子，我认为这是一个很好的起点，您可以随着时间的推移改进方法。

问候

Answer 2

您可以在react中创建一个功能组件（将所有参数传递给它）。然后，您可以在不同的组件中调用它。 React中的纯组件不过是一个Java脚本函数。

import axios from "axios";

export const getAll = function(url) {

    return fetch(url, {
      method: "get",
      headers: {
        "Content-Type": "application/json",
      },
    }).then(response => {
      if (!response.ok) {
        throw Error(response.statusText);
      }
      return response;
    });
};

通常，API调用ReactJS Fetch中的不同组件

2 个答案: