介紹

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請求而創建的。