別のURLのRequestオブジェクトをコピーするにはどうすればよいですか？

Question

私はfetchの周りにリクエストを行う前にURLに何かを追加したいラッパーを書いています。クエリパラメータを識別します。私はどのように特定のURLのRequestオブジェクトのコピーをオリジナルとは異なるものにするかを理解できません。私のコードは次のようになります。

// My function which tries to modify the URL of the request 
function addLangParameter(request) { 
    const newUrl = request.url + "?lang=" + lang; 
    return new Request(newUrl, /* not sure what to put here */); 
} 

// My fetch wrapper 
function myFetch(input, init) { 
    // Normalize the input into a Request object 
    return Promise.resolve(new Request(input, init)) 
     // Call my modifier function 
     .then(addLangParameter) 
     // Make the actual request 
     .then(request => fetch(request)); 
} 

私はそうのように、Requestコンストラクタの二番目のarguentとして元の要求を入れてみました：

function addLangParameter(request) { 
    const newUrl = request.url + "?lang=" + lang; 
    return new Request(newUrl, request); 
} 

古い要求の属性のほとんどをコピーするには思われるが、古いリクエストのbodyを保持していないようです。たとえば、

const request1 = new Request("/", { method: "POST", body: "test" }); 
const request2 = new Request("/new", request1); 
request2.text().then(body => console.log(body)); 

「テスト」のログが記録されますが、本文がコピーされないため空の文字列がログに記録されます。

すべての属性を正しくコピーするために何か明示的に行う必要がありますか、または私にとって妥当な何かを行うための素敵なショートカットがありますか？

私はgithub/fetchポリフィルを使用していますが、最新のChromeではpolyfillとネイティブのfetchの実装をテストしました。

Answer 1

あなたの最善の策は、実装要求Bodyインタフェースを使用して、本体を読み取ることがあるように見えます：

https://fetch.spec.whatwg.org/#body

これが唯一の基礎となるため、非同期的に行うことができますが、操作は常に非同期に読み込む「体が消費」と約束を返します。このような何か作業をする必要があります：

const request = new Request('/old', { method: 'GET' }); 
const bodyP = request.headers.get('Content-Type') ? request.blob() : Promise.resolve(undefined); 
const newRequestP = 
    bodyP.then((body) => 
    new Request('/new', { 
     method: request.method, 
     headers: request.headers, 
     body: body, 
     referrer: request.referrer, 
     referrerPolicy: request.referrerPolicy, 
     mode: request.mode, 
     credentials: request.credentials, 
     cache: request.cache, 
     redirect: request.redirect, 
     integrity: request.integrity, 
    }) 
); 

ことをやった後、newRequestPは、あなたがしたい要求に解決約束されます。幸いにも、フェッチはとにかく非同期ですので、あなたのラッパーはこれによって大幅に妨げられるべきではありません。

（注：本文がないリクエストの.blob()を使用して本文を読み取ると、長さがゼロのBlobオブジェクトが返されるように見えますが、長さがゼロのボディもGET私が実際に決定する必要があるボディがあるかどうかの正確なプロキシです。）