摘要：在前端監(jiān)控系統(tǒng)中，或者其他場景下，如果我們需要監(jiān)控當(dāng)前頁面下所有請(qǐng)求狀態(tài)。在通常的監(jiān)控中，監(jiān)控部分的代碼和業(yè)務(wù)部分的代碼是分離的。本文通過的方法實(shí)現(xiàn)了一個(gè)包可以按需求監(jiān)聽請(qǐng)求。

??在前端監(jiān)控系統(tǒng)中，或者其他場景下，如果我們需要監(jiān)控當(dāng)前頁面下所有請(qǐng)求狀態(tài)。可能通常請(qǐng)求下，我們會(huì)選擇在請(qǐng)求的回調(diào)中去處理。這種做法的缺點(diǎn)就是會(huì)侵入具體的業(yè)務(wù)代碼。在通常的監(jiān)控中，監(jiān)控部分的代碼和業(yè)務(wù)部分的代碼是分離的。此外，如果存在很多的請(qǐng)求需要被監(jiān)聽，通過侵入具體業(yè)務(wù)代碼，為了減少代碼的重復(fù)，也需要封裝監(jiān)聽請(qǐng)求的邏輯。

??本文通過monkey patches的方法實(shí)現(xiàn)了一個(gè)request-interceptor包,可以按需求監(jiān)聽請(qǐng)求。

??該npm包的項(xiàng)目地址為：https://github.com/forthealll... 歡迎使用。

獲取API請(qǐng)求的狀態(tài)和結(jié)果
monkey patches實(shí)現(xiàn)監(jiān)控XMLHttpRequest請(qǐng)求
monkey patches實(shí)現(xiàn)監(jiān)控fetch請(qǐng)求

本文的原文在我的博客中：https://github.com/forthealll...

歡迎star

??獲取請(qǐng)求的方式包含了fetch和XMLHttpRequest。比如下面是一個(gè)XMLHttpRequest請(qǐng)求的例子：

var client = new XMLHttpRequest();
client.open("POST","http://10.12.72.16:8080/extraInfo" );
client.setRequestHeader("Content-Type", "application/json; charset=utf-8");
client.send(JSON.stringify({}));

??通常我們會(huì)通過client上出發(fā)的readystatechange來判斷請(qǐng)求的狀態(tài)以及得到請(qǐng)求的響應(yīng)結(jié)果：

client.onreadystatechange = function () {
if (client .readyState==4 &&client.status==200) {
　　　　console.log(client.responseText);//
　　}
}

??XMLHttpRequest的prototype除了onreadystatechange事件外還有其他很多事件，比如onabout、onerror、onload、onloadstart等等事件。如果我們要完整的監(jiān)聽一個(gè)請(qǐng)求，那么需要實(shí)現(xiàn)完整的實(shí)現(xiàn)這些事件：

client.onabout = function(){}
client.onerror = function(){}
clinet.onload = function(){}
client.onloadstart = function(){}
 ....

??此外如果當(dāng)某一個(gè)事件發(fā)生時(shí)，需要按順序的實(shí)行一系列的函數(shù)，這樣會(huì)使得事件函數(shù)內(nèi)部越來越復(fù)雜，使得整體項(xiàng)目變的無法維護(hù)。

fetch請(qǐng)求也是同理,因此我們需要合理的封裝監(jiān)聽請(qǐng)求的邏輯。

本文不會(huì)具體介紹如何通過monkey patches來封裝監(jiān)聽請(qǐng)求的邏輯，該邏輯已經(jīng)在我的npm包中實(shí)現(xiàn)，具體可以參考我的開源項(xiàng)目：

https://github.com/forthealll...

本文只介紹如何使用，如有興趣，可以讀一讀具體如何實(shí)現(xiàn)這個(gè)monkey patches，在目錄的source文件夾中，如有疑問，可以提issue。

該npm包的包名為：req-interceptor。首先來看對(duì)于XMLHttpRequest請(qǐng)求如何使用：

import { ajaxIntercept } from "req-interceptor";

//監(jiān)聽
const unregister = ajaxIntercept.register({
  requestAbout: function (xhr) {
      // xhr is real instance of a request
      console.log(xhr)
  },
  requestError: function (xhr) {
      // xhr is real instance of a request
      console.log(xhr)
  },
  requestLoad: function (xhr) {
      // xhr is real instance of a request
      console.log(xhr)
  },
});

//發(fā)送請(qǐng)求

var client = new XMLHttpRequest();
client.open("POST","http://10.12.72.16:8080/extraInfo" );
client.setRequestHeader("Content-Type", "application/json; charset=utf-8");
client.send(JSON.stringify({}));

只需要在發(fā)送請(qǐng)求前先調(diào)用ajaxIntercept.register函數(shù)傳入監(jiān)聽的對(duì)象，該函數(shù)會(huì)返回一個(gè)取消監(jiān)聽的方法。

這樣就監(jiān)聽之后的任意請(qǐng)求，在ajaxIntercept.register中的實(shí)際參數(shù)的對(duì)象中，對(duì)象的屬性是一個(gè)函數(shù)，參數(shù)為xhr，xhr就是一個(gè)被監(jiān)聽的XMLHttpRquest，因此我們可以從xhr中拿到請(qǐng)求的具體響應(yīng)。xhr的一個(gè)例子為：

xhr = {
          readyState: 4
          response: "{"success":0}"
          responseText: "{"success":0}"
          responseType: ""
          responseURL: "http://10.12.72.16:8080/extraInfo"
          responseXML: null
          status: 201
          statusText: "Created"
          timeout: 0
     }

如果我們?cè)谌∠麑?duì)于某一個(gè)請(qǐng)求的監(jiān)聽，則調(diào)用該返回的
unregister函數(shù)，此后請(qǐng)求不會(huì)再被監(jiān)聽。

unregister();

此外我們也可以在某一個(gè)請(qǐng)求前添加多個(gè)監(jiān)聽函數(shù)：

import { ajaxIntercept } from "req-interceptor";
//監(jiān)聽
const unregister1 = ajaxIntercept.register({...});
const unregister2 = ajaxIntercept.register({...});
const unregister3 = ajaxIntercept.register({...});
//請(qǐng)求
client.open(url,....)

如果我們想要一次性移除所有的對(duì)于請(qǐng)求的監(jiān)聽函數(shù)，可以直接調(diào)用：

ajaxIntercept.clear();

對(duì)于fetch請(qǐng)求也是一樣的。

import { fetchIntercept } from "req-interceptor";


import { fetchIntercept } from "req-interceptor";

const unregister = fetchIntercept.register({
    request: function (url, config) {
        // Modify the url or config here
        return [url, config];
    },

    requestError: function (error) {
        // Called when an error occured during another "request" interceptor call
        return Promise.reject(error);
    },

    response: function (response) {
        // Modify the reponse object
        return response;
    },

    responseError: function (error) {
        // Handle an fetch error
        return Promise.reject(error);
    }
});

// Call fetch to see your interceptors in action.
fetch("http://google.com");

不同的是，fetch不像XMLHttpRequest請(qǐng)求那樣，可以監(jiān)聽完整的過程，fetch只有request、requestError、response和responseError這4個(gè)屬性可以監(jiān)聽，分別映射請(qǐng)求的參數(shù)，請(qǐng)求失敗，請(qǐng)求返回成功，請(qǐng)求返回失敗。

同樣的也可以通過返回函數(shù)來取消監(jiān)聽，以及通過clear函數(shù)來取消所有監(jiān)聽函數(shù)。