曾經(jīng)的我們是那么的年少。然鵝，時(shí)光荏苒，歲月如梭，一代新人換舊人。我們已經(jīng)三十出頭，成為了程序員中的大哥。
現(xiàn)如今，互聯(lián)網(wǎng)界瞬息萬(wàn)變，最新技術(shù)層出不窮。Vue、Axios、React、Redux、Angular、Node...等等等等。萬(wàn)幸的是，底層的東西是不變的。所以，我們今天就來(lái)聊一聊，那些底層的東西。
說(shuō)起AJAX，相信大多數(shù)程序員都會(huì)本能的想起XMLHttpRequest。沒(méi)錯(cuò)，XHR(小黃人)陪伴我們度過(guò)了許多歲月。但是，小黃人誕生的歲月，處于互聯(lián)網(wǎng)的原始階段。
各大瀏覽器你方唱罷我登場(chǎng)，并沒(méi)有一個(gè)統(tǒng)一的Web標(biāo)準(zhǔn)。所以在今天看來(lái)，小黃人的設(shè)計(jì)顯得較為混亂。曾經(jīng)一度被我們使用的jQuery(這也是一個(gè)大哥)幫助我們進(jìn)行了合理的封裝。解決了我們的使用上的煩惱。但想要使用jQuery，我們就必須引入一個(gè)比較大的文件，這對(duì)于僅僅想要使用jQuery來(lái)進(jìn)行發(fā)送ajax的我們來(lái)說(shuō)并不十分友好。
于是，在日新月日的今天，瀏覽器也順應(yīng)潮流，增加了新的原生方式: fetch
fetch是瀏覽器對(duì)AJAX的另一種原生支持方式(非XMLHttpRequest)。提供了一種更合理，更簡(jiǎn)單的方式來(lái)異步獲取數(shù)據(jù)。
它是基于Promise的，所以目前不了解Promise的同學(xué)，請(qǐng)先查閱相關(guān)文檔
二、發(fā)送GET請(qǐng)求
2.1 發(fā)送
想要發(fā)送請(qǐng)求，非常簡(jiǎn)單：一個(gè)最簡(jiǎn)單的發(fā)送請(qǐng)求的方式
fetch('/api/getMessage')
來(lái)看一下network面板：
請(qǐng)求成功!
查看詳情
發(fā)送請(qǐng)求，完成！
一切就是這么的簡(jiǎn)單......
2.2 接收數(shù)據(jù)
接收數(shù)據(jù)：
fetch('/api/getMessage')
.then(res => res.json())
.then(data => console.log(data))
調(diào)用fetch之后得到的結(jié)果是一個(gè)Promise實(shí)例。所以可以調(diào)用then方法進(jìn)行狀態(tài)監(jiān)聽(tīng)。
就像平時(shí)我們說(shuō)人很厲害，會(huì)說(shuō)：
這里的處理也分為兩次：
第一次決定返回的格式 (第一把刷子...)
第二次才是真正的接收數(shù)據(jù) (第二把...)
在第一個(gè)then函數(shù)中，我們通過(guò)return返回了一個(gè) res.json()
這個(gè)代碼的意思是將返回回來(lái)的數(shù)據(jù)處理成JSON格式
之所以要return是因?yàn)閞es.json()的結(jié)果依舊是一個(gè)Promise實(shí)例。
在第二個(gè)then函數(shù)中，我們可以得到上一個(gè)then函數(shù)處理之后的結(jié)果。
注意第一個(gè)then中其實(shí)可以調(diào)用的方法有很多，比如res.text()、res.blob()等，這里不再贅述，請(qǐng)看下文
三、發(fā)送POST請(qǐng)求
3.1 發(fā)送請(qǐng)求
發(fā)送POST請(qǐng)求的方式與發(fā)送GET請(qǐng)求的方式類似，不過(guò)要多一個(gè)配置參數(shù)
fetch('/api/postMessage', {
method: 'post'
})
第一個(gè)參數(shù)依然表示URL
第二個(gè)參數(shù)是一個(gè)對(duì)象
配置它的method屬性，可以發(fā)送POST請(qǐng)求。
network面板：
請(qǐng)求首行信息：
3.2 接收數(shù)據(jù)
同樣的，我們依然要通過(guò)兩次then方法來(lái)處理并接收數(shù)據(jù)
fetch('/api/postMessage', {
method: 'post'
})
.then(function (res) {
return res.json()
})
.then(function (data) {
console.log(data)
})
返回內(nèi)容：
至此我們已經(jīng)學(xué)會(huì)了如何通過(guò)fetch發(fā)送基本的get與post請(qǐng)求。接下來(lái)我們要更加深入的去掌握更多的fetch使用方法
四、攜帶數(shù)據(jù)
發(fā)送請(qǐng)求時(shí)，有時(shí)我們需要攜帶一些數(shù)據(jù)
這些數(shù)據(jù)可以根據(jù)請(qǐng)求類型的不同而放在不同的位置。
· GET請(qǐng)求的數(shù)據(jù)放在URL的QueryString部分
· POST請(qǐng)求的數(shù)據(jù)攜帶在請(qǐng)求正文中
4.1 GET請(qǐng)求攜帶數(shù)據(jù)
最簡(jiǎn)單的方式就是在拼接字符串的時(shí)候把查詢串放在URL上。
fetch('/api/getMessage?a=1&b=2&c=3')
那么請(qǐng)求時(shí)，就會(huì)攜帶在上面了。
但是這種方式會(huì)使我們?cè)诎l(fā)送請(qǐng)求時(shí)不得不拼接字符串。如果字段比較多，會(huì)是一件很麻煩的事情。
此時(shí)我們可以通過(guò) URLSearchParams 來(lái)實(shí)現(xiàn)
4.2 URLSearchParams
這是一個(gè)URL的Search部分參數(shù)的構(gòu)造函數(shù)。簡(jiǎn)單來(lái)說(shuō)就是生成查詢字符串的。
語(yǔ)法：
var query = new URLSearchParams([init]);
參數(shù)init(可選):
1. 字符串
2. 二維數(shù)組
3. 對(duì)象(推薦)
字符串：
var search = '?a=1&b=2&c=3';
var querystring = new URLSearchParams(search);
var str = querystring.toString();
console.log(str)
輸出：
二維數(shù)組：
var arr = [
['a', 1],
['b', 2],
['c', 3],
['d', 4],
['e', 5]
]
var querystring = new URLSearchParams(arr);
var str = querystring.toString();
console.log(str)
輸出:
現(xiàn)在，我們可以通過(guò)URLSearchParams這種方式來(lái)獲取對(duì)應(yīng)的參數(shù)，這樣就可以快速生成查詢串
4.3 POST請(qǐng)求攜帶數(shù)據(jù)
POST請(qǐng)求的數(shù)據(jù)攜帶在請(qǐng)求正文中。我們需要設(shè)置fetch的第二個(gè)參數(shù)的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'
}
})
請(qǐng)求正文內(nèi)容：
至此，我們已經(jīng)討論了通過(guò)fetch函數(shù)進(jìn)行GET請(qǐng)求與POST請(qǐng)求的發(fā)送與攜帶數(shù)據(jù)。fetch是原生瀏覽器自帶的方法。不需要再編寫(xiě)XHR請(qǐng)求或依賴jQuery 。
如有疏漏，敬請(qǐng)指正。更多關(guān)于“前端培訓(xùn)”的問(wèn)題，歡迎咨詢千鋒教育在線名師。千鋒教育多年辦學(xué)，課程大綱緊跟企業(yè)需求，更科學(xué)更嚴(yán)謹(jǐn)，每年培養(yǎng)泛IT人才近2萬(wàn)人。不論你是零基礎(chǔ)還是想提升，都可以找到適合的班型，千鋒教育隨時(shí)歡迎你來(lái)試聽(tīng)。
京公網(wǎng)安備 11010802030320號(hào)