1 实际项目中使用Web Worker
下面这篇文章详细介绍了web worker常用的api, 场景(这里不知道有没有具体衡量指标),使用过程中的注意事项,文章写的很好,感兴趣可以看下,这里不在详细叙述具体概念
Web Worker使用
1.1 场景
本文将分享一个web Worker在实际项目中使用的场景,在我们项目中,我们把从查询接口获取到的数据,格式化的过程,放在web worker中进行。
首先简单介绍下我们的项目,可视化相关项目,接口主要分为两大方面,配置查询和数据查询接口,其中数据查询接口是影响页面性能指标的一个很关键的因素,并且从查询接口获取到数据之后的格式化过程逻辑,全部放在fe中了,但是我们知道,数据格式化这个过程可能会涉及一些比较大的计算,因此我们选择将它拆出来放在一个单独web worker线程中,减少对主线程造成影响。
1.2 实现
具体解释看注释,写的比较详细
// workerHelper.ts
import Worker from 'worker-loader?inline=no-fallback!./query.worker.ts';
import axios, {
CancelTokenSource } from 'axios';
import {
ErrorType } from '@/api';
const {
CancelToken } = axios;
type EventHanler = {
resolve: (value: any) => void;
reject: (reason?: any) => void;
};
export enum ErrorType {
TIMEOUT,
REQUEST,
CANCEL
}
const requestMap = new Map<string, CancelTokenSource>();
// 调用接口
const query = async (
params,
) => {
let resultData;
await axios.post(`******`, params, {
headers: {
},
cancelToken: cancelToken.token,
})
.then(res =>