Fetch API——简化你的AJAX
之前搞定了Promise，接下來學習Fetch API。封裝過AJAX函數的各位肯定能知道XMLHttpRequest的問題（沒有封裝過的點這里），首先，其所有的功能全部集中在同一對象上，容易書寫混亂不易維護的代碼；其次，我們都到ES6啦，傳統的事件驅動模式，無法適配新的Promise API，因此ES6提供了Fetch API來解決AJAX的問題。
一.Fetch API的特點
1）精細的功能分割：頭部信息，請求信息，響應信息等均分布到不同的對象，更利于處理各種復雜的AJAX場景
2）使用Promise API，更利于異步代碼的書寫
3）Fetch API并非ES6的內容，屬于HTML5新增的WEB AP
【注】Fetch并非取代AJAX，而是對AJAX傳統的API的改進；這一塊內容的學習，需要掌握網絡通信的知識，有問題請移步這里
二.Fetch的基本使用
1.參數
該函數有兩個參數：一是請求地址(必填)，該參數是字符串；二是請求配置(選填)，該參數是對象
即：fetch(url, config)
2.請求配置
1）method：請求方法，數據類型是字符串，默認值為GET
2）headers：請求頭信息，數據類型是對象【例1】
【例1】點擊按鈕，發送AJAX請求，可以在Network中看到配置的請求頭信息
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head> <body><button>獲取數據</button><script>async function getData() {const url = "http://101.132.72.36:5100/api/local";const config = {method: 'GET',headers: {a: 1}}const resp = await fetch(url, config);}document.querySelector('button').onclick = function () {getData();}</script> </body> </html>【結果】
圖1?
3）body：請求體的內容，必須匹配請求頭中的Content-Type，請求方法為POST時配置【例2】
【例2】
async function getData() {const url = "http://101.132.72.36:5100/api/local";const config = {method: 'POST',headers: {"Content-Type": "application/json",a: 1},body:`{"c"："1"}` //POST格式需要配置}const resp = await fetch(url, config); } document.querySelector('button').onclick = function () {getData(); }【注】以上3點為重點
4）mode：請求模式，數據類型是字符串，有三個屬性值
- cors：默認值，配置為該值，會在請求頭中加入origin和referer
- no-cors：配置為該值，不會在請求頭中加入origin和referer，跨域的時候可能會出現問題
- same-origin：指示請求必須在同一個域中發生，如果請求其他域，則會報錯
5）credentials：配置如何攜帶憑據(cookie)，三個屬性值
- omit：默認值，不攜帶cookie
- same-origin：請求同源地址時攜帶cookie
- include：請求任何地址都攜帶cookie
6）cache：配置緩存模式
- default：表示fetch請求之前將檢查下http的緩存
- no-store：表示fetch請求將完全忽略http緩存的存在，這意味著請求之前將不再檢查下http的緩存，拿到響應以后，也不會更新http的緩存
- no-cache：如果存在緩存，那么fetch將發送一個條件查詢request和個正常的request，拿到響應后，他會更新http緩存
- reload：表示fetch請求之前將忽略http緩存的存在，但是請求拿到響應后，他將主動更新http緩存
- force-cache：表示fetch請求不顧一切的依賴緩存，即使緩存過期了，它依然從緩存中讀取，除非沒有任何緩存，那么它將發送一個正常的request
- only-if-cached：表示fetch請求不顧一切的依賴緩存，即使緩存過期了，它依然從緩存中讀取，如果沒有緩存，它將拋出網絡錯誤（該設置只在mode為same-origin時有效）
3.返回值
fetch函數返回一個Promise對象【圖3-1】。當收到服務器的返回結果后，Promise進入resolved狀態，狀態數據為Response對象【圖3-2】；當網絡發生錯誤時（或其他導致無法完成交互的錯誤）時，Promise進入rejected狀態，狀態數據為錯誤信息【圖3-3】
【例3】
async function getData() {const url = "http://101.132.72.36:5100/api/local";const result = fetch(url);console.log(`fetch的返回值:`,result);const resp = await result;console.log(`狀態數據`,resp); } document.querySelector('button').onclick = function () {getData(); }【結果】
圖3-1 圖3-2 圖3-34.Request對象
除了使用基本的fetch方法，還可以通過創建一個Request對象來完成請求（實際上，fetch內部會自動創建一個Request對象）。【注】盡量保證每次請求都是一個新的Request。
【例4】
let req; //創建一個Request對象 function getRequestInfo() {if (!req) {const url = "http://101.132.72.36:5100/api/local";req = new Request (url, {}); //(地址，配置)console.log(req);}return req.clone(); //得到一個新的request } async function getProvinces() {const resp = await fetch(getRequestInfo());const result = await resp.json();console.log(result) } getProvinces();【結果】?
圖45.Response對象
1）ok：Boolean，當響應消息碼在200-299之間時為true，其他為false
2）status：number，響應的狀態碼
3）text()：用于處理文本格式的Ajax響應，它從響應中獲取文本流，將其讀完，然后返回一個被解決為string對象的Promise
4）blob()：用語處理二進制文件格式（比如圖片或電子表格）的Ajax響應。它讀取文件的原始數據，一旦讀取完整個文件，就返回一個被解決為blob對象的Promise
5）json()：用于處理JSON格式的AJAX的響應。它將JSON數據流轉換為一個被解決為Javascript對象的promise
６）redirect()：可以用于重定向到另一個URL，它會創建一個新的Promise，已解決來自重定向的URL的響應
【例5】下面給一個例子，發送fetch，然后打印返回數據
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head><body><button>獲取數據</button><script>async function getData() {const url = "http://101.132.72.36:5100/api/local";const result = await fetch(url);const data = await result.json();console.log(data);}document.querySelector('button').onclick = function () {getData();}</script> </body></html>【結果】
圖5?【注】我們也可以創建Response對象
4.Headers
在Request和Response對象內部，會將傳遞的請求頭對象轉換為Headers，Headers對象中的方法：
1）has(key)：檢查請求頭中是否存在指定的key值
2）get(key)：得到請求頭中對應的key值
3）set(key, value)：修改對應的鍵值對
4）append(key, value)：添加對應的鍵值對
5）keys()：得到所有請求頭的鍵的集合
6）values()：得到所有的請求頭中的值的集合
7）entries()：得到所有請求頭中的鍵值對的集合
超強干貨來襲 云風專訪：近40年碼齡，通宵達旦的技術人生總結
以上是生活随笔為你收集整理的Fetch API——简化你的AJAX的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Promise第三篇：async和awa
- 下一篇： JavaScript模块化不算漫长的发展