gpt4 book ai didi

javascript - 无法在 'fetch' 上执行 'WorkerGlobalScope'

转载 作者:行者123 更新时间:2023-12-02 21:21:27 25 4
gpt4 key购买 nike

我尝试从网络 worker 内部的服务器获取数据。但在开发工具中每次我都会遇到同样的错误。

Uncaught (in promise) TypeError: Failed to execute 'fetch' on 'WorkerGlobalScope': Failed to parse URL from /api/books

我看到了this回答有关服务人员的问题,但这对我不起作用。

WebWorker 文件代码!

// data-handling.web-worker.js

const workercode = () => {
onmessage = async e => {
const res = await fetch('/api/books');

postMessage(res);
}
};

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);

export default worker_script;

导入到React组件中。

import data_handling_worker from "./data-handling.web-worker";
const dataHandlingWorker = new Worker(data_handling_worker);

在钩子(Hook)内运行和发布消息!

const [searchQuery, setSearchQuery] = useState('');
const [booksList, setBooksList] = useState([]);

useEffect(() => {
dataHandlingWorker.postMessage(searchQuery);
}, [searchQuery]);

useEffect(() => {
dataHandlingWorker.onmessage = (m) => {
setBooksList(m.data);
};
}, []);

最佳答案

blob:// URI 创建的工作线程有其 baseURI set to set to that blob:// URI

要获取相对 URL,浏览器首先必须从当前领域的 baseURI 构建绝对 URI。

因此,在您的情况下,浏览器将尝试使用 blob:[origin]/[UUID] 作为基础,从 /api/books 生成绝对 URL。 这就是抛出的:

const worker_script = `
postMessage( { baseURI: self.location.href } );
try {
const absolute = new URL( "api/books", self.location.href );
}
catch( err ) {
postMessage( { err: err.toString() } );
}
`;
const worker_url = URL.createObjectURL( new Blob( [ worker_script ] ) );
const worker = new Worker( worker_url );
worker.onmessage = (evt) => console.log( evt.data );

要解决该问题,您有两种选择:

  • 使用绝对 URL。这样您就不会遇到这个问题。

  • baseURI 从主线程传递到 Worker 的脚本。这样您就可以使用 URL constructor 自己创建绝对 URL .

第一个选项非常简单,所以我想您不需要示例。对于第二个,由于我们无法在 StackSnippets 中托管相关文件,I had to host it in this plunker .

这是代码:

const worker_script = `
onmessage = (evt) => {
const base = evt.data;
const absolute = new URL( "api/books", base );
fetch( absolute )
.then( (resp) => resp.text() )
.then( (txt) => postMessage( txt ) )
.catch( console.error );
};
`;
const worker_url = URL.createObjectURL( new Blob( [ worker_script ] ) );
const worker = new Worker( worker_url );
worker.onmessage = (evt) => document.body.append( evt.data );
// pass the main thread's baseURI
worker.postMessage( document.baseURI );

关于javascript - 无法在 'fetch' 上执行 'WorkerGlobalScope',我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60836401/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com