一.使用场景
某项目某接口，请求返回的数据量较大，消耗服务器资源严重。如果在web端打开多个页签，同时请求该接口，会造成服务端负荷过重。这时，共享工作者线程(SharedWorker)就派上了用场。根据SharedWorker的特性，第一个页面打开线程，就会创建一个SharedWorker，第二个页面也打开，就会使用已经创建的同一个线程。如此，只要在线程中将数据进行一定的缓存处理，多个页签打开时，就可以共用这一份数据。
二.SharedWorker的一些特性
首先，SharedWorker的机制在不同浏览器的实现方式可能是不一样的，所以多页面共享线程只限于同一浏览器，而不能跨浏览器。chrome打开的页面只能与chrome页面共享，而不能与火狐浏览器共享。
如果使用火狐浏览器，可以直接在控制台查看ShareWorker中打印的信息。但如果是Chrome浏览器或者sougou浏览器，ShareWorker文件中打印的信息在主线程页面是无法查看的。Chrome浏览器查看SharedWorker的方式是在浏览器地址栏访问 Chrome://inspect => SharedWorker=>inspect， sougou的查看方式请自行搜索。
关于SharedWorker的浏览器兼容性，可查询MDN相关文档。https://developer.mozilla.org/zh-CN/docs/Web/API/SharedWorker
三.SharedWorker的引入与一般使用
如果在传统的js页面，可以通过new SharedWorker(src)创建线程
var myWorker = new SharedWorker("worker.js");
如果用vite + vue3技术栈，需要这样引入
import sharedWorker from './worker?sharedworker';
在vite的开发模式下，它实际生成的是这样一个文件。其中type类型为module，则允许在开发的使用import ，export的es6模块语法。但在生产构建后，worker文件会按照引入链会被构建成一个文件。
export default function WorkerWrapper() { return new Worker("/apps/home/worker.ts?worker_file", { "type": "module" }) }
需要注意的是，worker内部并没有window对象，因此如果你所引入的包（例如axios登）中包含window的引用，构建后在运行时大概率会报错。我通过在worker文件开头增加了两行代码修复了这个问题。所以能够这样做，是因为self是window的一个子集，它具备了大部分window的对象。
self.window = self;
window = self;
以下是常用方法
worker.js
// 与专用工作者线程不同，共享线程通过port来使用，port是一个MessagePort对象，包含了onmessage,postMessage等方法。
// 连接后通过port操作
self.onconnect = ({ ports }) => {
ports.forEach((port) => {
port.onmessage = (ev) => {
const someData = {}
port.postMessage(someData);
};
port.onmessageerror = (ev) => {
console.log('error', ev);
};
});
};
四.进一步对调用方法进行封装
由于SharedWorker是用postMessage发送消息，用onmessage接受消息，在使用是不如调用一个方法那么直接方便。可以考虑将其封装成返回Promise方法。
import sharedWorker from './worker?sharedworker';
import { useUserStore } from '/@/store/modules/user';
export function useWorker() {
const userStore = useUserStore();
const worker = new sharedWorker();
const onMessageResolveMap = {};
const onMessageRejectMap = {};
worker.port.onmessage = ({ data }) => {
if (typeof onMessageResolveMap[data.funcName] === 'function') {
if (data.data.statusCode === 200) {
onMessageResolveMap[data.funcName](data.data?.data);
} else {
onMessageRejectMap[data.funcName](data.data.descript);
}
}
};
function getWorkerData(funcName, params, cacheTime = 2 * 60 * 1000) {
return new Promise((resolve, reject) => {
onMessageResolveMap[funcName] = resolve;
onMessageRejectMap[funcName] = reject;
worker.port.postMessage({ token: userStore.getToken, funcName, params, cacheTime });
});
}
function stopWorker() {
if (worker?.port) {
worker?.port?.close();
}
}
return {
getWorkerData,
stopWorker,
};
}
如上getWorkerData方法，当方法调用时，返回一个promise对象，但promise对象不会马上变为resolve状态，而是将promise的resolve和reject 先保存起来，在onmessage中在通过方法名返回响应的数据。当然，这个方法有一个潜在的问题，如果只用方法名做区分，当调用一个方法还没返回数据接着又调一次，resolve就会被覆盖掉，它只能等返回数据再进行下一次调用。解决的办法也很简单，只要在传递的参数中增加一个随机数作为识别即可。
下面是在worker中的处理
import * as api from './api/api';
import { handleApi } from './api/utils';
self.window = self;
window = self;
const cacheApi = handleApi(api);
self.onconnect = ({ ports }) => {
ports.forEach((port) => {
port.onmessage = (ev) => {
const { token, funcName, params, cacheTime } = ev.data;
cacheApi[funcName](token, params, cacheTime).then((res) => {
if (res?.data) {
port.postMessage({ funcName, data: res.data });
}
});
};
port.onmessageerror = (ev) => {
console.log('error', ev);
};
});
};
cacheApi是一个包含需要调用的所有接口方法的对象，通过主线程传来的函数名funcName调用相关接口。获得数据后通过postMessage将数据返回给主线程。
如果想对接口数据根据cacheTime设置的时间进行缓存，需要怎么处理呢？这里我用到了闭包的结构。api这变量包含了api文件中定义的所有接口。通过handleApi这个函数进行处理，返回一系列内部包含了缓存变量的闭包方法。
export function handleApi(apis) {
const apiMap = {};
for (const name in apis) {
const originFunc = apis[name];
const func = (() => {
const pendings: any = {};
// 根据不同的条件保存结果
const results: any = {};
const timeStamps: any = {};
function waitResult(resolve, resultKey) {
if (!results[resultKey]) {
setTimeout(() => {
waitResult(resolve, resultKey);
}, 300);
} else {
resolve(results[resultKey]);
}
}
function cacheValid(ret, resultKey, cacheTime) {
const _timeStamp = new Date().getTime();
// 检查是否过了缓存时间
if (_timeStamp - timeStamps[resultKey] > cacheTime || !ret) {
return false;
} else {
return true;
}
}
return (token, params, cacheTime) => {
const resultKey = JSON.stringify(params);
// 正在请求数据，等待
if (pendings[resultKey]) {
return new Promise((resolve) => {
waitResult(resolve, resultKey);
});
// 缓存是否还生效
} else if (cacheValid(results[resultKey], resultKey, cacheTime)) {
return new Promise((resolve) => {
resolve(results[resultKey]);
});
} else {
// 开始一个新的请求
pendings[resultKey] = true;
return new Promise((resolve) => {
originFunc(params, {
headers: {
Authorization: token,
},
}).then((res) => {
if (res?.data?.statusCode === 200) {
timeStamps[resultKey] = new Date().getTime();
results[resultKey] = res;
}
pendings[resultKey] = false;
resolve(results[resultKey]);
});
});
}
};
})();
apiMap[name] = func;
}
return apiMap;
}
这里面有几个关键点：
如果有两个页面在同时请求一个接口，并且条件都一样，后请求的不应当再请求一次，而应当等待缓存数据的到来。
因此，当第一个页面在开始请求接口之前，就设置pending 为true, 这样第二个页面进入方法后，得知缓存中无数据并且接口在请求，会不断调用自身得waitResult方法进行等待。
当接口返回数据后，pending为false, 等待结束，返回缓存的数据。
过期时间的处理：cacheTime通过方法参数传入，因此不同的方法在调用时可以设置不同的过期时间。当接口返回数据后，将当前时间戳记录在timeStamps中，下次调同一个接口，则通过cacheValid方法检查是否超过这个时间。为了保证数据优先，如果上一次没缓存到正确的数据，也应当作为过期情况重新调用。
