在 AJAX 時代，進(jìn)行 API 等網(wǎng)絡(luò)請求都是通過 XMLHttpRequest 或者封裝后的框架進(jìn)行網(wǎng)絡(luò)請求。

現(xiàn)在產(chǎn)生的 fetch 框架簡直就是為了提供更加強(qiáng)大、高效的網(wǎng)絡(luò)請求而生，雖然在目前會有一點瀏覽器兼容的問題，但是當(dāng)我們進(jìn)行 Hybrid App 開發(fā)的時候，如我之前介紹的 Ionic 和 React Native，都可以使用 fetch 進(jìn)行完美的網(wǎng)絡(luò)請求。

如果看網(wǎng)上的fetch教程，會首先對比XMLHttpRequest和fetch的優(yōu)劣，然后引出一堆看了很快會忘記的內(nèi)容(本人記性不好)。因此，我寫一篇關(guān)于fetch的文章，為了自己看著方便，畢竟工作中用到的也就是一些很基礎(chǔ)的點而已。

fetch，說白了，就是XMLHttpRequest的一種替代方案。如果有人問你，除了Ajax獲取后臺數(shù)據(jù)之外，還有沒有其他的替代方案？

這是你就可以回答，除了XMLHttpRequest對象來獲取后臺的數(shù)據(jù)之外，還可以使用一種更優(yōu)的解決方案fetch。

fetch的案例

下面我們來寫第一個fetch獲取后端數(shù)據(jù)的例子：

// 通過fetch獲取百度的錯誤提示頁面fetch('https://www.baidu.com/search/error.html') // 返回一個Promise對象 .then((res)=>{  return res.text() // res.text()是一個Promise對象 }) .then((res)=>{  console.log(res) // res是最終的結(jié)果 })

GET請求

GET請求初步

完成了helloworld，這個時候就要來認(rèn)識一下GET請求如何處理了。

上面的helloworld中這是使用了第一個參數(shù)，其實fetch還可以提供第二個參數(shù)，就是用來傳遞一些初始化的信息。

這里如果要特別指明是GET請求，就要寫成下面的形式：

// 通過fetch獲取百度的錯誤提示頁面fetch('https://www.baidu.com/search/error.html', {  method: 'GET' }) .then((res)=>{  return res.text() }) .then((res)=>{  console.log(res) })

GET請求的參數(shù)傳遞

GET請求中如果需要傳遞參數(shù)怎么辦？這個時候，只能把參數(shù)寫在URL上來進(jìn)行傳遞了。

// 通過fetch獲取百度的錯誤提示頁面fetch('https://www.baidu.com/search/error.html?a=1&b=2', { // 在URL中寫上傳遞的參數(shù)  method: 'GET' }) .then((res)=>{  return res.text() }) .then((res)=>{  console.log(res) })

POST請求

與GET請求類似，POST請求的指定也是在fetch的第二個參數(shù)中：

// 通過fetch獲取百度的錯誤提示頁面fetch('https://www.baidu.com/search/error.html', {  method: 'POST' // 指定是POST請求 }) .then((res)=>{  return res.text() }) .then((res)=>{  console.log(res) })

POST請求參數(shù)的傳遞

眾所周知，POST請求的參數(shù)，一定不能放在URL中，這樣做的目的是防止信息泄露。

// 通過fetch獲取百度的錯誤提示頁面fetch('https://www.baidu.com/search/error.html', {  method: 'POST',  body: new URLSearchParams([["foo", 1],["bar", 2]]).toString() // 這里是請求對象 }) .then((res)=>{  return res.text() }) .then((res)=>{  console.log(res) })