NodeFetch詳解

一、NodeFetch介紹

NodeFetch是一個基於Node.js的HTTP/HTTPS請求庫，它提供了一種非同步處理請求的HTTP客戶端，可用於從網路中獲取數據並與API進行交互。

NodeFetch的一個優點是它允許在客戶端和伺服器端運行。因此，開發人員可以在Node.js環境中使用其相同的APIs來供Web瀏覽器使用。此外，NodeFetch還可以通過Promises或Callbacks非同步發送HTTP請求，並且能夠代理請求。

二、NodeFetch API

1、fetch(url, [options])

fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error))

使用fetch()方法可以發起一個HTTP請求，並返回一個Promise。支持多種請求的方式，比如get、post、put、delete等，也可以設置請求頭、代理，以及指定請求體的格式等基本配置。fetch()默認是不發送Cookies等驗證信息的，需要手動添加。

在上面示例中，我們首先使用fetch()方法發起了一個get請求，然後通過調用response.json()方法將返回的內容解析為JSON格式，並通過promise的鏈式調用將得到的結果在控制台輸出。

2、fetch(url, [options]) + Async/Await

const getData = async () => {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
};
getData();

除了promise的鏈式調用之外，NodeFetch還支持使用Async/Await進行非同步編程。

在上面的示例中，我們首先定義了一個非同步函數getData()，然後使用Async關鍵字定義了該函數的非同步性。接下來，我們使用try…catch語句塊來捕獲可能出現的錯誤，並在try語句塊中通過await關鍵字等待fetch()非同步請求返回的結果，最後將得到的結果直接輸出在控制台上。

3、請求中帶上Header選項

const headers = {
  'Content-Type': 'application/json',
  'Authorization': 'Bearer ' + token
}
fetch('https://api.example.com/', { headers })
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error))

使用NodeFetch發送請求時，還可以設置HTTP請求頭，以增加請求的可定製性。

在上面的示例中，我們定義了一個包含兩個HTTP請求頭Content-Type和Authorization的headers對象。然後，我們使用fetch()方法發起了一個HTTP GET請求，並通過指定headers選項將上述HTTP請求頭加入到此次請求中。

4、設置請求方法和請求體

const options = {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    title: 'foo',
    body: 'bar',
    userId: 1
  })
};
fetch('https://jsonplaceholder.typicode.com/posts', options)
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error))

你可以通過指定請求體來實現一個POST/PUT/DELETE HTTP請求。

在上面的示例中，我們通過創建一個options對象來設置JSON格式的請求體，然後通過指定請求方法為’POST’，將請求體隨此次請求發送到後端伺服器。

三、常見問題

1、NodeFetch直接返回Promise會不會造成性能問題？

不會。NodeFetch並沒有將請求立即發送到伺服器，而是在調用.then()或.catch()方法後才會進行實際的網路請求，如果在這段時間內出現了高佔用的操作，可以使用AbortController取消該次請求。

2、NodeFetch的優點是什麼？

NodeFetch提供了一個高級API來處理HTTP請求，並允許以非同步方式發送請求，使得前端工程師可以更加容易地處理伺服器端API的交互。它具有易用性、清晰的API文檔，還提供了自定義配置的靈活性。

3、NodeFetch和Axios相比有什麼優缺點？

相比於Axios，NodeFetch具有更少的代碼量，並且使用起來更加直觀。Axios支持從伺服器拉取大型二進位文件，並提供更多的默認設置，但是它需要外部JavaScript庫才能使用，代碼大小和複雜性也已發生變化。

結語

NodeFetch是一個功能齊全、簡單易用的HTTP/HTTPS請求庫。通過上述詳細的介紹，希望你可以更好地了解它的使用，從而優化你的前端工程開發。