博客地址:http://michaelcode.cn前端
版權歸做者全部,轉載請註明出處學前端也有一段時間了,想淺談一下前端與網絡請求。談網絡請求,天然繞不開的一個話題即是 JS。後端
做爲前端三大基礎之一的 JavaScript
,其重要性是不言而喻的。瀏覽器
在一位前輩推薦下,機緣巧合遇到了廖雪峯老師的 JavaScript 教程,此教程有哪些好處,我就不廢話了,感興趣的朋友本身去看一下。 在一開始看這個教程的過程當中,感受學起來幾乎是毫無阻礙的,暗自高興遇到了福音,直到碰到了這三個詞: 服務器
JSON
、
Ajax
、
Promise
HTML
和
CSS
寫靜態頁面、歷來沒接觸過異步、網絡請求等概念的小白來說,簡直像看到了幾個外星文字同樣。
爲了搞清楚這三個神奇玩意兒的含義以及做用,我開始踏上了瘋狂的「百度谷歌之旅」。結果,爲了解釋這三個詞,卻又搞出了一大堆更神奇的玩意兒。大體以下:網絡
Fetch
、
Generator
、
Thunk
、
async
、
await
後來,在經歷了無數痛苦的掙扎以後。我終於能站在這裏,把這些概念一點點的撥弄清楚,談一談這究竟是怎麼一回事。並且,我發現,當時不明白這些概念,最大的緣由是把它們給割裂開了。因此,這篇文章將會把這些概念串聯起來,給你還原一個網絡請求的全貌,另外,本文只理思路,不講細節實現。若是,你跟我當時同樣對以上這些概念一頭霧水,那麼,這篇文章應該是會對你學習有些幫助的,至少會讓你不那麼想自殺(開個玩笑了哈~)異步
若是你是剛開始接觸前端,可能你不會了解網絡請求相關的東西。但是,你總該聽過靜態頁面和動態頁面這兩種概念吧,極可能,你聽某個前輩講過,動態頁面跟頁面上的動態不是一回事。好比說,個人這個博客,雖然你點擊一些地方,會有一些動畫效果,可它卻仍然是個靜態頁面。那麼,啥叫動態頁面呢?這就是前端跟網絡請求的關係了,若是一個網頁在你使用的過程當中,向服務器發出了某些網絡請求,並接收到了從服務器返回來的數據(固然也可能請求失敗),那麼,這樣的網頁才叫作動態頁面。也就是說,這裏的動態指的是你的瀏覽器(客戶端)和服務器(服務器端)的數據交換。async
做爲一個真正的前端,所作的事就是負責從客戶端獲取用戶的數據(像是你填寫的用戶名和密碼),而後,把這些數據組織起來,發給服務器端,而後等待服務器端處理完數據(至於服務器接收到數據怎麼處理,就是後端大佬的問題了),接收返回的數據,並對這些返回的數據進行不一樣的處理(好比展現在頁面上或者儲存起來之類的)。也就是說,寫出一個漂亮的頁面展現給別人只是前端工做的一部分(一開始,天真的我就覺得前端就是寫寫頁面。。。)函數
搞清楚了前端與網絡請求的關係,解釋上面的幾個看上去玄之又玄概念就容易多了(這些概念基本都是用在上面的過程當中)。再墨跡一遍,我這篇裏面側重的是對那些概念的個體理解和把握,並不會具體講它們的用法。學習
JSON(用的最普遍,也是最容易理解的一個概念): 首先, JSON 的本質是一種數據的格式,取代的是 XML 。那麼,這哥倆的做用是啥呢?其實就是一個傳輸功能,也就是在咱前邊所說的網絡請求的傳輸過程當中,數據的格式必須是JSON格式。因此, JSON 不止是前端要用的東西,後端在向前端傳輸數據的時候,一樣也得先把數據格式轉化成 JSON 格式,再進行傳輸。至於爲啥要取代之前的 XML 格式,很好理解, JSON 格式簡單唄。fetch
AJAX: 其實,這四個字母是
Asynchronous JavaScript and XML的縮寫,翻譯成中文就是:用JavaScript執行異步網絡請求。它的本質就是用來向服務器端發出網絡請求的一種方法。做用如上。那麼,異步請求又是個啥意思?說白了,就是,在你發出請求後,你仍然能繼續去執行後面的代碼,而不是乾等着,啥也幹不了(由於網絡請求從發出到收到迴應是須要必定時間的,尤爲你的網比較渣的時候)。等到服務器端返回的數據到達客戶端時,你再停下手頭的活,去處理收到的數據。Promise: 前邊在 AJax 裏說到了異步,而 Promise 就是一種執行異步操做的方式(它在 ES6 裏有了規範的用法)。它的好處是啥呢?就是寫起來以及處理起來比較方便。固然,異步操做不止在網絡請求裏用獲得,執行起來須要等待必定時間的操做,均可以並且是應該寫成異步的操做,好比 Timeout 函數。這樣的話,等待時間獲得了利用,珍惜時間嘛(固然,大部分狀況下是考慮用戶體驗)。因此,Promise 不僅是用在網絡請求裏,全部用獲得異步的地方,它均可以大展身手。
Fetch: 這個東西本質上是一種發出網絡請求的方法。你傳給它一個 JSON 格式的對象、一種請求方法(如GET、POST)以及一個URL,它就會把這個 JSON 對象做爲數據,傳輸給給定的 URL ,等着拿返回的數據。並且,這個神奇的東西在發完請求後,會返給你一個 Promise,這樣,你就沒必要再去額外地寫異步了,而是在 Fetch 後邊直接跟一個異步的處理(也就是接收到返回的數據該怎麼處理)。
Generator: Generator是ES6裏面的新東西(其實ES6也不是很新了哈),是一個比較神奇的東西。它本質上來說,並非一個函數,但它的執行卻跟函數很類似。它就至關於在函數裏打了許多斷點(yield),執行完一部分就停一下,等待繼續執行的命令。基於這樣的特性,咱們把它的每次執行設置成自動化的,好比,在網絡請求中,咱們設置接收到返回的數據後,就繼續執行下面的操做,這樣,就至關於實現了一個網絡請求的異步操做。這樣的異步操做,每每比較簡單方便。
Thunk: Thunk 本質上來說,是一個函數,用來對異步函數進行封裝,只留下一個參數--回調函數。利用 Thunk 函數和 Generator 的結合,咱們能夠實現上面所說的 Generator 執行異步操做。這也就是 Thunk 函數在網絡請求中的做用。
async和await: 這兩個東西是 ES7 裏面的新玩意兒,也是對異步操做的簡化。其中的 async 用來標誌一個函數,就像 Generator 裏的*,而 await 就像 Generator 中的 yield 同樣。
至此前端與網絡請求的概述以及相關的概念就介紹完了
儘管我已經盡力簡化了這些概念的定義,但一口氣看完了這麼多的概念,估計你仍是會有點暈,因此,我在最後再把這些概念串一遍,畢竟,這纔是初衷嘛。
前端網絡請求的處理過程以下:
首先,利用 fetch(或者原始的 XMLHttpRequest ,這個東西跟 fetch 做用同樣)組織要發出的請求,並經過 Promise(或者Generator)(對應 XMLHttpRequest 的是 Ajax )實現異步,接收到的數據是JSON 格式,而後再利用收到的數據進行進一步處理。
OK,本文到此就正式結束啦。若是你以爲有些頭暈迷糊,就緩一緩,再看一遍。或者,閉上眼,在腦海裏,想象一遍整個網絡請求的過程。固然,讀完這篇,你只能理解個大概,具體怎麼寫,還要去看具體的教程或者文檔的哈。
若是,本文幫助到了你,做者會很開心的。固然,你若是給點小費,做者會更開心喲。