Fetch API

XMLHttpRequest的問題

所有的功能全部集中在同一個對象上寇仓，容易寫出不易維護的代碼
采用傳統(tǒng)的事件驅動模式乔煞，無法適配新的Promise API

Fetch API的特點

并非取代AJAX岭辣，而是對AJAX的一種改進
精細的功能分割：頭部信息搁廓，請求信息押袍，響應信息等均分布到不同的對象诵冒，更利于處理各種復雜的AJAX場景
使用了Promise API，更利于異步代碼的書寫
Fetch API不是ES6的內容谊惭，而是HTML5新增的web API
需要有網(wǎng)絡通信的知識

基本使用

請求測試地址：http://api.kuanglinfeng.com

使用fetch函數(shù)即可向服務器發(fā)送網(wǎng)絡請求

  async function getList() {
    const url = 'http://api.kuanglinfeng.com'
    const config = {
      method: 'GET',
      headers: {
        "Content-Type": "application/json",
        // mode: 'no-cors'
      }
    }
    const data = await fetch(url, config).then(response => {
      return response.json()
    })
    console.log(data)
  }

  const button = document.querySelector('button')

  button.addEventListener('click', async () => {
    await getList()
  })

參數(shù)

該函數(shù)有兩個參數(shù)：

必填汽馋，字符串，請求地址
選填圈盔，對象豹芯，請求配置

參數(shù)2（請求配置對象）的屬性：

method：字符串，請求方法驱敲，默認值GET
headers：對象铁蹈，請求頭信息
body：請求體的內容，必須匹配請求頭中的Content-Type
mode：字符串众眨，請求模式
- cors：默認值握牧，配置為該值，會在請求頭中加入origin和referer
- no-cors：配置為該值娩梨，不會在請求頭中加入origin和referer沿腰，跨域的時候可能會出現(xiàn)問題
- same-origin：指示請求必須在同一個域中發(fā)生，如果請求其它域狈定，則會報錯
credentials：如何攜帶憑據(jù)（cookie）
- omit：默認值颂龙，不攜帶cookie
- same-origin：請求同源地址時攜帶cookie
- include：請求任何地址都攜帶cookie
cache：配置緩存模式
- default：表示fetch請求之前將檢查下http緩存
- no-store：表示fetch請求將完全忽略http緩存的存在，這意味著請求之前將不再檢查下http的緩存掸冤，拿到響應后厘托，它也不會更新http緩存
- no-cache：如果存在緩存，那么fetch將發(fā)送一個條件查詢request和一個正常的request稿湿，拿到響應后會更新http緩存
- reload：表示fetch請求之前將忽略http緩存的存在铅匹，但是請求拿到響應后，它將主動更新http緩存
- force-cache：表示fetch請求不顧一切的依賴緩存饺藤，即使緩存過期了包斑，它依然從緩存讀取，除非沒有任何緩存涕俗，那么它將發(fā)送一個正常的request
- only-if-cached：表示fetch請求不顧一切的依賴緩存罗丰，即使緩存過期了，依舊從緩存中讀取再姑，如果沒有緩存萌抵，將拋出網(wǎng)絡錯誤（該設置只在mode為same-origin有效）

返回值

fetch函數(shù)返回一個Promise對象

當收到服務器的返回結果后，Promise進入resolve狀態(tài)，狀態(tài)數(shù)據(jù)為Response對象
當網(wǎng)絡發(fā)生錯誤（或其它導致無法完成交互的錯誤）時绍填，Promise進入reject狀態(tài)霎桅，狀態(tài)數(shù)據(jù)為錯誤信息

Response對象

ok：boolean，當響應碼在200-299之間為true讨永，其它為false
status：number滔驶，響應的狀態(tài)碼
text()：用于處理文本格式的Ajax響應，它從響應中獲取文本流卿闹，將其讀完揭糕，然后返回一個被resolve為string對象的Promise
blob()：用于處理二進制文件格式（圖片、電子表格等）的Ajax響應锻霎，它讀取文件的原始數(shù)據(jù)著角，一旦讀取完整個文件，就返回一個被resolve為blob對象的Promise
json()：用于處理JSON格式的Ajax響應量窘，它將JSON數(shù)據(jù)流轉換為一個被resolve為JavaScript對象的Promise
redirect()：可以用于重定向到另一個URL雇寇，它會創(chuàng)建一個新的Promise，resolve來自重定向的URL的響應

Request對象

除了Fetch API上面的基本用法外（實際fetch內部會幫你創(chuàng)建Request對象）蚌铜，還可以通過創(chuàng)建一個Request對象來完成請求

  async function getList() {
    const url = 'http://api.kuanglinfeng.com'
    const config = {
      method: 'GET',
      headers: {
        "Content-Type": "application/json",
        // mode: 'no-cors'
      }
    }
    // 創(chuàng)建Request對象
    const request = new Request(url, config)
    const data = await fetch(request).then(response => {
      return response.json()
    })
    console.log(data)
  }

  const button = document.querySelector('button')

  button.addEventListener('click', async () => {
    await getList()
  })

注意：盡量保證每次請求都是一個新的Request對象

Headers對象

在Request和Response對象內部锨侯，會將傳遞的請求頭對象，轉換為Headers

Headers對象中的方法：

has(key)：檢查請求頭中是否存在指定的key值
get(key)：得到請求頭中對應的值
set(key, value)：修改對應的鍵值對
append(key, value)：添加鍵值對
keys()：得到所有的請求頭鍵的數(shù)組
values()：得到所有的請求頭值的數(shù)組
entries()：得到所有請求頭中的鍵值對的數(shù)組