在沒有服務器的情況下處理POST或GET請求

Question

我正在閱讀以下文章：

https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data

在這里，將說明AJAX的概念，但是為了簡單說明起見，不是從服務器連接內容，而是從裝有瀏覽器的系統中獲取內容。

因此，在上述鏈接的以下代碼行中：

var url = verse + '.txt';
var request = new XMLHttpRequest();
request.open('GET', url);

這里的GET動詞是在本地系統中獲取文件的內容，並且那里沒有服務器。

類似地，通過使用javascript並在沒有服務器的情況下，我們可以向GET或POST動詞添加一些參數，並在本地系統中運行代碼來處理這些參數並發送輸出。

喜歡 ：

var url =  'verse + '.txt' + '?' 'name = ' + 'vim' ; //Adding parameters

並且將有一個javascript文件，該文件帶有這些參數“ name”並以大寫形式返回，如“ VIM”。

我們是否可以僅使用Javascript來做類似的事情（而不是使用nodejs或用於設置服務器的任何事情）而無需服務器偵聽？

Answer 1

要達到此要求，您可以使用Chromium或Chrome瀏覽器（已設置--allow-file-access-from-files標志設置）啟動。

盡管XMLHttpRequest()允許，但fetch()不允許請求具有file:協議的本地文件。 fetch()確實允許請求data URL和Blob URL 。

對於

一些javascript文件，該文件接受這些參數“ name”並以大寫形式返回，例如“ VIM”

可以使用Worker獲取本地文件的內容，操作內容，然后可以調用postMessage()與主線程進行通信。

例如

worker.js

onmessage = e => {
  // do stuff
  let url = new URL(e.data);
  let [[,param]] = [...url.searchParams]; // get query string parameter `'vim'`
  let request = new XMLHttpRequest();
  request.open('GET', 'file:///path/to/local/file' /* e.data */);
  request.onload = e => {
    console.log(request.responseText); // `setTimeout()` can be inside `load` handler
  }
  request.send();
  // asynchronous response
  setTimeout(() => {
    // set `data URL` that `fetch()` will request
    postMessage(`data:text/plain,${param.toUpperCase()}`);
  }, Math.floor(Math.random() * 2000));
}

在console或script

const localRequest = async(url) => {
  const request = await fetch(await new Promise(resolve => {
    const worker = new Worker('worker.js');
    worker.onmessage = e => {
      resolve(e.data);
      worker.terminate();
    }
    worker.postMessage(url);
  }));
  const response = await request.text();
  console.log(response);
}

localRequest('file:///verse.txt?name=vim');