曾經的我們是那麼的年少。然鵝，時光荏苒，歲月如梭，一代新人換舊人。我們已經三十出頭，成為了程式設計師中的大哥。
現如今，網際網路界瞬息萬變，最新技術層出不窮。Vue、Axios、React、Redux、Angular、Node...等等等等。萬幸的是，底層的東西是不變的。所以，我們今天就來聊一聊，那些底層的東西。
說起AJAX，相信大多數程式設計師都會本能的想起XMLHttpRequest。沒錯，XHR(小黃人)陪伴我們度過了許多歲月。但是，小黃人誕生的歲月，處於網際網路的原始階段。
各大瀏覽器你方唱罷我登場，並沒有一個統一的Web標準。所以在今天看來，小黃人的設計顯得較為混亂。曾經一度被我們使用的jQuery(這也是一個大哥)幫助我們進行了合理的封裝。解決了我們的使用上的煩惱。但想要使用jQuery，我們就必須引入一個比較大的檔案，這對於僅僅想要使用jQuery來進行傳送ajax的我們來說並不十分友好。
於是，在日新月日的今天，瀏覽器也順應潮流，增加了新的原生方式: fetch
fetch是瀏覽器對AJAX的另一種原生支援方式(非XMLHttpRequest)。提供了一種更合理，更簡單的方式來非同步獲取資料。它是基於Promise的，所以目前不瞭解Promise的同學，請先查閱相關文件
二、傳送GET請求2.1 傳送想要傳送請求，非常簡單：一個最簡單的傳送請求的方式
fetch('/api/getMessage')來看一下network面板：
請求成功!
檢視詳情
傳送請求，完成！
一切就是這麼的簡單......
2.2 接收資料接收資料：
fetch('/api/getMessage') .then(res => res.json()) .then(data => console.log(data))呼叫fetch之後得到的結果是一個Promise例項。所以可以呼叫then方法進行狀態監聽。
就像平時我們說人很厲害，會說：
這裡的處理也分為兩次：
第一次決定返回的格式 (第一把刷子...)
第二次才是真正的接收資料 (第二把...)
在第一個then函式中，我們透過return返回了一個 res.json()
這個程式碼的意思是將返回回來的資料處理成JSON格式
之所以要return是因為res.json()的結果依舊是一個Promise例項。
在第二個then函式中，我們可以得到上一個then函式處理之後的結果。
注意第一個then中其實可以呼叫的方法有很多，比如res.text()、res.blob()等，這裡不再贅述，請看下文
三、傳送POST請求3.1 傳送請求傳送POST請求的方式與傳送GET請求的方式類似，不過要多一個配置引數
fetch('/api/postMessage', { method: 'post'})第一個引數依然表示URL
第二個引數是一個物件
配置它的method屬性，可以傳送POST請求。
network面板：
請求首行資訊：
3.2 接收資料同樣的，我們依然要透過兩次then方法來處理並接收資料
fetch('/api/postMessage', { method: 'post'}) .then(function (res) { return res.json() }) .then(function (data) { console.log(data) })返回內容：
至此我們已經學會了如何透過fetch傳送基本的get與post請求。接下來我們要更加深入的去掌握更多的fetch使用方法
四、攜帶資料傳送請求時，有時我們需要攜帶一些資料
這些資料可以根據請求型別的不同而放在不同的位置。
GET請求的資料放在URL的QueryString部分POST請求的資料攜帶在請求正文中4.1 GET請求攜帶資料最簡單的方式就是在拼接字串的時候把查詢串放在URL上。
fetch('/api/getMessage?a=1&b=2&c=3')那麼請求時，就會攜帶在上面了。
但是這種方式會使我們在傳送請求時不得不拼接字串。如果欄位比較多，會是一件很麻煩的事情。
此時我們可以透過 URLSearchParams 來實現
4.2 URLSearchParams這是一個URL的Search部分引數的建構函式。簡單來說就是生成查詢字串的。
語法：
var query = new URLSearchParams([init]);引數init(可選):
字串二維陣列物件(推薦)字串：
var search = '?a=1&b=2&c=3';var querystring = new URLSearchParams(search);var str = querystring.toString();console.log(str)輸出：
二維陣列：
var arr = [ ['a', 1], ['b', 2], ['c', 3], ['d', 4], ['e', 5]]var querystring = new URLSearchParams(arr);var str = querystring.toString();console.log(str)輸出:
現在，我們可以透過URLSearchParams這種方式來獲取對應的引數，這樣就可以快速生成查詢串
4.2 POST請求攜帶資料POST請求的資料攜帶在請求正文中。我們需要設定fetch的第二個引數的body屬性。
body的屬性值可以是以下任意型別之一： 我們這裡只演示字串的情況
ArrayBufferArrayBufferView (Uint8Array等)Blob/FilestringURLSearchParamsFormDatabody的值是字串
fetch("/api/postMessage", { method: 'post', body: JSON.stringify({ a: 1, b: 2, c: 3 }), headers: { "content-type": 'application/json' }})請求正文內容：
fetch是原生瀏覽器自帶的方法。
不需要再編寫XHR請求或依賴jQuery 。
如有疏漏，敬請指正。