提取 API

@serverSerrverlesskiy

Fetch API 允許 JavaScript 使用HTTP請求與服務器通信，並且是XMLHttpRequest類的更好替代。查詢由 fetch() 方法，返回 Promise.

Exchange

句法

Book

fetch(url, { options })

url - 發送請求的URL;
options - 請求參數。

通過指定 fetch() 沒有方法 options, 您將收到一個GET請求，該請求將從 URL.

參數要求

Option

第二個論點 {options} 接受請求參數。參數清單:

method - 請求方法 (GET, POST, PUT, DELETE, HEAD);
headers - HTTP 標頭;
body - 請求正文（用於方法：POST / PUT);
cache - 緩存模式 (default, reload, no-cache);
mode - 請求模式 (cors, no-cors, same-origin);
redirect - 指定如何處理重定向 (follow, error, manual);
referrer - 請求推薦人;
signal - 中止信號，中斷請求;
credentials - 與請求一起發送Cookie-MIT，同源。

fetch('https://jsonplaceholder.typicode.com/users', {
  method: 'GET',
  headers: {
    'Content-Type': 'application/json'
  },
  mode: 'no-cors'
})

收到回應

Bascketball

fetch() 方法返回 Promise 的對象 Response 類，具有以下屬性：

status - 回應碼;
statusText - 對應於響應代碼的短信message;
ok - 指示響應代碼成功的布爾值 (true: 200-299);
headers - 具有響應標頭的對象，其中鍵是標頭的名稱，鍵值是與鍵對應的標頭的值;
url - 請求發送到的URL;
body - 輸入響應數據 ReadableStream 格式
bodyUsed - 指示數據讀取的布爾值。

fetch('https://jsonplaceholder.typicode.com/users').then(response => console.log(response))

響應處理

Download

傳輸的數據格式為 ReadableStream. 可以使用以下方法來更改格式：

text() - 將答案轉換為字符串;
json() - 將響應轉換為JSON格式;
blob() - c將響應轉換為Blob對象;
formData() -響應被轉換為FormData實例;
arrayBuffer() - 將響應轉換為ArrayBuffer對象.

將響應轉換為ArrayBuffer對象.

fetch('https://jsonplaceholder.typicode.com/users')
  .then(response => response.json())
  .then(data => console.log(data))

錯誤處理

Error

我們可以找出是否 fetch() 已使用 “狀態” 和 “確定” 屬性完成了錯誤。

fetch('https://jsonplaceholder.typicode.com/users')
  .then(response => {
    if (!response.ok) {
      console.log('Something went wrong ... Status:' + response.status)
    } else {
      return response.json()
    }
  })
  .then(data => console.log(data))

With help .catch()

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

索取範例

Math

fetch('https://jsonplaceholder.typicode.com/users')
  .then(response => response.json())
  .then(data => console.log(data[0].name + ' and ' + data[2].name))
  .catch(error => console.log(error))

一樣，使用 async / await 語法，我們將在下一篇文章中更詳細地了解。

let response = await fetch('https://jsonplaceholder.typicode.com/users')
let data = await response.json()
console.log(data[0].name + ' and ' + data[2].name)