曾經的我們是那么的年少。然鵝，時光荏苒，歲月如梭，一代新人換舊人。我們已經三十出頭，成為了程序員中的大哥。
現如今，互聯網界瞬息萬變，最新技術層出不窮。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(可選):
1. 字符串
2. 二維數組
3. 對象(推薦)
字符串：
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.3 POST請求攜帶數據
POST請求的數據攜帶在請求正文中。我們需要設置fetch的第二個參數的body屬性。
body的屬性值可以是以下任意類型之一： 我們這里只演示字符串的情況
1. ArrayBuffer
2. ArrayBufferView (Uint8Array等)
3. Blob/File
4. string
5. URLSearchParams
6. FormData
body的值是字符串
fetch("/api/postMessage", {
method: 'post',
body: JSON.stringify({
a: 1,
b: 2,
c: 3
}),
headers: {
"content-type": 'application/json'
}
})
請求正文內容：
至此，我們已經討論了通過fetch函數進行GET請求與POST請求的發送與攜帶數據。fetch是原生瀏覽器自帶的方法。不需要再編寫XHR請求或依賴jQuery 。
如有疏漏，敬請指正。更多關于“前端培訓”的問題，歡迎咨詢千鋒教育在線名師。千鋒教育多年辦學，課程大綱緊跟企業需求，更科學更嚴謹，每年培養泛IT人才近2萬人。不論你是零基礎還是想提升，都可以找到適合的班型，千鋒教育隨時歡迎你來試聽。
京公網安備 11010802030320號