全面分析前端的網路請求方式
https://segmentfault.com/a/1190000018668190
一、前端進行網路請求的關注點
二、前端進行網路請求的方式
三、關於網路請求的疑問
四、Ajax的出現解決了什麼問題
過去任何和伺服器的交互都需要刷新頁面，使用者體驗非常差，Ajax的出現解決了這個問題。Ajax全稱Asynchronous JavaScript + XML（非同步JavaScript和XML），使用Ajax，網頁應用能夠快速地將增量更新呈現在使用者介面上，而不需要重載（刷新）整個頁面。
五、原生Ajax的用法
六、jQuery對Ajax的封裝
在很長一段時間裡，人們使用jQuery提供的ajax封裝進行網路請求，包括$.ajax、$.get、$.post等，這幾個方法放到現在依然實用。
七、jQuery的替代者Fetch API
近年來前端MV*的發展壯大，人們越來越少的使用jQuery，我們不可能單獨為了使用jQuery的Ajax api來單獨引入他，無可避免的，我們需要尋找新的技術方案--Fetch API，是一個用用於訪問和操縱HTTP管道的強大的原生 API。
另外，尤雨溪在他的文檔中推薦大家用axios進行網路請求。axios基於Promise對原生的XHR進行了非常全面的封裝，使用方式也非常的優雅。另外，axios同樣提供了在node環境下的支援，可謂是網路請求的首選方案。
八、fetch的使用
九、fetch polyfill源碼分析
十、fetch的坑點
由於fetch是一個非常底層的API，它並沒有被進行很多封裝，還有許多問題需要處理：
十一、對fetch的封裝
十二、跨域總結
#Javascript, Ajax, Fetch, jQuery, axios
https://segmentfault.com/a/1190000018668190
一、前端進行網路請求的關注點
- 傳入基本參數（url，請求方式）
- 請求參數、請求參數類型
- 設置請求頭
- 獲取回應的方式
- 獲取回應頭、回應狀態、回應結果
- 異常處理
- 攜帶cookie設置
- 跨域請求
二、前端進行網路請求的方式
- form表單、ifream、刷新頁面
- Ajax - 非同步網路請求的開山鼻祖
- jQuery - 一個時代
- fetch - Ajax的替代者
- axios、request等眾多開源庫
三、關於網路請求的疑問
- Ajax的出現解決了什麼問題
- 原生Ajax如何使用
- jQuery的網路請求方式
- fetch的用法以及坑點
- 如何正確的使用fetch
- 如何選擇合適的跨域方式
四、Ajax的出現解決了什麼問題
過去任何和伺服器的交互都需要刷新頁面，使用者體驗非常差，Ajax的出現解決了這個問題。Ajax全稱Asynchronous JavaScript + XML（非同步JavaScript和XML），使用Ajax，網頁應用能夠快速地將增量更新呈現在使用者介面上，而不需要重載（刷新）整個頁面。
五、原生Ajax的用法
六、jQuery對Ajax的封裝
在很長一段時間裡，人們使用jQuery提供的ajax封裝進行網路請求，包括$.ajax、$.get、$.post等，這幾個方法放到現在依然實用。
七、jQuery的替代者Fetch API
近年來前端MV*的發展壯大，人們越來越少的使用jQuery，我們不可能單獨為了使用jQuery的Ajax api來單獨引入他，無可避免的，我們需要尋找新的技術方案--Fetch API，是一個用用於訪問和操縱HTTP管道的強大的原生 API。
另外，尤雨溪在他的文檔中推薦大家用axios進行網路請求。axios基於Promise對原生的XHR進行了非常全面的封裝，使用方式也非常的優雅。另外，axios同樣提供了在node環境下的支援，可謂是網路請求的首選方案。
八、fetch的使用
九、fetch polyfill源碼分析
十、fetch的坑點
由於fetch是一個非常底層的API，它並沒有被進行很多封裝，還有許多問題需要處理：
- 不能直接傳遞JavaScript物件作為參數
- 需要自己判斷返回數值型別，並執行回應獲取返回值的方法
- 獲取返回值方法只能調用一次，不能多次調用
- 無法正常的捕獲異常
- 老版流覽器不會默認攜帶cookie
- 不支持jsonp
十一、對fetch的封裝
十二、跨域總結
#Javascript, Ajax, Fetch, jQuery, axios
留言
張貼留言