沐鳴登陸地址_Fetch還是Axios,哪個更適合HTTP請求？

前端開發最重要的部分之一是通過發出HTTP請求與後端進行通信，我們有幾種方法可以異步地在JavaScript中進行API調用。

幾年前，大多數應用程序都使用Ajax發送HTTP請求，Ajax代表異步JavaScript和XML。但是現在，開發人員通常會決定在 .fetch() API和Axios之間進行選擇。

在本文中，我想比較這兩種方法，並簡要介紹一下基本知識和語法。除此之外，我還將比較在兩種情況下以及在錯誤處理中將數據轉換為jsON格式的過程。我還將討論HTTP攔截和下載進度。

開始吧！

Fetch概述和語法

在構建Javascript項目時，我們可以使用window對象，並且它帶有許多可以在項目中使用的出色方法。這些功能之一是Fetch API，它提供了一種簡單的全局 .fetch() 方法，這是一種從API異步獲取數據的邏輯解決方案。

讓我們看一下 .fetch() 方法的語法。

fetch(url)
  .then((res) => 
    // handle response
  )
  .catch((error) => {
    // handle error
  })

在上面的示例中，您可以看到簡單的獲取GET請求的語法。在 .fetch() 方法中，我們有一個強制性參數url，它返回一個Promise，可以使用Response對象來解決。

.fetch() 方法的第二個參數是選項，它是可選的。如果我們不傳遞 options，請求總是GET，它從給定的URL下載內容。

在選項參數裏面，我們可以傳遞方法或頭信息，所以如果我們想使用POST方法或其他方法，我們必須使用這個可選的數組。

正如我之前提到的，Promise會返回Response對象，正因為如此，我們需要使用另一個方法來獲取響應的主體。有幾種不同的方法可以使用，取決於我們需要的格式：

response.json()
response.text()
response.formData()
response.blob()
response.arrayBuffer()

讓我們看一下帶有可選參數的代碼示例。

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

在上面的代碼示例中，你可以看到簡單的POST請求，包括 method、header 和 body params。然後我使用 json() 方法將響應轉換為JSON格式。

現在，讓我們仔細看看axios。

Axios概述和語法

Axios是一個Javascript庫，用於從Node.js或XMLHttpRequests或瀏覽器發出HTTP請求。作為一個現代的庫，它是基於Promise API的。

axios 有一些優勢，比如對XSRF的保護或取消請求。

為了能夠使用 axios 庫，我們必須將其安裝並導入到我們的項目中。可以使用CDN，npm或bower安裝 axios。現在，讓我們來看一個簡單的GET方法的語法。

axios.get(url)
  .then(response => console.log(response));
  .catch((error) => console.log(error));

在上面的代碼中，你可以看到我使用 .get() 方法創建一個簡單的GET請求。如果你想在函數中使用POST方法，那麼只需使用 .post() 方法代替，並將請求數據作為參數傳遞即可。

當我們創建配置對象時，我們可以定義一堆屬性，最常見的是：

baseUrl
params
headers
auth
responseType

作為響應，axios 返回一個promise，該promise將與響應對象或錯誤對象一起解析。在響應對象中，具有以下值：

data，這是實際的響應主體


status，調用的HTTP狀態，例如200或404


statusText，以文本消息形式返回的HTTP狀態，例如 ok


headers，服務器發回標頭


config，請求配置


request，XMLHttpRequest對象

現在，讓我們看一下帶有數據的POST方法的代碼示例。

axios.post({
  '/url', 
  { name: 'John', age: 22},
  { options }
})

在上面的代碼中，你可以看到 post 方法，我們把config對象作為param，其中有URL、數據和附加選項。

我們還可以將config對象定義為變量，然後像下面的示例一樣將其傳遞給 axios。

const config = {
  url: 'http://api.com',
  method: 'POST',
  header: {
    'Content-Type': 'application/json'
  },
  data: {
    name: 'John',
    age: 22
  }
}
axios(config);

在這裏，你可以看到所有的參數，包括URL、數據或方法，都在config對象中，所以在一個地方定義所有的東西可能更容易。

JSON

如前所述，當我們在使用 .fetch() 方法的時候，需要對響應數據使用某種方法，當我們在發送帶有請求的body時，需要對數據進行字符串化。

在 axios 中，它是自動完成的，所以我們只需在請求中傳遞數據或從響應中獲取數據。它是自動字符串化的，所以不需要其他操作。

讓我們看看如何從 fetch() 和 axios 獲取數據。

// fetch
fetch('url')
  .then((response) => response.json())
  .then((data) => console.log(data))
  .catch((error) => console.log(error))
// axios
axios.get('url')
  .then((response) => console.log(response))
  .catch((error) => console.log(error))

在上面的例子中，你可以看到，使用 axios 我們沒有額外的一行代碼，在 .fetch()的例子中，我們必須將數據轉換為JSON格式。在一個較大的項目中，如果你創建了大量的調用，那麼使用 axios 來避免重複代碼會更舒服。

錯誤處理

在這一點上，我們還需要給 axios 點贊，因為處理錯誤是非常容易的。如果出現像404這樣的錯誤響應，promise就會被拒絕並返回一個錯誤，所以我們需要捕獲一個錯誤，我們可以檢查它是什麼類型的錯誤，就是這樣。讓我們看看代碼示例。

axios.get('url')
  .then((response) => console.log(response))
  .catch((error) => {
    if (error.response) {
      // When response status code is out of 2xx range 
      console.log(error.response.data)
      console.log(error.response.status)
      console.log(error.response.headers)
    } else if (error.request) {
      // When no response was recieved after request was made
      console.log(error.request)
    } else {
      // Error
      console.log(error.message)
    }
  })

在上面的代碼中，當響應良好時，我返回了數據，但是如果請求以任何方式失敗，我就能夠檢查 .catch() 部分中的錯誤類型並返回正確的消息。

對於 .fetch() 方法，就比較複雜了。每次我們從 .fetch() 方法中得到響應時，我們需要檢查狀態是否成功，因為即使不是，我們也會得到響應。在 .fetch() 的情況下，只有當請求沒有完成時，promise才會被解決。讓我們看一下代碼示例。

fetch('url')
  .then((response) => {
    if (!response.ok) {
      throw Error(response.statusText);
    }
    return response.json()
  })
  .then((data) => console.log(data))
  .catch((error) => console.log(error))

在這段代碼中，我已經在承諾對象中檢查了代碼的狀態，如果響應有狀態 ok，那麼我就可以處理並使用 .json() 方法，但如果沒有，我必須在 .then() 裏面返回錯誤。

為了方便和正確的錯誤處理，對於你的項目來說，axios 絕對會是一個更好的解決方案，但如果你正在構建一個只有一兩個請求的小項目，使用 .fetch() 是可以的，但你需要記住正確處理錯誤。

下載進度

當我們需要下載大量的數據時，一種跟蹤進度的方法會很有用，特別是當用戶的網絡速度很慢時。早期，為了實現進度指標，開發者使用了 XMLHttpRequest.onprogress 回調。在 .fetch() 和 axios 中，有不同的方法來實現。

為了在 .fetch() 中跟蹤下載進度，我們可以使用其中一個 response.body 屬性，一個 ReadableStream 對象。它逐塊提供主體數據，並允許我們計算時間消耗了多少數據。

在axios中，實現一個進度指示器也是可能的，而且更容易，因為存在一個現成的模塊，可以安裝和實現，它叫做Axios Progress Bar。

如果你有大量的大數據要下載，你想跟蹤進度指標的進度，你可以用 axios 來管理，更容易更快，但 .fetch() 也提供了這種可能性，只是它需要更多的代碼來開發同樣的結果。

HTTP攔截

當我們需要檢查或改變我們從應用程序到服務器的HTTP請求時，或者以其他方式，例如，為了驗證，HTTP攔截可能是重要的。

在 axios 的情況下，HTTP攔截是這個庫的關鍵功能之一，這就是為什麼我們不需要創建額外的代碼來使用它。讓我們看一下代碼示例，看看我們能做到多麼容易。

// 請求攔截
axios.interceptors.request.use((config) => {
  console.log('Request sent');
})
// 響應攔截
axios.interceptors.response.use((response) => {
  // do an operation on response
  return response
})
axios.get('url')
  .then((response) => console.log(response))
  .catch((error) => console.log(error))

在代碼中，您可以看到請求攔截和響應攔截。在第一種情況下，我創建了一個 console.log，告知發送請求的情況，在響應攔截中，我們可以對響應做任何操作，然後返回。

.fetch() 默認不提供HTTP攔截功能，我們可以覆蓋 .fetch() 方法，定義發送請求過程中需要發生的事情，當然，這需要更多的代碼，可能比使用 axios 功能更複雜。

總結

在這篇文章中，我比較了用於創建HTTP請求的兩種方法，從簡單的概述開始，通過語法和一些重要的功能，如下載進度或錯誤處理。

通過比較可以看出，對於有大量HTTP請求，需要良好的錯誤處理或HTTP攔截的應用，Axios是一個更好的解決方案。在小型項目的情況下，只需要幾個簡單的API調用，Fetch也是一個不錯的解決方案。

在選擇項目的最佳解決方案時，還要注意一個因素，這是非常重要的。大多數瀏覽器和Node.js環境都支持Axios，而現代瀏覽器僅支持Fetch，並且某些版本可能會與舊版本一起發布。

通過這些知識的了解，希望大家能夠選擇出最適合自己的方案，也希望大家覺得這個比較有幫助。

來源：https://medium.com
作者：Harsh Patel

站長推薦

1.雲服務推薦: 國內主流雲服務商，各類雲產品的最新活動，優惠券領取。地址：阿里雲騰訊雲華為雲

2.廣告聯盟: 整理了目前主流的廣告聯盟平台，如果你有流量，可以作為參考選擇適合你的平台點擊進入

鏈接: http://www.fly63.com/article/detial/9885