Fetch関数のレスポンス内容の監視

Question

JavaScript の FetchAPI を監視するスクリプトを開発しています。

const realFetch = fetch;
fetch = function(url, option = {}) {
	console.log(url);
	return realFetch.call(this, url, option);
}

上記のコードで Fetch関数 でリクエストURLが分かる(ログ)機能を作ることができましたが、
レスポンス内容を上記のコードを崩さないまま取得する方法を教えてほしいです。

※開発者ツールの「ネットワーク」機能をスクリプト作ってみる、ということです

Comments

[退会済みユーザー]

console.log てことは javascript 開発コンソールで表示することであって
通常機能（ネットワーク→ XHR）で確認できますが

[退会済みユーザー]

追記しときます。そういったのをスクリプトで実装したいということです。

Answer 1

return realFetch.call()してみてください。

fetch は Promise を返却するAPIです。

ご質問のコードのような、wrapする形で機能拡張する場合、
realFetchの結果を返却する必要があるはずです。

---

追記）

ご質問のコードだと、return せずに関数を抜けています。

const realFetch = fetch;
fetch = function(url, option = {}) {
    console.log(url);
    return realFetch.call(this, url, option);
}

Comments

[退会済みユーザー]

すいません、まだまだ未熟な者でして回答に意味が少し...
もう少し詳しく教えていただけないでしょうか。

[退会済みユーザー]

ありがとうございます。
そしてこれをどのように変えればレスポンス内容を取得できるのでしょうか。

[AkitoshiManabe]

fetch API 同様に使えます。
https://developer.mozilla.org/ja/docs/Web/API/Fetch_API
https://developer.mozilla.org/ja/docs/Web/API/Fetch_API/Using_Fetch