React服务类实现及访问方式

Question

当我将导出转换为服务而不是方法时，我无法访问我的服务类方法：

const HttpService = () => {
  
  const AUTH_TOKEN = localStorage.getItem("tokenKey");
  const { enqueueSnackbar } = useSnackbar();

  const postWithoutAuth = (url, body) => {
    const request = axios.post(url, body);
    return request.then((response) => response.data);
  };
};

export default HttpService;

我正在尝试访问

postWithoutAuth

方法，如下所示：

import { HttpService } from "../../services/HttpService";
// I think I should use like this:
import HttpService from "../../services/HttpService";

const handleSubmit = (event) => {
    event.preventDefault();
    HttpService.postWithoutAuth("/auth/signup", formValues)
      .then((response) => {})
      .catch((error) => {});
  };

那么，调用这个服务方法是否合适？

Answer 1

无法访问在另一个未以某种方式返回的函数内声明的函数。

HttpService

看起来根本不应该是一个函数。相反，您可以直接导出

postWithoutAuth

函数。

export const postWithoutAuth = (url, body) => {
    const request = axios.post(url, body);
    return request.then((response) => response.data);
};

然后，你可以像这样在另一个文件中使用它：

import { postWithoutAuth } from "../../services/HttpService";

Answer 2

不要使

HttpService

成为一个函数，而只是一个包含所有要导出的函数的文件：

export const postWithoutAuth = (url, body) => {
  const request = axios.post(url, body);
  return request.then((response) => response.data);
};
export const anotherOne= (url, body) => {
  //...
};

现在您可以从中导入：

import { postWithoutAuth, anotherOne } from "../../services/HttpService";