fetch詳解

fetch

fetch 與 axios 的對比

fetch 優點：

1. 使用更方便。fetch 是瀏覽器原生支持的請求方法，也已直接在瀏覽器中使用，也可以在代碼中隨時使用，而不需要像 axios 一樣引入第三方包
2. 脫離了瀏覽器的 XHR，是 ES 規范里新的實現方式
3. 是基於 promise 的異步請求

fecth 缺點：

1. fetch 攜帶的參數如果是 json 對象需要轉換為 json 字符串，axios 可以直接傳對象
2. fetch 只對網絡請求報錯，對 400，500 都當做成功的請求，需要封裝去處理。xhr 自帶請求取消、錯誤等方法，所以服務器返回 4xx 或 5xx 時，axios 會拋出錯誤，並取消請求
3. fetch 默認不會帶 cookie，需要添加配置項 credentials:'include'才會攜帶 cookie
4. fetch 不支持 abort，不支持超時控制，使用 setTimeout 及 Promise.reject 的實現的超時控制並不能阻止請求過程繼續在后台運行，造成了量的浪費
5. fetch 沒有辦法原生監測請求的進度，而 XHR 可以

axios 優點：

1. 從瀏覽器中創建 XMLHttpRequest，基於瀏覽器的 xhr
2. 從 node.js 發出 http 請求
3. 支持 Promise API
4. 可以攔截請求和響應
5. 可以轉換請求和響應數據
6. 可以取消請求
7. 可以自動轉換 JSON 數據
8. 客戶端支持防止 CSRF/XSRF
9. xhr 自帶請求取消、錯誤等方法，所以服務器返回 4xx 或 5xx 時，axios 會拋出錯誤，並取消請求

axios 缺點：

1. 使用時需要先安裝 axios，引入 axios 並全局掛載 axios，才可以使用

fetch 使用

fetch 語法

fetch(url, options).then(
  (response) => {
    //處理http響應（只有響應成功，即使狀態碼是400，500，都會在這里顯示）
  },
  (error) => {
    //處理錯誤(只有發生網絡錯誤是會在這里報錯)
  },
)

示例：

function fetchGetParams() {
  console.log('fetch-test-get-params')
  const url = 'http://127.0.0.1:8080/get/list?name=zs&age=10'
  const options = {
    method: 'GET',
  }
  fetch(url, options)
    .then((response) => response.json())
    .then((data) => console.log(data))
    .catch((e) => console.log('error', e))
}
function fetchPostParams1() {
  console.log('fetch-test-post-params')
  const url = 'http://127.0.0.1:8080/post/list'
  const params = {
    name: 'postName',
    age: 100,
  }
  const options = {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(params),
  }
  fetch(url, options)
    .then((response) => response.json())
    .then((data) => console.log(data))
    .catch((e) => console.log('error', e))
}

請求參數

url ：是發送網絡請求的地址
options：發送請求參數,
    body : http請求參數
    mode : 指定請求模式。
        cros:允許跨域（為默認值）
        same-origin:只允許同源請求;
        no-cros:只限於get、post和head,並且只能使用有限的幾個簡單標頭。
    cache : 用戶指定緩存。
    method : 請求方法，默認GET
    signal : 用於取消 fetch
    headers : http請求頭設置
    keepalive : 用於頁面卸載時，告訴瀏覽器在后台保持連接，繼續發送數據。
    credentials : cookie設置，
        omit:忽略不帶cookie（默認），
        same-origin:同源請求帶cookie，
        inclue:無論跨域還是同源都會帶cookie。

fetch 請求成功后，響應 response 對象

• statusText - 服務器返回狀態文字描述
• ok - 返回布爾值，如果狀態碼 2 開頭的，則 true,反之 false
• status - http 狀態碼，范圍在 100-599 之間
• headers - 響應頭
• body - 響應體。響應體內的數據，根據類型各自處理。
• type - 返回請求類型。
• redirected - 返回布爾值，表示是否發生過跳轉。

讀取響應數據

• response 對象根據服務器返回的不同類型數據，提供了不同的讀取方法。
• response.text() -- 得到文本字符串
• response.json() - 得到 json 對象
• response.blob() - 得到二進制 blob 對象
• response.formData() - 得到 fromData 表單對象
• response.arrayBuffer() - 得到二進制 arrayBuffer 對象

response.json()

response.json()會將返回的數據讀取為 json 對象,並返回一個 promise
讀取完成，在.then()方法中可以取到 json 形式的返回數據

fetch(url, options)
  .then((response) => response.json())
  .then((data) => console.log(data))
  .catch((e) => console.log('error', e))

response.body()

body 屬性返回一個 ReadableStream 對象，供用戶操作，可以用來分塊讀取內容，顯示下載的進度就是其中一種應用
response.body.getReader() 返回一個遍歷器 read()，這個遍歷器 read() 方法每次都會返回一個對象，表示本次讀取的內容塊。

const response = await fetch('flower.jpg') // 請求圖片
const reader = response.body.getReader() // getReader()獲得響應數據
while (true) {
  const { done, value } = await reader.read() // read()遍歷響應數據
  // done是一個Boolean值，表示數據是否接收完成
  // value是遍歷后的數據，value.length表示數據的字節數
  if (done) {
    break
  }
  console.log(`Received ${value.length} bytes`)
}

get 請求

get 請求的參數必須拼接在請求地址后面

const url = 'http://127.0.0.1:8080/get/list?name=zs&age=10'
const options = {
  method: 'GET',
}
fetch(url, options)

post 請求

post 請求的參數放在 body 里面
需要配置 content-type，但因為 body 是字符串的緣故，瀏覽器默認給請求 Content-Type 的賦值是 text/plain

body: `user=${user.value}&pas=${pas.value}`

提交 json 數據時，需要把 json 轉換成字符串

body: JSON.stringify(json)

提交的是表單數據，使用 formData 轉化下嗎，上傳文件，可以包含在整個表單里一起提交

const data = new FormData()
data.append('file', input.files[0])
data.append('user', 'foo')
body: data

上傳二進制數據，將 bolb 或 arrayBuffer 數據放到 body 屬性里

body: blob