硬核知識點——瀏覽器中的三類五種請求

2020-12-01 51cto

 

對瀏覽器的請求進行劃分,可以分為三類:一般請求、Ajax請求、WebSocket請求,對於每種請求都有不同的產生方式,今天就以這個思想為主線來一起嘮一嘮。

一、一般請求

此處說的一般請求就是指瀏覽器會直接顯示響應體數據,這些請求會刷新\跳轉頁面。換個更加容易理解的說法吧,指的就是控制臺Network面板中除了XHR和WS部分顯示的請求。例如js、css、img資源。

二、Ajax請求

Ajax請求也是由瀏覽器發出,但是不會對界面進行任何操作,只是調用監視的回調函數並傳入響應相關數據,發出Ajax請求可以通過三種方式:XHR、Fetch、Axios,其餘的均不是Ajax請求。

2.1 XHR

最早將Ajax推到歷史舞臺的關鍵技術就是XMLHttpRequest(XHR)對象,雖然目前已經有了一些過時的嫌疑,但是還是很有必要提一下它。下面就按照一個請求的整個生命周期來看一看該技術。

一、 對象的實例化

既然要使用XHR,第一步就是要將該對象實例化

  1. const xhr = new XMLHttpRequest(); 

二、初始化操作

將對象實例化後是不是緊接著就需要進行初始化操作,到底該請求要發給誰、通過什麼請求發、該請求到底是同步發還是異步發

  1. xhr.open(method, url, async) 

三、請求頭設置

了解網絡的同學本肯定知道請求頭的概念,既然要與後端打交道,請求頭還是有必要進行設置的(默認的配置不一定滿足我們高大上的需求),例如想發送json格式的內容,這個時候就需要設置Content-Type為application/json

  1. xhr.setRequestHeader('Content-Type''application/json'); 

四、接收請求的準備工作

瀏覽器除了設置常見的請求頭外,還需要指定響應數據類型,得到響應後後自動解析。目前支持的類型有string、arraybuffer、blob、document、json、text、ms-stream。

  1. xhr.responseType('json'

五、發送請求

前期工作都準備好了,接下來就是激動人心的時刻了,看好呀,要按開始鍵發送請求啦。

  1. xhr.send(data) 

六、監聽響應

我喊一聲美女,人家肯定要回應一下呀,畢竟顏值在這,不回應該是多麼不給面子的一件事呀!!!為了等待人家的回應,則需要分三步進行:

  1. 進入監聽狀態,放在這就是通過onreadystatechange進行監聽。
  2. 等待正面回應。readyStatus表徵目前的狀態,當readyStatus為4(請求完成),響應算是接收到了
  3. 處理響應。不能一股腦的處理全部響應吧,畢竟也是要面子的人,我肯定只希望接收我喜歡的信息吧,就喜歡狀態碼在200~299之間的,別的一概pass掉。

  1. xhr.onreadystatechange = () => { 
  2.     if (xhr.readyState == 4) { 
  3.         if (xhr.status >= 200 && xhr.status < 300) { 
  4.             console.log(xhr.response); 
  5.         } 
  6.     } 

七、中斷請求

正常流程算是走完了,肯定還有非正常流程,發起請求後我後悔了,不想得到對方的回應了,此時仍然有辦法——中斷請求

  1. xhr.abort() 

註:本文不是文檔學習,詳細使用請見https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest

2.2 Fetch

長江後浪推前浪,網際網路技術發展這麼快,出現了新的技術(Fetch)能夠執行XMLHttpRequest對象的所有任務,該技術使用更容易,接口更現代化,能夠在Web工作線程等現代Web工具中使用。(Fetch必須是異步,XMLHttpRequest可同步可異步)。

  1. const payload = JSON.stringify({ 
  2.     test: 'test' 
  3. }); 
  4.  
  5. let headersObj = new Headers({ 
  6.     'Content-Type':'application/json' 
  7. }); 
  8.  
  9. let request = new Request('http://localhost:8080'); 
  10.  
  11. fetch(request, { 
  12.     method: 'POST'
  13.     body: payload, 
  14.     headers: headersObj 
  15. }) 
  16. .then((response) => response.json()) 
  17. .then(console.log) 

上述代碼雖然簡單,但是已經囊括了Fetch API中所有的概念:fetch、Headers、Request、Response、Body混入。

1.fetch()

fetch()方法暴露在全局作用域中,包括主頁面執行線程、模塊和工作線程,調用該方法,瀏覽器就會向給定URL發送請求。

(1)fetch(input[, init]):接收兩個參數,input為要獲取的資源,__init為一個配置對象,配置需要傳入的參數,滿足更多複雜的需求

(2)返回一個promise對象,從而鏈式的進行處理

2.Headers

相當於 response/request 的頭信息,可以使你查詢到這些頭信息,或者針對不同的結果做不同的操作。該對象包含檢索、設置、添加、刪除,設置完自己需要的頭信息後就可以將其掛載到fetch中的配置信息中。

3.Request

該對象是獲取資源請求的接口,暴露了請求和相關信息。可以將該對象的實例作為fetch函數中的第一個參數

4.Response

該對象是獲取資源響應的接口,並暴露了響應的相關信息。

5.Body混入

提供了與 response/request 中的 body 有關的方法,可以定義它的內容形式以及處理方式。在Body混入中提供了5個方法,用於將ReadableStream轉存到緩衝區的內存中,將緩衝區轉換為某種JavaScript對象類型,以及通過Promise產生結果。

(1)Body.text():返回Promise,解決將緩衝區轉存得到的UTF-8格式字符串

(2)Body.json():返回Promise,解決將緩衝區轉存得到的JSON

(3)Body.formData():返回Promise,解決將緩衝區轉存得到的FormData實例

(4)Body.arrayBuffer():返回Promise,解決將緩衝區轉存得到的ArrayBuffer

(5)Body.text():返回Promise,解決將緩衝區轉存得到的Blob實例

2.3 Axios

Axios應該是目前前端最流行的Ajax請求庫,具有以下特點:

  1. 基於Promise的異步Ajax請求庫
  2. 瀏覽器端/node端都可以使用
  3. 支持請求/響應攔截器
  4. 支持請求取消
  5. 請求/響應數據轉換
  6. 批量發送請求

  1. // 默認配置 
  2. axios.defaults.baseURL = 'http://localhost:8080' 
  3.  
  4. // 請求攔截器 
  5. axios.interceptors.request.use( 
  6.     config => { 
  7.         console.log('request interceptor resolved'); 
  8.         return config; 
  9.     }, 
  10.     error => { 
  11.         console.log('request interceptor rejected'); 
  12.         return Promise.reject(error); 
  13.     } 
  14. ); 
  15.  
  16. // 響應攔截器 
  17. axios.interceptors.response.use( 
  18.     response => { 
  19.         console.log('response interceptor resolved'); 
  20.         return response; 
  21.     }, 
  22.     error => { 
  23.         console.log('response interceptor rejected'); 
  24.         return Promise.reject(error); 
  25.     } 
  26. ); 
  27.  
  28. let cancel; // 用於保存取消請求的函數 
  29. axios('/', { 
  30.     method: 'post'
  31.     headers: { 
  32.         'Content-Type''application/json' 
  33.     }, 
  34.     data: { 
  35.         test: 'test' 
  36.     }, 
  37.     // 取消請求 
  38.     cancelToken: new axios.CancelToken((c) => { 
  39.         cancel = c; 
  40.     }) 
  41. }) 
  42. .then((response) => { 
  43.     console.log(response.data) 
  44. }) 
  45.  
  46. // 若想取消請求,直接調用下面函數 
  47. // cancel(); 

上述代碼已經囊括了Axios庫中大多數核心內容,包括axios()函數、默認設置、請求/響應攔截器、取消請求(內部設計的很巧妙,想知道的請看下期講解)

1.axios()

完成相應配置並發送請求,調用方式有多種語法糖,同學們可以按需使用。

2.默認設置

通過axios.defaults.xxx可以完成很多全局配置,提高代碼的復用。(提高復用真是完美的編碼思想)

3.請求/響應攔截器

請求攔截器的作用就是在請求發送之前先進行一些列的處理;響應攔截器的作用就是觸發請求的回調之前執行響應攔截器,對響應做一些預處理操作

4.取消請求

通過配置cancelToken對象並緩存用於取消請求的cancel函數,在需要的時候觸發該函數取消請求(內部其實就是調用的xhr.abort())

對於更多使用見詳細使用文檔https://github.com/axios/axios

三、WebSocket請求

下面來聊聊這個傳奇協議——WebSocket,WebSockt通過一個長時連接實現與伺服器全雙工、雙向的通信。(特別提醒:同源策略不適用於WebSocket)

  1. let ws = new WebSocket('ws://127.0.0.1:8080'); 
  2.  
  3. // 在連接建立成功時 
  4. ws.onopen = () => { 
  5.     ws.send('websocket'
  6.  
  7. // 在接收到消息時 
  8. ws.onmessage = (event) => { 
  9.     console.log(event.data); 
  10.  
  11. // 在發生錯誤時 
  12. ws.onerror = () => { 
  13.     console.log('error'); 
  14.  
  15. // 在連接關閉時 
  16. ws.onclose = () => { 
  17.     console.log('close'); 

上述代碼已經囊括大部分WebSocket的概念,實例化WebSocket建立與服務端的連接;通過事件監聽即可了解WebSokcet連接目前的狀態;通過send()函數即可向服務端發送內容;當服務端發送消息時即可觸發message事件,通過event.data屬性獲取其有效載荷。

本篇文章雖然比較簡單,但是可以幫助我們認清楚請求其實是分為三類的,這是我最最最大的收穫,歡迎小夥伴們能夠給出自己的想法。

本文轉載自微信公眾號「執鳶者」,可以通過以下二維碼關注。轉載本文請聯繫執鳶者公眾號。

【編輯推薦】

【責任編輯:

武曉燕

TEL:(010)68476606】

點讚 0

相關焦點

  • 360瀏覽器正式通過數字認證入根申請 完美兼容10+作業系統
    近日,360瀏覽器宣布通過了北京數字認證股份有限公司(以下簡稱:數字認證)的入根申請,將正式信任數字認證請求預置的數字證書,並安排入根,隨360瀏覽器正式版本發布。數字認證是國內權威的第三方電子認證服務機構,此次數字認證的成功加入,意味著360瀏覽器根證書計劃取得了進一步突破,開始獲得越來越多國內外頭部CA機構的信任。為進一步提升用戶上網的安全性,360瀏覽器於2018年12月正式宣布創建自有根證書計劃,成為繼谷歌之後國內首家創建自有根證書的瀏覽器廠商。
  • 教育學易混知識點五梳理
    相關推薦:教師招聘考試:教育學知識點|常見考點匯總 一、考情分析在陝西教師招聘考試中,教育學部分的內容會考查到很多概念本身的特點和人物對應其地位、著作、觀點等。因此,了解清楚易混知識點本身且能做到充分理解和靈活運用非常重要。
  • 「原創.第31期」最近做首屏優化學到的知識點
    列表中包含一個或兩個PerformancePaintTiming對象。這取決於「首次內容繪製」是否存在。1)SEO友好(2)首屏性能高,FMP比CSR和預渲染都要快4.缺點:(1)客戶端數據共享成本高(2)模板維護成本高總結如下圖最優的渲染方式1.SSR和CSR共存的模式,發揮兩者的優勢(1)刷新頁面是SSR渲染,nodejs配合bigpipe(2)站內點擊是CSR,不用vue router、react router等等,直接用原生的a連結補充知識點
  • 在未來,我將使用除了Google Chrome之外的任何瀏覽器
    Mozilla Firefox的布局要乾淨得多,Safari把自己標榜為蘋果的專有軟體,高度強調安全和隱私,甚至Opera對於瀏覽器的設計也值得一試。微軟最新的Edge瀏覽器取代了令人生厭的IE瀏覽器,這款瀏覽器取得了超乎意料的成功,我甚至在個人電腦上使用它。在未來,我將使用除了Google Chrome之外的任何瀏覽器,以下是我的理由。
  • 滲透測試服務之對瀏覽器開展攻擊
    這一階段,就是利用對瀏覽器的控制,根據當前形勢,探尋攻擊的可能性。這種攻擊有多種形式,包括對瀏覽器的「本地」攻擊,對瀏覽器所在作業系統的攻擊,以及對任意位置遠程系統的攻擊。仔細閱讀,你就會發現,在這個階段的方法中,繞開了同源策略,走在了前列。為什麼會這樣?
  • SpringBoot中請求映射的原理
    在SpringBoot中,所有的請求都是會來到DispatcherServlet中,而這也就是SpringMVC中的東西。從此圖可以看出繼承樹,最終是來到HttpServlet的,也就是說必然會有doGetPost方法。而HttpServlet並沒有,於是順著關係找下去。
  • 國外瀏覽器排行 國外瀏覽器有哪些
    國外瀏覽器排行,國外桌面瀏覽器大盤點。如今的瀏覽器當然完全免費,在呈現網頁的速度上也非常快,基本上都能夠為用戶帶來相似的體驗。除了微軟的IE之外,Mozilla Firefox、谷歌 Chrome以及Opera也為廣大網民所熟知,此外還有包括Torch、Tor以及Web Freer在內的陌生面孔。總之,網絡瀏覽器的陣容已經相當豐富。
  • 北大博士後硬核「考霸」秘籍:備考還能這麼硬核的嗎
    那麼如此硬核的成績,是用哪些硬核的技巧換來的呢? 核聚後來解釋說:進步本實質就是搭建一套自己的知識庫,用來強迫自己建立知識點之間的聯繫。這種方法尤其適合基礎知識不紮實,或習慣性用"蠻力"學習的人群。 卡卡以前也做過很多筆記,但量太大、用的時候又檢索不到知識點在哪,約等於名存實亡。
  • 歸納總結:考研數學中那些最容易出證明題的知識點
    由於基礎階段已經把重要知識點進行系統全面的複習了,對基本題型的訓練已經過關了,接下來要重點訓練一些常考題型和一些比較困難的題型。  考試難題一般出現在高等數學,對高等數學一定要抓住重難點進行複習。
  • 「網絡安全漲姿勢」第11期:基礎網絡攻防之跨站請求偽造
    CSRF全稱Cross-site Request Forgery,翻譯為跨站請求偽造,也被稱為一鍵式攻擊或者會話控制,是一種對網站的惡意利用,它是一種依賴web瀏覽器的、被混淆過的代理人攻擊。02CSRF的攻擊原理第一步,用戶C打開瀏覽器,輸入帳號和密碼請求登錄受信任網站A;第二步,用戶信息通過驗證後,網站A將產生的Cookie信息返回給瀏覽器,用戶便成功登錄網站A;第三步,用戶在登錄網站A的同時,在同一瀏覽器中訪問網站B;第四步,網站B接收到用戶登錄請求後,返回的不是Cookie信息,而是一些攻擊性代碼
  • 谷歌瀏覽器Google Chrome
    立即下載這個chrome瀏覽器下載安卓版,在您的所有設備上享受與電腦體驗一致的chrome瀏覽器下載。谷歌瀏覽器下載手機版的特點是簡潔、快速。谷歌瀏覽器下載手機版支持多標籤瀏覽,每個標籤頁面都在獨立的"沙箱"內運行,在提高安全性的同時,就算一個標籤頁面的崩潰但也不會導致其他標籤頁面被關閉。此外chrome瀏覽器下載最新版基於更強大的JavaScript V8引擎。
  • 如何減少HTTP請求並加快網站訪問速度?
    每當有人訪問您網站上的頁面時,瀏覽器都必須請求大量文件。這些HTTP請求直接影響網頁的加載速度。通常,更少的HTTP請求意味著網站加載速度更快。 現在,網站的加載速度是搜尋引擎排名的重要因素。平均而言,媒體頁面加載速度為谷歌的10個結果只是1.65秒。這凸顯了擁有快速加載網站的重要性。
  • 黑客集團推出「無限制」瀏覽器
    美國東部時間5月7日凌晨(北京時間5月7日下午)消息,一種新的「無限制」網絡瀏覽器被一個黑客集團製作出來,據稱這種瀏覽器能夠通過網際網路審查的限制。有批評稱,一些罪犯可以使用這種瀏覽器來掩蔽在網際網路上進行的秘密活動。
  • 如何使用WebAssembly將命令行JSON處理工具JQ移植到瀏覽器?
    JavaScript 環境中使用它了。下面是一個 GitHub 請求的 JSON 結構響應結果片段:   按照如下參數查詢:   提取響應結果的第一個元素,並只保留感興趣的欄位:   為了搭建 jq 在線運行環境,有兩種可行的方法。第一種方法是在伺服器上搭建沙箱環境,在該沙箱中進行查詢並通過 API 調用的方式返回結果給用戶。
  • Android版Chrome瀏覽器支持DNS-over-HTTPS
    至於Chrome桌面版本,早在5月發布的Chrome 83就加入了對DoH的支持,但該功能一直以來並未在Android和iOS版本中推出。Google表示,Chrome for Android 85將逐步啟用該功能,瀏覽器的設置內引入了Secure DNS的新選項,啟用之後Chrome將嘗試通過 DoH 發出加密域名查詢請求,如果不支持則回滾到明文請求。
  • solr之http請求查詢記錄兩點
    今天犯了兩個很傻的錯誤,特此記錄一下,避免日後再犯:(1) solr提供http請求相關API:平常通過瀏覽器直接訪問:http://192.168.133.129:8983/solr/#/test/query,輸入查詢條件即可,但是由於request
  • 雙曲線問題中易混易錯知識點小結
    雙曲線是高中數學選修中的重要內容,也是高考中常考知識點,但由於雙曲線自身的特點,學生在學習的過程中,許多知識點或解題方法弄易弄混或用錯,並且在三類圓錐曲線中,雙曲是最複雜的,也是變化最靈活的。雙曲線問題,要求我們在解題時,密切注意一些易錯點,本文就學生解題中易錯的類型進行解析,以引起重視:易錯點一:忽略雙曲線定義中的限制條件致錯易錯點二:忽略雙曲線特徵中的隱含條件致錯易錯點三:忽略對焦點所在軸的討論致錯
  • 瀏覽器中轉換時間戳
    在一些網站或者數據中常常能見到時間戳的時間數據,例如「1566199627349」,它代表的是2019年8月19日15點25分45秒349微秒(GMT+8時區)。那怎麼快速的從時間戳轉換到我們看得懂的時間,很簡單,只需要一步。
  • 這6種實現負載均衡技術的方式不容錯過
    這6種實現負載均衡技術的方式不容錯過 負載均衡(Load Balance)是集群技術(Cluster)的一種應用,可以將工作任務分攤到多個處理單元,從而提高並發處理能力,有利於提升中大型網站的性能。接下來小編就為大家介紹6種實現負載均衡技術的方式。
  • Alook瀏覽器怎麼使用 Alook瀏覽器使用技巧分享
    近來,一款名為ALOOK的瀏覽器(功能介紹)火了起來,可能是因為之前收費的原因,值此世界盃期間也推出了限時免費,那麼這麼瀏覽器怎麼使用呢,下面就和小編一起來看看使用技巧吧!  Alook極簡且強大,致力成為iOS最佳瀏覽器。