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

151 阅读 0 评论 100 点赞

我是靠谱客的博主狂野大象，这篇文章主要介绍react中使用Woker线程发送异步ajax请求，现在分享给大家，希望可以做个参考。

简单封装使用

1 创建woker

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
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

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
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 使用

复制代码

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