背景
有的时候我们需要向后端发送多个网络请求，如果全部在主线程中操作的话页面会变得非常卡顿，我们可以使用webwoker来发送网络请求，一旦服务响应结果，我们再从子线程给主线程发送消息
步骤
默认情况下vue2是不支持webwoker。
- 安装
worker-loader
npm i -D worker-loader
- vue.config.js配置
配置loader来解析xx.worker.js后缀的文件
module.exports = defineConfig({configureWebpack: config => {config.module.rules.push({test: /\.worker.js$/,use: {loader: 'worker-loader',// 允许将内联的 web worker 作为 BLOBoptions: { inline: 'no-fallback' }},})},parallel: false, // 打包报错的配置
})- 创建worker来发送网络请求
src下创建worker/list.worker.js
import axios from "axios";
self.onmessage = (e) => {axios.get('http://127.0.0.1:3000/public/test.jpg').then(res => {self.postMessage(res.data)})}
- vue组件
<template><div class="app"><button @click="sendMessage">发送消息</button></div>
</template><script>
import listWorker from './worker/list.worker'
export default {created() {// 引入子线程运行的js文件,然后创建worker示例const worker = new listWorker()this.worker = workerthis.worker.addEventListener('message', (e) => {console.log('主线程监听到子线程发送的消息事件', e.data)})},methods: {sendMessage() {this.worker.postMessage(123)},},
}
</script><style lang="less" scoped></style>效果
参考文档
https://juejin.cn/post/6979487181739917343#heading-8
