介紹

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

---

---

使用之前

• 使用XMLHttpRequest

在使用fetch之前，我們先可以了解下XMLHttpRequest，XMLHttpRequest需要設(shè)置兩個(gè)偵聽器來處理成功響應(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重寫上面的代碼。我們可以使用多種方式使用fetch方法，可以使用then方法或使用async / await方法。讓我們看看如何做到這一點(diǎn)：

1、使用Async/Await：

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

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)請求的時(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)類型

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

• 解釋：

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

用fetch發(fā)出POST請求

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

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

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

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ò)請求的更好方法，新的fetch API似乎比XHR更快，更易于使用。畢竟，它是為了使我們能夠以正確的方式處理AJAX請求而創(chuàng)建的。

總結(jié)

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

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