提取API

了解有關Fetch API的全部信息,Fetch API是使用Promises作為構建塊的異步網絡請求的現代方法

Fetch API簡介

自IE5於1998年發布以來,我們可以選擇使用以下命令在瀏覽器中進行異步網絡調用XMLHttpRequest(XHR)。

此後數年,GMail和其他豐富的應用程序大量使用了它,並使該方法如此流行,以至於必須要有一個名稱:AJAX

直接使用XMLHttpRequest一直很麻煩,而且幾乎總是被某些庫抽象化,特別是jQuery圍繞它構建了自己的幫助器函數:

  • jQuery.ajax()
  • jQuery.get()
  • jQuery.post()

等等。

它們對使它更易於訪問產生了巨大的影響,尤其是在確保所有功能都可以在較舊的瀏覽器上正常運行方面。

提取API,已標準化為異步網絡請求和使用的現代方法承諾作為構建塊。

除了IE之外,Fetch在所有主要瀏覽器上都有很好的支持。

The browser support for the Fetch API

保鮮膜https://github.com/github/fetch被釋放的GitHub允許我們使用fetch在任何瀏覽器上。

使用提取

開始將Fetch用於GET請求非常簡單:

fetch('/file.json')

並且您已經在使用它:fetch將發出HTTP請求以獲取file.json同一域上的資源。

如您所見,fetch該功能在全球範圍內可用window範圍。

現在,讓它變得更有用,讓我們實際看看文件的內容是什麼:

fetch('./file.json')
  .then(response => response.json())
  .then(data => console.log(data))

呼喚fetch()返回一個承諾。然後,我們可以通過向處理程序傳遞一個then()承諾的方法。

該處理程序接收到的返回值fetch答應回复目的。

在下一節中,我們將詳細介紹該對象。

捕捉錯誤

自從fetch()返回承諾,我們可以使用catch許諾攔截請求執行過程中發生的任何錯誤的方法,以及在then回調:

fetch('./file.json')
.then(response => {
  //...
})
.catch(err => console.error(err))

捕獲錯誤的另一種方法是在第一時間對其進行管理then

fetch('./file.json')
.then(response => {
  if (!response.ok) { throw Error(response.statusText) }
  return response
})
.then(response => {
  //...
})

響應對象

由a返回的響應對象fetch()呼叫包含有關請求和網絡請求響應的所有信息。

元數據

標頭

訪問headers財產response對象使您能夠查看請求返回的HTTP標頭:

fetch('./file.json').then(response => {
  console.log(response.headers.get('Content-Type'))
  console.log(response.headers.get('Date'))
})

Request headers for fetch

狀態

此屬性是代表HTTP響應狀態的整數。

  • 101、204、205或304為空身體狀態
  • 200到299(含)之間為OK狀態(成功)
  • 301、302、303、307或308是重定向

    fetch('./file.json').then(response => console.log(response.status))
    

statusText

statusText是表示響應狀態消息的屬性。如果請求成功,則狀態為OK

fetch('./file.json').then(response => console.log(response.statusText))

網址

url代表我們提取的屬性的完整URL。

fetch('./file.json').then(response => console.log(response.url))

身體內容

響應具有一個正文,可以使用以下幾種方法進行訪問:

  • text()以字符串形式返回主體
  • json()將身體返回為JSON格式解析的對象
  • blob()將身體返回為斑點目的
  • formData()將正文作為FormData對象返回
  • arrayBuffer()返回身體作為ArrayBuffer目的

所有這些方法都返回一個承諾。例子:

fetch('./file.json')
  .then(response => response.text())
  .then(body => console.log(body))
fetch('./file.json')
  .then(response => response.json())
  .then(body => console.log(body))

Get JSON

可以使用ES2017 異步功能

;(async () => {
  const response = await fetch('./file.json')
  const data = await response.json()
  console.log(data)
})()

請求對象

Request對象代表一個資源請求,通常使用new Request()API。

例子:

const req = new Request('/api/todos')

Request對象提供了幾個只讀屬性來檢查資源請求的詳細信息,包括

  • method:請求的方法(GET,POST等)
  • url:請求的網址。
  • headers:請求的關聯Headers對象
  • referrer:請求的引薦來源
  • cache:請求的緩存模式(例如,默認,重新加載,無緩存)。

並公開了幾種方法,包括json()text()formData()處理請求的主體。

完整的API可以在以下位置找到https://developer.mozilla.org/docs/Web/API/Request

請求標頭

能夠設置HTTP請求標頭至關重要,並且fetch使我們能夠使用Headers對象執行此操作:

const headers = new Headers()
headers.append('Content-Type', 'application/json')

或者:

const headers = new Headers({
  'Content-Type': 'application/json'
})

要將標頭附加到請求,我們使用Request對象,並將其傳遞給fetch()而不是傳遞網址。

代替:

fetch('./file.json')

我們的確是

const request = new Request('./file.json', {
  headers: new Headers({
    'Content-Type': 'application/json'
  })
})
fetch(request)

Headers對像不僅限於設置值,我們還可以查詢它:

headers.has('Content-Type')
headers.get('Content-Type')

我們可以刪除先前設置的標頭:

headers.delete('X-My-Custom-Header')

POST請求

提取還允許在您的請求中使用任何其他HTTP方法:POST,PUT,DELETE或OPTIONS。

在請求的method屬性中指定方法,並在標頭和請求正文中傳遞其他參數:

POST請求的示例:

const options = {
  method: 'post',
  headers: {
    'Content-type': 'application/x-www-form-urlencoded; charset=UTF-8'
  },
  body: 'name=Flavio&test=1'
}

fetch(url, options).catch(err => { console.error(‘Request failed’, err) })

如何取消獲取請求

幾年後fetch引入後,打開後便無法中止請求。

現在,由於引入了AbortControllerAbortSignal,用於通知的通用API中止大事記

您可以通過傳遞信號作為訪存參數來集成此API:

const controller = new AbortController()
const signal = controller.signal

fetch(’./file.json’, { signal })

您可以設置一個超時,以在獲取請求開始後5秒鐘觸發中止事件,以將其取消:

setTimeout(() => controller.abort(), 5 * 1000)

方便的是,如果提取操作已經返回,則調用abort()不會導致任何錯誤。

當發生中止信號時,提取將使用以下命令拒絕承諾DOMException命名AbortError

fetch('./file.json', { signal })
  .then(response => response.text())
  .then(text => console.log(text))
  .catch(err => {
    if (err.name === 'AbortError') {
      console.error('Fetch aborted')
    } else {
      console.error('Another error', err)
    }
  })

尋找更多?

使用網絡很難,對嗎?您可能會發現AxiosJavaScript庫可能會基於Fetch構建一些附加功能,更適合您的需求。一探究竟!

免費下載我的JavaScript初學者手冊


更多瀏覽器教程: