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