首页 > 其他分享 >vue2项目中使用webworker(一):发送网络请求

vue2项目中使用webworker(一):发送网络请求

时间:2024-08-31 23:03:46浏览次数:9  
标签:axios worker loader 发送 webworker 线程 vue2 js

背景

有的时候我们需要向后端发送多个网络请求,如果全部在主线程中操作的话页面会变得非常卡顿,我们可以使用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

标签:axios,worker,loader,发送,webworker,线程,vue2,js
From: https://www.cnblogs.com/it774274680/p/18390901

相关文章

  • 使用浏览器发送post请求 适用于内网 并且没有postman的情况下
    谷歌浏览器console控制台输入以下命令允许复制allowpasting然后粘贴请求代码示例:varurl="https://icp.minexiot.com/prod-api/alarmInfo/page";varparams={"page":1,"limit":10,"confirmStatus":1};varxhr=newXMLHtt......
  • sipp模拟uas发送update
     概述freeswitch是一款简单好用的VOIP开源软交换平台。但是fs在处理update消息时候有BUG,为了复现问题,使用sipp模拟uas,发送update并发送DTMF码。本文档记录sipp的配置方案。环境CentOS7.9freeswitch1.10.7sipp.3.6.2问题描述在与运营商对接的过程中,运营商内部会先返......
  • 如何使用cURL发送POST请求?快速搞定网络请求
    大家好,小编又来分享干货啦!今天我们要聊聊网络开发中常见的一个操作——如何使用cURL发送POST请求。带你快速掌握发送POST请求的技巧,并且还会揭秘如何通过代理IP进一步优化你的网络请求。1.cURL是什么?简单来说,cURL是一个用于向服务器传递数据的命令行工具,它支持多种协议,最常用的就......
  • Vue2实现应用添加水印的功能
    需求有的情况,我们需要给我们的网页添加水印。我们可以使用第三方库WatermarkDesign。官方地址:https://watermark-design.github.io/watermark/zh/效果示例代码入口文件main.jsimportWatermarkDesignfrom'@watermark-design/vue';Vue.use(WatermarkDesign)vue容器App......
  • NETCORE下用SKIT类库发送微信模板消息
    NETCORE下用SKIT类库发送微信模板消息 //测试发送模板消息-微信公众号//https://developers.weixin.qq.com/doc/offiaccount/Message_Management/Template_Message_Interface.html#5publicasyncTask<IActionResult>Ceshi(intid,stringopenid)......
  • postman 发送json数据时,数据为随机数(雪花算法生成)
    要在Postman中发送由雪花算法计算出的随机数,您可以通过在预请求脚本中使用JavaScript代码来实现。首先,您需要添加一个script部分模拟雪花算法生成随机数的函数。可以在请求的"Pre-requestScript"选项卡中添加以下代码:functiongenerateRandomNumber(){constepoch=16094......
  • 会员通知短信怎么利用NodeJS发送短信
    会员通知群发短信以其即时高效、高打开率、个性化定制、成本效益高、跨平台兼容以及法律合规等优势,在现代会员管理和营销策略中占据了重要地位。对于希望提升会员沟通效率、增强用户粘性和促进业务增长的企业而言,合理利用群发短信工具无疑是一个明智的选择。支持免费试用下乐......
  • 抖音私信回复图片接口-企业号授权到开放平台-调用上传图片并发送私信消息
    抖音私信回复图片接口企业号授权到开放平台调用上传图片并发送私信消息这样用户就可以在客服后台,直接给私信用户发送图片了感兴趣的+\/  : llike620golang代码//获取ClientTokenfunc(this*Douyin)GetClientToken()(string,error){url:="https://open.......
  • Vue2中的事件修饰符 用于处理DOM事件的触发方式
    一、.stop1.功能:阻止事件冒泡,即停止事件向上传播到父元素。2.代码演示:<div@click="parentClick"> <[email protected]="childClick">Clickme</button></div>二、.prevent1.功能:阻止默认行为,例如阻止表单提交或链接跳转。2.代码演示:<[email protected]="su......
  • Java 使用QQ邮箱的接收&发送功能,入门级教程
    进入qq邮箱主页面,点击账号下滑找到POP3...如果没有开启,需要开启,开启后,点击管理服务然后点击生成授权码按照步骤执行完成后,会给你需要的授权码1.拿到授权码后,导入相关依赖,和yml相关配置,注意修改配置文件的信息<dependency><groupId>org.apache.commons</......