从 Angular 执行来自 service worker 的 get 请求

Question

我是从 Angular5 迁移过来的。 在 angular5 中，我使用的是服务，现在我正在尝试使用 React。

我试图从 globalService.js 调用 function，并在 app.js 中对其进行处理。

到目前为止我得到了这个错误：

TypeError: _globalService__WEBPACK_IMPORTED_MODULE_5__.default.PerformRequest is not a function

测试数据：

应用程序包含：

import doSomething from "./globalService";
        console.log("doing a request",doSomething.PerformRequest('test'));

全球服务：

const PerformRequest = function(data) {
console.log("data is:",data);

}

export default PerformRequest;

测试数据结束

理想情况下，我正在尝试将我的 angular 代码翻译为 React 代码。 这是我的 angular 旧代码：

应用调用：

  click() {

    this.GlobalService.PerformRequest('/crime').pipe(takeUntil(this._destroyed$)).subscribe((data:any) => {
      DO SOMETHING WITH DATA HERE
    });
  }

全球服务电话：

  PerformRequest(params) {
    console.log(this.baseURL + params);
    return this.http.get(this.baseURL + params,this.options)
      .pipe(
        //catchError(this.handleError)
      );
  }

Q1：我在上面的第一个例子中做错了什么？

Q2：我将如何重写我的 angular 数据以响应语言，以便我可以使用它从组件调用，就像我调用它一样？

Answer 1

Q1：你的导入不正确，应该是

import PerformRequest from './globalService';

如果您保持 globalService 当前返回的方式。 如果您确实想要类似服务的东西，您可以导出包含所有方法的 object。

export default {
    PerformRequest,
};

Q2：

我建议您查看钩子以重现您已经拥有的服务。

你可以这样做： import { useEffect, useState } from 'react';

// define a hook
const useFetchUrl = (url) => {
    // useState are used to store some state
    const [isLoading, setIsLoading] = useState(true);
    const [data, setData] = useState();

    // useEffect is done for side effect
    useEffect(() => {
        fetch(url)
          .then(resp => resp.json())
          .then(data => setData(data);
    }, [url];

    return {
      isLoading,
      data,
    };
}

const Component = () => {
  const { loading, data } = useFetchUrl('/some/url');

  if (!loading) {
      return <div>Loading...</div>;
  }

  return <pre>{JSON.stringify(data)}</pre>;
};

swr是一个很好的库，它为您提供了挂钩，您可以使用这些挂钩来做同样的事情，而不必编写自己的自定义挂钩和处理一些更复杂的情况。