react中使用Woker线程发送异步ajax请求

简单封装使用

1 创建woker

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

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 使用

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

最后

以上就是狂野大象为你收集整理的react中使用Woker线程发送异步ajax请求的全部内容，希望文章能够帮你解决react中使用Woker线程发送异步ajax请求所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。