从 Fetch API 更改请求对象的 URL答案

【问题标题】：Changing the URL of a Request object from the Fetch API从 Fetch API 更改请求对象的 URL
【发布时间】：2018-02-10 05:45:03
【问题描述】：

假设我有一个以Request 对象作为参数并调用fetch() API 的小函数。

除了我总是想在 url 上附加一些东西，比如?foo=bar。我很好奇最好的方法是什么。

例子：

function fetchFoo(request) {

   request.url += '?foo=bar';
   return fetch(request);

}

我的问题是这行不通。 Fetch API specification 声明 url 属性是只读的。

有没有办法解决这个问题？我在想我可能需要构造一个全新的 Request 对象，但我不确定从以前的 Request 对象继承所有选项的聪明方法是什么。

请注意，我可以使用以下语法覆盖任何其他属性：

var originalRequest = new Request('/url');
var overriddenRequest = new Request(originalRequest, { method: 'POST' });

虽然从文档中并不清楚，但似乎第二个 init 参数优先于通过 originalRequest 参数传递的值。我似乎也想不出一种方法来为 url 执行此操作。

【问题讨论】：

而不是传递请求对象，而是传递请求选项（虽然可能是一个很大的重写，对吧？）
@JaromandaX 理想情况下，我的库可以接受普通fetch() 也可以接受的每个参数，并且只是“装饰”请求。不过，支持部分参数可能是一个不错的 B 计划，谢谢！
另一种选择是requestFoo 函数，它接受与new Request 类似的参数并在此时添加?foo=bar
@JaromandaX 这是个好主意，除了有一个边缘情况！ new Request 构造函数还可以将另一个 Request 对象作为其第一个参数。我在刚才的问题中添加了一些注释。
是的，我明白这一点，但是使用我建议的 requestFoo 函数应该不会有问题，因为如果参数是请求对象或字符串，您将在代码中知道 -我认为可能有一种简单的方法可以根据传入的请求创建新的请求，但是您不能从请求对象中“检索”body、redirect 或 integrity 属性

标签： javascript fetch-api

【解决方案1】：

您可以利用 Request.prototype 上的键在短短几行内构建一个新的 Request 对象。

function newRequest(input, init) {
    var url = input;
    if (input instanceof Request) {
        url = mutateUrl(input.url);

        init = init || {};
        Object.keys(Request.prototype).forEach(function (value) {
            init[value] = input[value];
        });
        delete init.url;

        return input.blob().then(function (blob) {
            if (input.method.toUpperCase() !== 'HEAD' && input.method.toUpperCase() !== 'GET' && blob.size > 0) {
                init.body = blob;
            }

            return new Request(url, init);
        })
    } else {
        url = mutateUrl(url);
    }

    return new Request(url, init);
}

注意this answer 中讨论的body 的特殊情况。

【讨论】：