JS Fetch: 一站式網路請求利器

在前端開發中，一次網路請求是無法避免的，而JS Fetch作為一種新型的網路請求API，其能夠幫助開發者更加簡潔、高效地完成數據請求，取代了原有的XMLHttpRequest（XHR）對象。

一、JS Fetch是什麼？

JS Fetch是一個現代化的API，用於代表HTTP請求的響應，並且支持Promise API（解決了XHR對象存在的非同步問題）。JS Fetch使從網路獲取資源變得非常容易，可以使用XMLHttpRequest對象替代傳統XHR對象，也可以通過其它 HTTP請求的工具庫進行替代。

fetch('http://example.com/movies.json')
  .then(response => response.json())
  .then(data => console.log(data));

fetch函數用於發起請求，它返回一個Promise對象，其中Promise的resolve方法返回一個Response對象，該對象表示與伺服器響應相關的信息。Response對象的body屬性包含通過fetch請求獲取到的BodyStream，而且可以通過使用各種解析器來解析文本數據。

二、JS Fetch的MDN文檔

MDN的JS Fetch文檔是學習使用JS Fetch時的最好指南之一。通過訪問MDN文檔，可以得到JS Fetch的基礎知識及使用方式。

// 獲取請求
fetch('http://example.com/movies.json')
  .then(function(response) {
    return response.json();
  })
  .then(function(myJson) {
    console.log(JSON.stringify(myJson));
  });

文檔中的這個例子展示了如何使用JS Fetch API從伺服器獲取JSON數據，而後使用console.log方法將數據列印到控制台中。其中的then方法鏈用於處理來自fetch函數的響應結果，並且返回一個Promise對象。

三、JS Fetch的API

fetch函數可接受多個參數，其中最重要的一個是URL參數，用於指定要獲取資源的URL字元串。除此之外，JS Fetch還支持一系列內置API，例如：

response.headers：包含響應標頭的「只讀」屬性。
response.ok：表示伺服器是否成功響應，其值為布爾類型。
response.status：響應狀態碼，它會根據錯誤代碼返迴響應。這個值在從伺服器獲取響應的時候非常常用，可用於判斷伺服器響應情況。
response.statusText：響應狀態類型的描述文本。

fetch('http://example.com/movies.json')
  .then(response => {
    console.log(response.headers.get('Content-Type'));
  });

上述代碼中，使用fetch獲取資源後，獲取響應的Content-Type，content-type是HTTP標頭，指示在得到伺服器響應的情況下接收的實體的媒體類型。

四、JS Fetch的await用法

JS Fetch支持ES7的Async/Await語法，把Promise代碼變成更容易可讀的同步代碼。我們可以在運行fetch時等待結果：

async function getUsername() {
  try {
    const response = await fetch('/api/user');
    const user = await response.json();
    return user.name;
  } catch (error) {
    console.error('獲取信息失敗', error);
  }
}

這裡是一個使用async/await獲取用戶信息的示例。當fetch請求成功後，它將返回一個響應對象，返回的結果將是可以調用JSON()函數的BodyStream對象的非同步解析。接下來，我們可以使用用戶的名字返回結果。

五、JS Fetch的POST請求

在HTTP中，POST請求是一種方法，HTTP客戶端用該方法向伺服器發送數據。同樣地，JS Fetch可以用於發送POST請求，代碼如下：

fetch('/users', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    user: 'john-doe'
  })
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error))

在上述代碼中，我們可以看到fetch的第二個參數包含HTTP方法（這裡是’POST’）和用於發送與請求一起發送的數據體的附加信息。”headers”選項允許我們發送JSON響應，而”body”選項是POST請求中的數據負載。

六、JS Fetch函數

JS Fetch帶有內置方法，其中包括對通過fetch請求獲取文本內容（text）、JSON數據（json）以及ArrayBuffer對象等的處理方法。比如，我們可以使用如下代碼來解析來自fetch請求的文本響應：

fetch('/example.txt')
  .then(response => response.text())
  .then(data => console.log(data))
  .catch(error => console.log(error));

這裡，我們使用text()方法來解析來自fetch請求的文本響應。取決於響應，text()方法會返迴文本字元串。

七、JS Fetch跨域問題

JS Fetch默認會遵循『同域數據源』限制，以限制由於跨站點資源獲取而導致的數據泄露風險。但是，如果需要，我們也可以以跨域方式使用JS Fetch。

以下是一些例子：

fetch('https://api.example.com/data')
  .then((response) => {
    console.log(response);
  })
  .catch((error) => {
    console.error(error);
  });

上述例子中，我們使用了https://api.example.com上的API endpoint作為數據源。由於這是一個不同的域名，fetch請求將被阻止，因為它違反了「同源策略」。

如果我們嘗試在此情況下進行跨域請求，則需要向請求頭中添加credentials屬性：

fetch('https://api.example.com/data', {
  credentials: 'include'
})
  .then((response) => {
    console.log(response);
  })
  .catch((error) => {
    console.error(error);
  });

設置了credentials之後，fetch請求將可成功跨域。

八、JS Fetch Stream

JS Fetch Stream允許我們像流式傳輸一些數據一樣逐步接收數據。下面是fetch().body實現HTTP/2流傳輸的示例：

const res = await fetch('/stream');
const reader = res.body.getReader();

if (res.body === null) return;

while (true) {
  const { done, value } = await reader.read();
  if (done) break;
  console.log(value);
}

上述代碼中的fetch()函數會返回一個Response對象，其中response.body是一個可讀的流。然後，我們為流創建一個reader對象，reader對象允許我們從可讀流中讀取數據。

九、JS Fetch Headers

Headers對象是與請求和響應頭部相關的相鄰信息，該對象包含所有HTTP報頭（也可以說成META數據）的集合。我們可以使用Headers對象來檢查fetch請求和響應的HTTP標頭：

fetch('/data')
  .then(response => {
    const headers = response.headers;
    console.log(headers);
  })
  .catch(console.error);

上述代碼中，我們使用了Headers對象來檢查來自fetch請求的響應頭。由於headers對象包含HTTP報頭的集合，因此我們可以輕鬆地得到伺服器響應的HTTP響應頭信息。

原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/280559.html