国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

發布一個npm包,用于監控頁面中的所有API請求的狀態和結果

Y3G / 2560人閱讀

摘要:在前端監控系統中,或者其他場景下,如果我們需要監控當前頁面下所有請求狀態。在通常的監控中,監控部分的代碼和業務部分的代碼是分離的。本文通過的方法實現了一個包可以按需求監聽請求。

??在前端監控系統中,或者其他場景下,如果我們需要監控當前頁面下所有請求狀態。可能通常請求下,我們會選擇在請求的回調中去處理。這種做法的缺點就是會侵入具體的業務代碼。在通常的監控中,監控部分的代碼和業務部分的代碼是分離的。此外,如果存在很多的請求需要被監聽,通過侵入具體業務代碼,為了減少代碼的重復,也需要封裝監聽請求的邏輯。

??本文通過monkey patches的方法實現了一個request-interceptor包,可以按需求監聽請求。

??該npm包的項目地址為:https://github.com/forthealll... 歡迎使用。

獲取API請求的狀態和結果

monkey patches實現監控XMLHttpRequest請求

monkey patches實現監控fetch請求

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

歡迎star

一、獲取API請求和結果

??獲取請求的方式包含了fetch和XMLHttpRequest。比如下面是一個XMLHttpRequest請求的例子:

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({}));

??通常我們會通過client上出發的readystatechange來判斷請求的狀態以及得到請求的響應結果:

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

??XMLHttpRequest的prototype除了onreadystatechange事件外還有其他很多事件,比如onabout、onerror、onload、onloadstart等等事件。如果我們要完整的監聽一個請求,那么需要實現完整的實現這些事件:

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

??此外如果當某一個事件發生時,需要按順序的實行一系列的函數,這樣會使得事件函數內部越來越復雜,使得整體項目變的無法維護。

fetch請求也是同理,因此我們需要合理的封裝監聽請求的邏輯。

二、monkey patches實現監控XMLHttpRequest請求

本文不會具體介紹如何通過monkey patches來封裝監聽請求的邏輯,該邏輯已經在我的npm包中實現,具體可以參考我的開源項目:

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

本文只介紹如何使用,如有興趣,可以讀一讀具體如何實現這個monkey patches,在目錄的source文件夾中,如有疑問,可以提issue。

該npm包的包名為:req-interceptor。首先來看對于XMLHttpRequest請求如何使用:

import { ajaxIntercept } from "req-interceptor";

//監聽
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)
  },
});

//發送請求

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({}));

只需要在發送請求前先調用ajaxIntercept.register函數傳入監聽的對象,該函數會返回一個取消監聽的方法。

這樣就監聽之后的任意請求,在ajaxIntercept.register中的實際參數的對象中,對象的屬性是一個函數,參數為xhr,xhr就是一個被監聽的XMLHttpRquest,因此我們可以從xhr中拿到請求的具體響應。xhr的一個例子為:

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
     }

如果我們在取消對于某一個請求的監聽,則調用該返回的
unregister函數,此后請求不會再被監聽。

unregister();

此外我們也可以在某一個請求前添加多個監聽函數:

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

如果我們想要一次性移除所有的對于請求的監聽函數,可以直接調用:

ajaxIntercept.clear();
三、monkey patches實現監控fetch請求

對于fetch請求也是一樣的。

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請求那樣,可以監聽完整的過程,fetch只有request、requestError、response和responseError這4個屬性可以監聽,分別映射請求的參數,請求失敗,請求返回成功,請求返回失敗。

同樣的也可以通過返回函數來取消監聽,以及通過clear函數來取消所有監聽函數。

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/117280.html

相關文章

  • 發布一個npm用于監控頁面所有API請求狀態結果

    摘要:在前端監控系統中,或者其他場景下,如果我們需要監控當前頁面下所有請求狀態。在通常的監控中,監控部分的代碼和業務部分的代碼是分離的。本文通過的方法實現了一個包可以按需求監聽請求。 ??在前端監控系統中,或者其他場景下,如果我們需要監控當前頁面下所有請求狀態。可能通常請求下,我們會選擇在請求的回調中去處理。這種做法的缺點就是會侵入具體的業務代碼。在通常的監控中,監控部分的代碼和業務部分的代...

    zhiwei 評論0 收藏0
  • 發布一個npm用于監控頁面所有API請求狀態結果

    摘要:在前端監控系統中,或者其他場景下,如果我們需要監控當前頁面下所有請求狀態。在通常的監控中,監控部分的代碼和業務部分的代碼是分離的。本文通過的方法實現了一個包可以按需求監聽請求。 ??在前端監控系統中,或者其他場景下,如果我們需要監控當前頁面下所有請求狀態。可能通常請求下,我們會選擇在請求的回調中去處理。這種做法的缺點就是會侵入具體的業務代碼。在通常的監控中,監控部分的代碼和業務部分的代...

    stackvoid 評論0 收藏0
  • Vue入坑筆記

    摘要:近段時間常使用開發,寫點記錄,避免時間久之忘了。安裝教程查看是否已安裝,在中輸入若已安裝則輸出版本號。繼承報錯可能是文件路徑問題。當和繼承的不同時在文件夾內外的話,會出現該錯誤。 近段時間常使用vue-cli開發,寫點記錄,避免時間久之忘了。 環境 1. nodejs  vue-cli開發基于nodejs環境,確保開發的環境中已安裝了nodejs。  安裝教程 https://www....

    superw 評論0 收藏0
  • React+Koa全棧開發手記

    摘要:本項目中采用了進行狀態管理,的主要作用是允許狀態在不同分支的組件中進行傳遞,從而避免了使用原始方法如導致的不同分支組件之間數據無法傳遞子組件無法修改父組件狀態等問題。 項目功能 最近在做一個舊書交易網站,本屬于B/S體系結構的課程作業,但由于采用了新的框架所以躍躍欲試想都記錄下來。 實現一個舊書交易網站,基本功能如下: 實現用戶注冊、登錄功能,用戶注冊時需要填寫必要的信息并驗證,如...

    wqj97 評論0 收藏0

發表評論

0條評論

Y3G

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<