在 ES6 中修改新请求对象的 URL

Question

我只是在玩Fetch API，但遇到了一些我似乎无法找到答案的东西。如果我像这样创建一个新的请求对象：

let request = new Request('http://www.foo.com', {
  method: 'GET',
  mode: 'no-cors',
  headers: new Headers({
'Content-Type': 'application/x-www-form-urlencoded'
  })
});

如果我随后尝试修改 URL（向其附加查询字符串），我会在浏览器中收到错误消息 (Cannot assign to read only property)。我知道通常使用对象，您可以将writable 设置为“True”，但这对请求对象是否同样有效？

我问的原因是我试图将查询字符串附加到 URL 的末尾。这些options 在另一个对象中，我将它的值连接到一个字符串中，因此它类似于：

number=1&id=130&foo=bar 等

我是否试图过度设计我在这里所做的事情？

Answer 1

您可以将旧请求中的所有属性复制到具有新 url 的新请求中，如下所示：

const init = { 
  method: 'GET',
  mode: 'no-cors',
  headers: new Headers({
    'Content-Type': 'application/x-www-form-urlencoded'
  })
};
const oldRequest = new Request("https://old-url.com", init);
const newRequest = new Request("https://new-url.com", oldRequest);

console.log(newRequest.mode === oldRequest.mode); // true
console.log(newRequest.headers.get('Content-Type') === oldRequest.headers.get('Content-Type')); // true
console.log(newRequest.method === oldRequest.method); // true

Answer 2

Request 对象在设计上是不可变的，不要试图改变它。

我希望clone() 实例方法接受的选项能够调整克隆对象，但事实并非如此。所以我想出了这个功能：

function appendQuery(urlOrReq, queryString) {
    // make sure we deal with a Request object even if we got a URL string
  const req = urlOrReq instanceof Request ? urlOrReq : new Request(urlOrReq);

  const {
    cache, credentials, headers, integrity, method,
    mode, redirect, referrer, referrerPolicy, url, body
  } = req;

  // Don't add query string if there's none
  const urlWithQuery = url + (!queryString ? '' : '?' + queryString);

  return new Request(urlWithQuery, {
    cache, credentials, headers, integrity, method,
    mode, redirect, referrer, referrerPolicy, body
  })
}

在 TypeScript 中也是一样的（只是第一行不同）：

function appendQuery(urlOrReq: RequestInfo, queryString?: string): Request {
    // make sure we deal with a Request object even if we got a URL string
  const req = urlOrReq instanceof Request ? urlOrReq : new Request(urlOrReq);

  const {
    cache, credentials, headers, integrity, method,
    mode, redirect, referrer, referrerPolicy, url, body
  } = req;

  // Don't add query string if there's none
  const urlWithQuery = url + (!queryString ? '' : '?' + queryString);

  return new Request(urlWithQuery, {
    cache, credentials, headers, integrity, method,
    mode, redirect, referrer, referrerPolicy, body
  })
}

它是这样工作的：

const req = new Request('https://google.com')
appendQuery(req, 'foo=42')
// => Request {method: "GET", url: "https://google.com?foo=42", headers: Headers, destination: "", referrer: "about:client", …}