成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

前端監(jiān)控?cái)?shù)據(jù)收集（請求攔截）

娣辯孩 / 2970人閱讀

摘要：的五種就緒狀態(tài)請求未初始化還沒有調(diào)用。請求已發(fā)送，正在處理中通常現(xiàn)在可以從響應(yīng)中獲取內(nèi)容頭。并且還提供了每個階段的事件如果請求中止，會觸發(fā)事件。網(wǎng)絡(luò)錯誤如太多重定向會阻止請求完成，會觸發(fā)事件。當(dāng)?shù)却?wù)器的響應(yīng)時(shí)，對象會發(fā)生事件。

所謂web,即使你我素未謀面，便知志趣相投；足不出戶，亦知世界之大。

01 — 為什么攔截請求

現(xiàn)在的web應(yīng)用，大都是通過請求（http）去獲取資源，拿到資源后再呈現(xiàn)給用戶，一個頁面中可以有多個這樣的請求。每一次請求的開始，等待，完成，異常都會有相應(yīng)的狀態(tài)來標(biāo)識。我們在自己的框架中通常都會使用一個全局過濾器，來攔截請求，目的大同小異：

在發(fā)送請求之前，修改請求參數(shù)，添加請求頭

請求發(fā)送中的進(jìn)度計(jì)算（通常是文件上傳）

請求出錯后的捕獲

請求結(jié)束后，處理后臺返回?cái)?shù)據(jù)結(jié)構(gòu)，進(jìn)行適配

……

看看請求的整個流程圖：

而我們最常用的發(fā)送請求的便是XMLHttpRequest。

XMLHttpRequest.readyState的五種就緒狀態(tài)：

0：請求未初始化（還沒有調(diào)用 open()）。

1：請求已經(jīng)建立，但是還沒有發(fā)送（還沒有調(diào)用 send()）。

2：請求已發(fā)送，正在處理中（通?，F(xiàn)在可以從響應(yīng)中獲取內(nèi)容頭）。

3：請求在處理中；通常響應(yīng)中已有部分?jǐn)?shù)據(jù)可用了，但是服務(wù)器還沒有完成響應(yīng)的生成。

4：響應(yīng)已完成；您可以獲取并使用服務(wù)器的響應(yīng)了。

并且XMLHttpRequest還提供了每個階段的事件：

abort

如果請求中止，會觸發(fā)abort事件。

error

網(wǎng)絡(luò)錯誤（如太多重定向）會阻止請求完成，會觸發(fā)error事件。

load

當(dāng)事件完成，會觸發(fā)load事件。

loadend

當(dāng)一個請求完成，無論成功（load）或者不成功（abort/error）后觸發(fā)

loadstart

當(dāng)調(diào)用send()時(shí)，觸發(fā)單個loadstart事件。

progress

當(dāng)?shù)却?wù)器的響應(yīng)時(shí)，XHR對象會發(fā)生progress事件。通常每隔50毫秒左右，所以可以使用這事件給用戶反饋請求的進(jìn)度。

timeout

當(dāng)?shù)却?wù)器的響應(yīng)超時(shí)會觸發(fā)。

02 — 如何攔截請求

了解了XMLHttpRequest的請求流程后，我們就可以開始去攔截瀏覽器發(fā)出的請求，去做我們想做的事。

方式一：

(function (xhr) {
// Capture request before any network activity occurs:
  var send = xhr.send;
  xhr.send = function (data) {
  this.addEventListener("loadstart", onLoadStart);
  this.addEventListener("loadend", onLoadEnd);
  this.addEventListener("error", onError);
  return send.apply(this, arguments);
  };
})(XMLHttpRequest.prototype);

這種是最簡單直接的方式，修改XMLHttpRequest的原型，在發(fā)送請求時(shí)開啟事件監(jiān)聽。大多數(shù)情況下都是沒什么大問題的，但后來發(fā)現(xiàn)在Angular4+以上版本中這樣去攔截，請求觸發(fā)loadend事件后獲取到的請求響應(yīng)成功與否狀態(tài)始終為false，因?yàn)锳ngualr2后來的版本也使用事件監(jiān)聽來處理攔截，有些地方就沖突了。

方式二：

出現(xiàn)問題總要解決吧，然后就采用方法一的升級版本，完全重寫XMLHttpRequest。

(function () {
  // create XMLHttpRequest proxy object
  var oldXMLHttpRequest = XMLHttpRequest;
  // define constructor for my proxy object
  window.XMLHttpRequest = function () {
    var actual = new oldXMLHttpRequest();
    var self = this;
    this.onreadystatechange = null;
    // this is the actual handler on the real XMLHttpRequest object
    actual.onreadystatechange = function () {
      if (this.readyState == 1) {
      onLoadStart.call(this);
      } else if (this.readyState == 4) {
        if(this.status==200)
           onLoadEnd.call(this);
        else{
           onError.call(this);
        }
      }
     if (self.onreadystatechange) {
        return self.onreadystatechange();
      }
    };
?
?
// add all proxy getters
["status", "statusText", "responseType", "response",
"readyState", "responseXML", "upload"
].forEach(function (item) {
  Object.defineProperty(self, item, {
  get: function () {
    return actual[item];
   },
  set: function (val) {
    actual[item] = val;
  }
  });
});
?
?
// add all proxy getters/setters
["ontimeout, timeout", "withCredentials", "onload", "onerror", "onprogress"].forEach(function (item) {
  Object.defineProperty(self, item, {
    get: function () {
      return actual[item];
    },
    set: function (val) {
      actual[item] = val;
    }
  });
});
?
?
// add all pure proxy pass-through methods
["addEventListener", "send", "open", "abort", "getAllResponseHeaders",
"getResponseHeader", "overrideMimeType", "setRequestHeader", "removeEventListener"
].forEach(function (item) {
  Object.defineProperty(self, item, {
    value: function () {
      return actual[item].apply(actual, arguments);
    }
   });
  });
  }
})();
03 — 項(xiàng)目實(shí)戰(zhàn)

現(xiàn)在我們可以放心的攔截瀏覽器發(fā)出的請求了，媽媽再也不用擔(dān)心我的學(xué)習(xí)了，哈哈。說一千道一萬，來點(diǎn)干貨，直接看項(xiàng)目。

傳送門：web-monitor

喜歡請點(diǎn)個贊唄

或者去https://github.com/kisslove/w... Star一下

或者打賞一下

再或者……

哈哈，想法有點(diǎn)多了。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/19484.html

相關(guān)文章

  • 前端監(jiān)控數(shù)據(jù)收集（請求攔截）

    摘要：的五種就緒狀態(tài)請求未初始化還沒有調(diào)用。請求已發(fā)送，正在處理中通?，F(xiàn)在可以從響應(yīng)中獲取內(nèi)容頭。并且還提供了每個階段的事件如果請求中止，會觸發(fā)事件。網(wǎng)絡(luò)錯誤如太多重定向會阻止請求完成，會觸發(fā)事件。當(dāng)?shù)却?wù)器的響應(yīng)時(shí)，對象會發(fā)生事件。 所謂web,即使你我素未謀面，便知志趣相投；足不出戶，亦知世界之大。 01 — 為什么攔截請求 現(xiàn)在的web應(yīng)用，大都是通過請求（http）去獲取資源，拿到...

    IntMain 評論0 收藏0

  • JS實(shí)現(xiàn)監(jiān)控微信小程序

    摘要：博客地址使用模塊化工具打包自己開發(fā)的庫文章中有提到，當(dāng)時(shí)需要寫一個，監(jiān)控小程序的后臺接口調(diào)用和頁面報(bào)錯，今天就來說下實(shí)現(xiàn)原理吧原理之前也做過瀏覽器端的數(shù)據(jù)埋點(diǎn)上報(bào)，其實(shí)原理大同小異通過劫持原始方法，獲取需要上報(bào)的數(shù)據(jù)，最后再執(zhí)行原始方法，這 博客地址 《使用模塊化工具打包自己開發(fā)的JS庫》文章中有提到，當(dāng)時(shí)需要寫一個SDK，監(jiān)控小程序的后臺接口調(diào)用和頁面報(bào)錯，今天就來說下實(shí)現(xiàn)原理吧！ ...

    Cheriselalala 評論0 收藏0

  • 如何實(shí)現(xiàn)一個IOS網(wǎng)絡(luò)監(jiān)控組件

    摘要：此文由作者朱志強(qiáng)授權(quán)網(wǎng)易云社區(qū)發(fā)布。代碼演示核心代碼將原方法放在中聲明函數(shù)指針實(shí)現(xiàn)函數(shù)使用系統(tǒng)方法的函數(shù)指針完成系統(tǒng)的實(shí)現(xiàn)在這里獲取到了系統(tǒng)方法調(diào)用的時(shí)機(jī)在程序啟動后調(diào)用對委托模型的監(jiān)控替換方法時(shí)需要指定類名，而的的類并不確定。 此文由作者朱志強(qiáng)授權(quán)網(wǎng)易云社區(qū)發(fā)布。 Mobile Application Monitor IOS組件設(shè)計(jì)技術(shù)分享 背景應(yīng)用程序性能管理Application...

    xbynet 評論0 收藏0

  • HelloType：JS運(yùn)行時(shí)數(shù)據(jù)類型檢查工具

    摘要：進(jìn)入主頁使用文檔是一個設(shè)計(jì)簡單的運(yùn)行時(shí)的數(shù)據(jù)類型檢查工具，它可以幫助你的程序在使用某個組變量前，對變量的數(shù)據(jù)類型進(jìn)行檢查，防止在使用變量進(jìn)行運(yùn)算時(shí)由于數(shù)據(jù)類型不同導(dǎo)致報(bào)錯。 showImg(https://segmentfault.com/img/bVbfW41?w=1380&h=500); 進(jìn)入GitHub主頁使用文檔 HelloType是一個api設(shè)計(jì)簡單的js運(yùn)行時(shí)的數(shù)據(jù)類型檢查...

    Heier 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<