介紹

Fetch()方法可以發(fā)出類(lèi)似于XMLHttpRequest(XHR)的網(wǎng)絡(luò)請(qǐng)求。Fetch API和XMLHttpRequest之間的主要區(qū)別(也稱(chēng)為XHR)是Fetch API使用Promises，可以編寫(xiě)更簡(jiǎn)潔的API調(diào)用，從而嚴(yán)格避免回調(diào)地獄并降低XMLHttpRequest的復(fù)雜性

---

---

使用之前

• 使用XMLHttpRequest

在使用fetch之前，我們先可以了解下XMLHttpRequest，XMLHttpRequest需要設(shè)置兩個(gè)偵聽(tīng)器來(lái)處理成功響應(yīng)和錯(cuò)誤響應(yīng)情況，并調(diào)用open()和send()

function getAllPosts() { let data = JSON.parse(this.responseText); console.log(data);}let reqError = err => { console.log("Error", err);};let req = new XMLHttpRequest();req.onload = getAllPosts;req.onerror = reqError;req.open("GET", "https://xxxxx", true); req.send();

• 使用Fetch

現(xiàn)在看一下“Fetch之美”。讓我們使用Fetch重寫(xiě)上面的代碼。我們可以使用多種方式使用fetch方法，可以使用then方法或使用async / await方法。讓我們看看如何做到這一點(diǎn)：

1、使用Async/Await：

使用try/catch，async / await使處理同步和異步錯(cuò)誤相對(duì)容易：

async function getAllPosts() { try { let response = await fetch("" ); const data = await response.json(); console.log(data); } catch (err) { console.log(err); } }

2、使用then

調(diào)用then方法的缺點(diǎn)就是容易在大量回調(diào)請(qǐng)求的時(shí)候造成回調(diào)地獄，很難維護(hù)代碼

function getAllPosts() { fetch("https://xxxxx") .then(response => response.json()) .then(data => { console.log(data)}) .catch(err => {console.log(err); }); }

基本響應(yīng)類(lèi)型

當(dāng)我們發(fā)出fetch請(qǐng)求時(shí)，響應(yīng)會(huì)被指定為CORS類(lèi)型，opaque或basic。這些響應(yīng)類(lèi)型指示資源的來(lái)源，這也讓你知道如何處理響應(yīng)：

• 解釋：

• 當(dāng)來(lái)自同一來(lái)源的請(qǐng)求時(shí)，響應(yīng)將具有基本類(lèi)型，并且可以從響應(yīng)中看到的內(nèi)容沒(méi)有任何限制；
• 如果從其他來(lái)源發(fā)出請(qǐng)求，則響應(yīng)將具有CORS類(lèi)型。除了CORS響應(yīng)將可以查看的標(biāo)頭限制為Cache-Control，Content-Language，Content-Type，Expires和Last-Modified外，CORS和基本響應(yīng)類(lèi)型幾乎相同；
• opaque響應(yīng)是針對(duì)來(lái)自其他來(lái)源的資源(不返回CORS標(biāo)頭)的請(qǐng)求。這種類(lèi)型的響應(yīng)讀取不了返回的數(shù)據(jù)或查看請(qǐng)求的狀態(tài)，這意味著無(wú)法檢查請(qǐng)求是否成功。

用fetch發(fā)出POST請(qǐng)求

除了可以從api獲取數(shù)據(jù)之外，我們還可以使用Fetch方法執(zhí)行其他操作。假設(shè)我們要向博客API添加一個(gè)新博客，我們也可以使用Fetch方法來(lái)完成該操作：

下面可以是一個(gè)表單提交方式：

現(xiàn)在，我們有了一個(gè)用于添加新博客文章的表單，讓我們編寫(xiě)一個(gè)腳本，該腳本會(huì)將數(shù)據(jù)發(fā)送到添加API的請(qǐng)求：

document.getElementById("postData").addEventListener("submit", addNewPost); async function addNewPost(event) { try { event.preventDefault();//阻止默認(rèn)行為 let tittle = document.getElementById("title").value; let body = document.getElementById("body").value; let response = await fetch("****",{ method: "POST", headers: {"Content-Type": "application/json"}, body: JSON.stringify({ tittle: tittle, body: body }) } ); const data = await response.json(); console.log(data); } catch (err) { console.log(err); } }

使用Fetch上傳文件

我們還可以使用Fetch處理文件上傳，例如圖像和文檔：

document.getElementById("postData").addEventListener("submit", uploadfile); async function uploadfile(event) { try { event.preventDefault(); const fileField = document.querySelector('input[type="file"]'); const formData = new FormData(); formData.append("avatar", fileField.files[0]); let response = await fetch("...",{ method: "POST", headers: { "Content-Type": "application/json" }, body: formData }); const data = await response.json(); console.log(data); } catch (err) { console.log(err); } }

總結(jié)

盡管fetch是用于發(fā)出網(wǎng)絡(luò)請(qǐng)求的更好方法，新的fetch API似乎比XHR更快，更易于使用。畢竟，它是為了使我們能夠以正確的方式處理AJAX請(qǐng)求而創(chuàng)建的。

總結(jié)

以上是生活随笔為你收集整理的fetch vue读取json文件_前端笔记——尝试理解并在JavaScript中使用Fetch()的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。