vue2项目中使用webworker（一）：发送网络请求
背景
有的时候我们需要向后端发送多个网络请求，如果全部在主线程中操作的话页面会变得非常卡顿，我们可以使用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 作为 BLOB
options: { 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 = worker
this.worker.addEventListener('message', (e) => {
console.log('主线程监听到子线程发送的消息事件', e.data)
})
},
methods: {
sendMessage() {
this.worker.postMessage(123)
},
},
}
</script>
<style lang="less" scoped></style>
效果
