03-web worker vue项目实战

web worker 网上一大堆讲解，各种互相的复制粘贴，就算讲也是各种不标明版本所对应的配置，断章取义，就算有详细的，也只是在本地的html页面和js中去做的讲解和阐述，那么问题来了，现在基本都用mv**框架吧，就拿vue来说，就没有正儿八经的系统的去描述怎么用的。真是让人头大。。。官方API又说的很简明扼要，需要自己各种尝试。。。

这里只介绍vue项目中想通过新开一个浏览器线程，用于数据量大，请求的接口比较慢的作为应用场景：

因为在html和js中去用很简单，在vue cli中因为涉及到了文件打包，所以需要做配置。

首先，用webpack官方提供的worker-loader这个插件,但是因为又看见了一个叫做vue-worker的插件（是人家封装好的web worker，在vue中可以开箱即用的，不用再在配置文件中去添加一些配置）当然这就很好了，所以我刚开始用的时候作为首选，毕竟怎么简单怎么来嘛~

第一步:安装

npm i vue-worker

第二步：vue中使用

methods方法中去触发一个方法（比如点击事件），把入参发送给woker线程，worker请求接口

testFn() {
      this.worker = this.$worker.create([
        {
          message: "reqData",
          // 这个函数是另一个线程的，无法访问外面的任何属性，连window也不行
          func: e => {
            // console.log(window, "wo shi window"); //window is not defined
            console.log("收", e); // 接收到消息之后发送
            var getData = JSON.parse(JSON.stringify(e));
            delete getData.token;
            var url = new URL(process.env.VUE_APP_API_URL + "interviewer");
            var params = getData;
            Object.keys(params).forEach(key =>
              url.searchParams.append(key, params[key])
            );
            let { token } = e;
            let getInterfaceData = null;
            let resData = null;
            // 要想用async和await 需要配置babel-loader
            async function tempFn() {
              // 接口一直在pending，不知道怎么回事
              resData = await fetch(url, {
                headers: {
                  Accept: "application/json",
                  Authorization: "Bearer " + token
                }
              });
              //
              let getInterfaceData = await resData.json();
              console.log(resData, "dsdas");
            }
            tempFn();
            // 原生ajax也是一直pending
            // var xmlhttp = new XMLHttpRequest();
            // xmlhttp.open("GET", url, true);
            // xmlhttp.setRequestHeader("Authorization", "Bearer " + token);
            // xmlhttp.setRequestHeader("Accept", "application/json");
            // xmlhttp.send();
            // xmlhttp.onreadystatechange = function() {
            //   if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            //     console.log(xmlhttp.responseText);
            //   }
            // };
            // console.log("试试", e.context);
            return getInterfaceData;
          }
        }
      ]);
      let sendData = {
        page: this.currentPage,
        per_page: this.pageSize,
        type: 0,
        is_excellent: this.is_excellent,
        is_negative: this.is_negative,
        workcode: this.workcode,
        token: cookie.get("admin_token")
      };
      this.worker.postMessage("reqData", [sendData]).then(function(e) {
        console.log(e, "我是接口发来的数据");
      });
    },

效果：

两个问题：

1. func函数里面不能用外面任何属性和引入，所以也就只能用原生fetch 或 ajax开发送接口请求

2.接口请求一直pending，自然无法拿到数据。那还玩个毛？

好吧，既然暂时无法有一个好的解决方法，我们暂时换 worker-loader上场为我们服务：

（此案例是调用了一个列表页面的接口用于测试）

第一步：安装

npm i worker-loader (项目依赖)

第二步：vue.config.js配置

chainWebpack: config => {
    // 配置
    config.module
      .rule("worker")
      // .test(/\.worker\.js$/)
      .test(/\.worker\.(c|m)?js$/i)
      .use("worker")
      .loader("worker-loader")
      .options({
        inline: "fallback",
        filename: "[name].[contenthash].worker.js"
      })
    .end();

    // 解决 "window is undefined", 这是因为 worker 线程中不存在 window 对象, 要用 this 代替
    config.output.globalObject("this");
}

第三步：在vue组件中引入worker文件

// 引入存放worker的路径即可(注意，命名必須是xxx.worker.js結尾)
import myWorker1 from "@/worker/my1.worker.js";

第四步：在vue組件中的methods中创建实例，然后在created中去调用（初始化）

getList() {
      // 创建引入的worker实例
      let worker = new myWorker1();
      // 组织worker中接口需要的数据传递给worker
      const params = {
        page: this.currentPage,
        per_page: this.pageSize,
        type: 0,
        is_excellent: this.is_excellent,
        is_negative: this.is_negative,
        workcode: this.workcode,
        // 把登录后拿到的token传过去
        token: cookie.get("admin_token")
      };
      //向工作线程发送消息
      worker.postMessage(params);
      setTimeout(() => {
        worker.onmessage = event => {
          //主线程接收到工作线程的消息
          console.log(event.data.data, "主线程接收");
          // 拿到worker线程请求好的数据，给页面绑定数据
          let getWorkerData = event.data.data;
          if (getWorkerData) {
            this.tableData = getWorkerData.list;
            this.totalCount = getWorkerData.total;
            this.loading = false;
          }
          //关闭线程
          worker.terminate();
        };
      });

      worker.onerror = function(error) {
        console.log('错误信息', error, error.message);
        worker.terminate();
      };
}

第五步：创建worker文件

// 请求的接口
var url = new URL(process.env.VUE_APP_API_URL + "interviewer");
onmessage = async function(event) {
  // 克隆传来的数据，传来的接口数据中并不需要token,token只是用作鉴权用，拷贝后删掉token属性
  let cloneObj = JSON.parse(JSON.stringify(event.data));
  delete cloneObj.token;
  let params = cloneObj;
  // 把传来的对象格式序列化成查询字符串 ?key=value&xxx=xx,并拼在请求路径的后面，fetch文档并没有对get请求入参的api，需要自己处理
  Object.keys(params).forEach(key => url.searchParams.append(key, params[key]));
  //工作线程接收到主线程的消息
  console.log(event.data, "工作线程接收");
  // 发送fetch请求，并携带此项目需要的headers头部信息
  let res = await fetch(url, {
    headers: {
      Accept: "application/json",
      Authorization: "Bearer " + event.data.token
    }
  });
  let data = await res.json();
  if (data) {
    console.log(data, "接口数据");
    // 传给主线程
    postMessage(data);
  }
};
//错误信息
onerror = function(event) {
  console.log(event.message);
};