javascript - 使用 React 获取 Web Worker

Question

我有一个 React 页面，它要求用户输入一些信息并从 API 返回一个 JSON 对象数组。

查询会返回一个很大的结果导致页面在加载 fetch 时卡住，所以我想使用网络 worker 来分离线程并添加一个加载轮让用户知道网站没有崩溃.

我目前有我的网络 worker 使用此代码:

worker 守则

const self = this;

export default () => {
    self.addEventListener('message', e => {
        if (!e) return;
        let query = e.data;
        let res = null;

        fetch(`https://statsapi.web.nhl.com/api/v1/schedule?startDate=${query}&endDate=${query}`)
        .then(response => {
            return response.json();
        })
        .then(function(_ref) {
            postMessage(_ref);
        });
    });
}; 

这只是一个示例 API，但真正的 API 结果会更大并且需要更长的加载时间。

我也在使用 function(_ref) 而不是 ({ data }) => 因为当通过 babel 处理时，({ data }) =>当没有通过 ref 的数据访问器时， 将变成 _ref.data，并且 _ref 用于返回数组。

我在这样的网络 worker 类中实现了我的代码:

worker 构造器

export default class WebWorker {
    constructor(worker) {
        const code = worker.toString();
        const blob = new Blob(['(' + code + ')()'], { type: 'text/javascript' });
        return new Worker(URL.createObjectURL(blob));
    }
}

我这样称呼另一个类中的网络 worker :

Web Worker 创建

componentDidMount = () => {
    this.worker = new WebWorker(worker);
}

getInfo = () => {
    this.worker.postMessage(this.state.query);

    this.setState(prevState => ({
        ...prevState,
        open: true
    }), () => {
        this.worker.addEventListener('message', (event) => {
            const res = event.data;
            this.setState({
                results: res,
                open: false
            });
        });
    });
}

我遇到的问题是，当我尝试像现在这样调用它时，网络 worker 似乎没有在另一个线程上处理。即使 web worker 正在获取数据，页面仍会卡住，因为它在卡住后仍会正确设置状态。

我是 web worker 的新手，所以我是否遗漏了一些可以让它工作的东西，或者是否有一种不同的方式来使用带有 fetch 的 web worker？

Answer 1

如果您的页面变得无响应，则表明主处理线程正在受到 CPU 密集型操作的影响。 I/O 绑定(bind)操作，如从 URL 中获取，不会影响页面的响应能力，除了来自响应的一些解析开销。因此，worker 的最佳用法是在不同的线程上执行 CPU 密集型操作。将 I/O 操作移交给工作人员，您在性能方面的 yield 非常小(如果有的话)。

很可能是您的渲染逻辑或数据处理导致了挂起，而不是网络请求处理。