简单封装使用

1 创建woker

javascript">const workercode = () => {
  this.onmessage = function (e) {
    let that = this;
    let params = JSON.parse(e.data);
    if (params.type === "xhr") {
      let xhr = new XMLHttpRequest();
      xhr.open(params.method, params.url);
      xhr.send();
      xhr.onreadystatechange = function () {
        if (this.readyState === 4) {
          that.postMessage(this.responseText);
        }
      };
    }
  };
};
// 把脚本代码转为string
let code = workercode.toString();
code = code.substring(code.indexOf("{") + 1, code.lastIndexOf("}"));

const blob = new Blob([code], { type: "application/javascript" });
const worker_script = URL.createObjectURL(blob);

module.exports = worker_script;

2 runwoker

javascript">import worker_script from "util/woker";

function runWoker(params) {
  return new Promise(function (resolve, reject) {
    let woker = new Worker(worker_script);
    woker.postMessage(JSON.stringify(params));
    woker.addEventListener("message", (e) => {
      resolve(JSON.parse(e.data));
    });
  });
}
export default runWoker;

3 使用

javascript">runWoker({
      type: "xhr",
      method: "GET",
      url: "http://127.0.0.1:8000/home/news/?area=AREA%257C88cff55c-aaa4-e2e0",
    }).then((res) => {
      setNewsHouse(res.body);
    });