無法在“WorkerGlobalScope”上執行“獲取”

Question

我試圖從 web 工作人員內部的服務器獲取數據。 但是在開發工具中，每次我都會遇到同樣的錯誤。

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

我看到了這個關於服務人員的答案，但它對我不起作用。

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

在掛鈎內運行和發布消息！

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

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

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

Answer 1

從blob:// URI 創建的工作人員將其baseURI設置為該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 構造函數自己創建絕對 URL。

第一個選項非常簡單，所以我想你不需要一個例子。 第二，由於我們不能在 StackSnippets 中托管相關文件，我不得不在這個 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 );

Answer 2

我的問題是我想根據緩存做出有條件的響應。

我正在使用請求對象並關注這篇文章並使用絕對網址解決了問題。

const respuesta = caches.match('codeGalery/cat.jpg')
.then((response) => 
{
  if (response !== undefined)
  {
    return response;
  }
  //wrong
  //return fetch(FetchEvent.request, {credentials:"same-origin"});
  //correct
  return fetch(FetchEvent.request.url, {credentials:"same-origin"});

});

Answer 3

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