javascript - 从 Fetch API 更改请求对象的 URL

Question

假设我有一个小函数，它接受一个 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 执行此操作。

Answer 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 的特殊情况.