fetch使用，ajax替代方案

fetch簡介

Fetch 提供了一個 JavaScript接口，用於訪問和操縱HTTP管道的部分，例如請求和響應。它還提供了一個全局 fetch()方法，該方法提供了一種簡單，合理的方式來跨網絡異步獲取資源。

這種功能之前是使用 XMLHttpRequest實現的，Fetch提供了一個更好的替代方法

Fetch API 是基於 Promise 設計，使用了Promises 來處理結果/回調。舊瀏覽器不支持 Promise，須要使用 polyfill es6-promise 。

簡單實現

fetch("http://192.168.43.169:8099/someInfo",{
        method: 'post',
    })
    .then(res=>{
        console.log(response)     // 包含響應結果的promise，只是一個 HTTP 響應，而不是真的JSON
        return response.json();          
    })
    .then(res=>{
       console.log(res)     //js格式的json對象
    })

async await實現更方便

const fetchRequest = async () => {
        let response = await fetch("http://192.168.43.169:8099/teacher/resume", {
            method: 'post',
        })
        let data = await response.json()
        console.log(data);    //js格式的json對象
    }
    fetchRequest()

Response 對象

屬性：

• status：整數(默認值爲200) 爲response的狀態碼
• statusText： 字符串(默認值爲"OK"),該值與HTTP狀態碼消息對應.
• ok：如上所示, 該屬性是來檢查response的狀態是否在200-299(包括200,299)這個範圍內.該屬性返回一個Boolean值.

方法：處理包含返回結果的promise對象的數據

例如  response.json()

處理包含json結果的promise對象

• clone() - 建立一個新的 Response 克隆對象.
• error() - 返回一個新的,與網絡錯誤相關的 Response 對象.
• redirect() - 重定向,使用新的 URL 建立新的 response 對象..
• arrayBuffer() - Returns a promise that resolves with an + ArrayBuffer.
• blob() - 返回一個 promise, resolves 是一個 Blob.
• formData() - 返回一個 promise, resolves 是一個 FormData 對象.
• json() - 返回一個 promise, resolves 是一個 JSON 對象.
• text() - 返回一個 promise, resolves 是一個 USVString (text).

Request對象

建立request對象

request = new Request()

屬性：

• method：支持 GET, POST, PUT, DELETE, HEAD
• url：請求的 URL
• headers： 對應的 Headers 對象
• referrer：請求的 referrer 信息
• mode：能夠設置 cors, no-cors, same-origin
• credentials：設置 cookies 是否隨請求一塊兒發送。能夠設置: omit, same-origin
• redirect：follow, error, manual
• integrity：subresource 完整性值(integrity value)
• cache：設置 cache 模式 (default, reload, no-cache)

let request = new Request("http://192.168.43.169:8099/teacher/resume",{
        method: 'post',
        headers: new Headers({
            'Content-Type': 'text/plain'
        })
    })
    
    fetch(request)
    .then(res=>{
        console.log(res);
        return res.json();
    })
    .then(res=>{
       console.log(res)
    })

header

建立header對象

let headers = new Headers();

headers方法：

• Headers.append()：給現有的header添加一個值, 或者添加一個未存在的header並賦值.
• Headers.delete()：從Headers對象中刪除指定header.
• Headers.entries()：以 迭代器 的形式返回Headers對象中全部的鍵值對.
• Headers.get()：以 ByteString 的形式從Headers對象中返回指定header的所有值.
• Headers.has()：以布爾值的形式從Headers對象中返回是否存在指定的header.
• Headers.keys()：以迭代器的形式返回Headers對象中全部存在的header名.
• Headers.set()：替換現有的header的值, 或者添加一個未存在的header並賦值.
• Headers.values()：以迭代器的形式返回Headers對象中全部存在的header的值.
• Headers.getAll()：用於返回具備給定名稱的 Headers 對象中全部值的數組; 這個方法如今已經從規範中刪除了，Headers.get() 方法如今返回全部的值而不是一個。

設置header經過屬性或者方法均可以

屬性形式：傳一個多維數組或者對象字面量

Header = new Headers({
      "Content-Type": "text/plain",
      "Content-Length": content.length.toString(),
      "X-Custom-Header": "ProcessThisImmediately",
    });

方法形式：

var Header = new Headers();
    Header.append("Content-Type", "text/plain");
    Header.append("Content-Length", content.length.toString());
    Header.append("X-Custom-Header", "ProcessThisImmediately");

fetch坑

• 當接收到一個表明錯誤的 HTTP 狀態碼時，從 fetch()返回的 Promise 不會被標記爲 reject， 即便該 HTTP 響應的狀態碼是 404 或 500。相反，它會將 Promise 狀態標記爲 resolve （可是會將 resolve 的返回值的 ok 屬性設置爲 false ），僅當網絡故障時或請求被阻止時，纔會標記爲 reject。
• Fetch 請求默認是不帶 cookie 的，須要設置 fetch(url, {credentials: 'include'})
• 不能中斷，沒有 abort、terminate、onTimeout 或 cancel 方法Fetch 和 Promise 同樣，一旦發起，不能中斷，也不會超時，只能等待被 resolve 或 reject。