web-dev-qa-db-ja.com

JavaScriptでのFetch（）APIの応答と要求の傍受

JavaScriptでAPIのフェッチ要求と応答をインターセプトしたいのですが。

例：リクエストを送信する前にリクエストURLをインターセプトし、レスポンスを取得したらレスポンスをインターセプトしたい。

以下のコードは、All XMLHTTPRequestのインターセプト応答用です。

(function(open) {
 XMLHttpRequest.prototype.open = function(XMLHttpRequest) {
    var self = this;
    this.addEventListener("readystatechange", function() {
        if (this.responseText.length > 0 && this.readyState == 4 && this.responseURL.indexOf('www.google.com') >= 0) {
            Object.defineProperty(self, 'response', {
                get: function() { return bValue; },
                set: function(newValue) { bValue = newValue; },
                enumerable: true,
                configurable: true
            });
            self.response = 'updated value' //Intercepted Value 
        }
    }, false);
    open.apply(this, arguments);
};
})(XMLHttpRequest.prototype.open);

Fetch（）APIに同じ機能を実装したいと思います。

前もって感謝します..

javascriptajaxxmlhttprequestinterceptorfetch-api
18
Hariharan Subramanian

フェッチリクエストとパラメータをインターセプトするには、以下の方法を使用できます。それは私の問題を解決しました。

 const constantMock = window.fetch;
 window.fetch = function() {
     // Get the parameter in arguments
     // Intercept the parameter here 
    return constantMock.apply(this, arguments)
 }
17
Hariharan Subramanian

応答本文をインターセプトするには、新しいPromiseを作成し、currentを「then」コードに解決または拒否する必要があります。それは私のために解決し、実際のアプリのコンテンツを保持します。例えば。反応など.

const constantMock = window.fetch;
 window.fetch = function() {
  console.log(arguments);

    return new Promise((resolve, reject) => {
        constantMock.apply(this, arguments)
            .then((response) => {
                if(response.url.indexOf("/me") > -1 && response.type != "cors"){
                    console.log(response);
                    // do something for specificconditions
                }
                resolve(response);
            })
            .catch((error) => {
                reject(response);
            })
    });
 }
8
Eduardo Fabricio
const fetch = window.fetch;
window.fetch = (...args) => (async(args) => {
    var result = await fetch(...args);
    console.log(result); // intercept response here
    return result;
})(args);
3
AshUK