介紹

Fetch()方法可以發出類似于XMLHttpRequest(XHR)的網絡請求。Fetch API和XMLHttpRequest之間的主要區別(也稱為XHR)是Fetch API使用Promises，可以編寫更簡潔的API調用，從而嚴格避免回調地獄并降低XMLHttpRequest的復雜性

---

---

使用之前

• 使用XMLHttpRequest

在使用fetch之前，我們先可以了解下XMLHttpRequest，XMLHttpRequest需要設置兩個偵聽器來處理成功響應和錯誤響應情況，并調用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

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

1、使用Async/Await：

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

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

2、使用then

調用then方法的缺點就是容易在大量回調請求的時候造成回調地獄，很難維護代碼

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

基本響應類型

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

• 解釋：

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

用fetch發出POST請求

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

下面可以是一個表單提交方式：

現在，我們有了一個用于添加新博客文章的表單，讓我們編寫一個腳本，該腳本會將數據發送到添加API的請求：

document.getElementById("postData").addEventListener("submit", addNewPost); async function addNewPost(event) { try { event.preventDefault();//阻止默認行為 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); } }

總結

盡管fetch是用于發出網絡請求的更好方法，新的fetch API似乎比XHR更快，更易于使用。畢竟，它是為了使我們能夠以正確的方式處理AJAX請求而創建的。

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。