vue2專案中使用webworker（一）：傳送網路請求

^Mao^發表於2024-08-31
VueWeb

背景

有的時候我們需要向後端傳送多個網路請求，如果全部在主執行緒中操作的話頁面會變得非常卡頓，我們可以使用webwoker來傳送網路請求，一旦服務響應結果，我們再從子執行緒給主執行緒傳送訊息

步驟

預設情況下vue2是不支援webwoker。

  1. 安裝worker-loader
npm i -D worker-loader
  1. 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, // 打包報錯的配置
})
  1. 建立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)

  })

}
  1. 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>

效果

參考文件

https://juejin.cn/post/6979487181739917343#heading-8

相關文章