fetch使用，ajax替代方案

liaorio 發布于2019-08-23 18:23 / 2447人閱讀

摘要：設置通過屬性或者方法都可以屬性形式傳一個多維數組或者對象字面量方法形式坑當接收到一個代表錯誤的狀態碼時，從返回的不會被標記為，即使該響應的狀態碼是或。

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。

云服務器 GPU云服務器 webrtc的替代方案堡壘機替代解決方案 ajax使用方法 js ajax跨域解決方案

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/105139.html

Jquery ajax, Axios, Fetch區別之我見

摘要：我們都知道因為同源策略的問題，瀏覽器的請求是可能隨便跨域的一定要有跨域頭或者借助，但是，中可以設置為不跨域，如下所示這樣之后我們會得到一個為的返回。免費幫忙內推阿里等各大IT公司的崗位，有興趣可以帶簡歷加微信angeltune 引言前端技術真是一個發展飛快的領域，我三年前入職的時候只有原生XHR和Jquery ajax，我們還曾被JQuery 1.9版本版本以下不支持大文件請求這個...

YanceyOfficial 2019-08-22 13:49 評論0 收藏0
全面分析前端的網絡請求方式

摘要：請求默認會攜帶同源請求的，而跨域請求則不會攜帶，設置的的屬性為將允許攜帶跨域。類型請求成功后的回調函數。另外，同樣提供了在環境下的支持，可謂是網絡請求的首選方案。當網絡故障時或請求被阻止時，才會標記為，如跨域不存在，網絡異常等會觸發。一、前端進行網絡請求的關注點大多數情況下，在前端發起一個網絡請求我們只需關注下面幾點：傳入基本參數（url，請求方式）請求參數、請求參數類型設...

Edison 2019-08-23 16:27 評論0 收藏0
只知道ajax？你已經out了

摘要：所以本文將介紹兩個目前常用的獲取服務器數據的庫和。隨著作者尤雨溪發布消息，不再繼續維護并推薦大家使用開始，進入了很多人的目光。脫離了，是基于設計。如果要詳細了解的應用，推薦閱讀教程和規范。歡迎大家前往騰訊云+社區，獲取更多騰訊海量技術實踐干貨哦~ 本文由前端林子發表于云+社區專欄隨著前端技術的發展，請求服務器數據的方法早已不局限于ajax、jQuery的ajax方法。各種js庫已如雨后...

Steven 2019-04-23 13:10 評論0 收藏0
傳統 Ajax 已死，Fetch 永生

摘要：結果證明，對于以上瀏覽器，在生產環境使用是可行的。后面可以跟對象，表示等待才會繼續向下執行，如果被或拋出異常則會被外面的捕獲。，，都是現在和未來解決異步的標準做法，可以完美搭配使用。這也是使用標準一大好處。只允許外部傳入成功或失敗后的回調。 showImg(https://cloud.githubusercontent.com/assets/948896/10188666/bc9a53...

fai1017 2019-08-21 10:41 評論0 收藏0
JavaScript fetch接口

摘要：的案例下面我們來寫第一個獲取后端數據的例子通過獲取百度的錯誤提示頁面返回一個對象是一個對象是最終的結果請求請求初步完成了，這個時候就要來認識一下請求如何處理了。 JavaScript fetch接口如果看網上的fetch教程，會首先對比XMLHttpRequest和fetch的優劣，然后引出一堆看了很快會忘記的內容(本人記性不好)。因此，我寫一篇關于fetch的文章，為了自己看著方便...

Sanchi 2019-08-29 16:33 評論0 收藏0