介紹

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

並降低XMLHttpRequest的複雜性

使用之前

使用XMLHttpRequest

在使用fetch之前，我們先可以瞭解下XMLHttpRequest，XMLHttpRequest需要設置兩個偵聽器來處理成功響應和錯誤響應情況，並調用open()和send()

<code>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();/<code>

使用Fetch

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

1、使用Async/Await：

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

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

2、使用then

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

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

基本響應類型

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

解釋：

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

用fetch發出POST請求

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

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

<code>/<code>

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

<code>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);
        } 

      }/<code>

使用Fetch上傳文件

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

<code>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);
        }
    }/<code>