fetch使用，ajax替代方案

liaorio 發(fā)布于2019-08-23 18:23 / 2462人閱讀

摘要：設(shè)置通過(guò)屬性或者方法都可以屬性形式傳一個(gè)多維數(shù)組或者對(duì)象字面量方法形式坑當(dāng)接收到一個(gè)代表錯(cuò)誤的狀態(tài)碼時(shí)，從返回的不會(huì)被標(biāo)記為，即使該響應(yīng)的狀態(tài)碼是或。

fetch簡(jiǎn)介

Fetch 提供了一個(gè) JavaScript接口，用于訪問(wèn)和操縱HTTP管道的部分，例如請(qǐng)求和響應(yīng)。它還提供了一個(gè)全局 fetch()方法，該方法提供了一種簡(jiǎn)單，合理的方式來(lái)跨網(wǎng)絡(luò)異步獲取資源。

這種功能以前是使用 XMLHttpRequest實(shí)現(xiàn)的，F(xiàn)etch提供了一個(gè)更好的替代方法

Fetch API 是基于 Promise 設(shè)計(jì)，使用了Promises 來(lái)處理結(jié)果/回調(diào)。舊瀏覽器不支持 Promise，需要使用 polyfill es6-promise 。

簡(jiǎn)單實(shí)現(xiàn)

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

async await實(shí)現(xiàn)更方便

    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對(duì)象
    }
    fetchRequest()

Response 對(duì)象

屬性：

status：整數(shù)(默認(rèn)值為200) 為response的狀態(tài)碼

statusText：字符串(默認(rèn)值為"OK"),該值與HTTP狀態(tài)碼消息對(duì)應(yīng).

ok：如上所示, 該屬性是來(lái)檢查response的狀態(tài)是否在200-299(包括200,299)這個(gè)范圍內(nèi).該屬性返回一個(gè)Boolean值.

方法：處理包含返回結(jié)果的promise對(duì)象的數(shù)據(jù)

例如  response.json()

處理包含json結(jié)果的promise對(duì)象

clone() - 創(chuàng)建一個(gè)新的 Response 克隆對(duì)象.

error() - 返回一個(gè)新的,與網(wǎng)絡(luò)錯(cuò)誤相關(guān)的 Response 對(duì)象.

redirect() - 重定向,使用新的 URL 創(chuàng)建新的 response 對(duì)象..

arrayBuffer() - Returns a promise that resolves with an + ArrayBuffer.

blob() - 返回一個(gè) promise, resolves 是一個(gè) Blob.

formData() - 返回一個(gè) promise, resolves 是一個(gè) FormData 對(duì)象.

json() - 返回一個(gè) promise, resolves 是一個(gè) JSON 對(duì)象.

text() - 返回一個(gè) promise, resolves 是一個(gè) USVString (text).

Request對(duì)象

創(chuàng)建request對(duì)象

    request = new Request()

屬性：

method：支持 GET, POST, PUT, DELETE, HEAD

url：請(qǐng)求的 URL

headers：對(duì)應(yīng)的 Headers 對(duì)象

referrer：請(qǐng)求的 referrer 信息

mode：可以設(shè)置 cors, no-cors, same-origin

credentials：設(shè)置 cookies 是否隨請(qǐng)求一起發(fā)送。可以設(shè)置: omit, same-origin

redirect：follow, error, manual

integrity：subresource 完整性值(integrity value)

cache：設(shè)置 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

創(chuàng)建header對(duì)象

    let headers = new Headers();

headers方法：

Headers.append()：給現(xiàn)有的header添加一個(gè)值, 或者添加一個(gè)未存在的header并賦值.

Headers.delete()：從Headers對(duì)象中刪除指定header.

Headers.entries()：以迭代器的形式返回Headers對(duì)象中所有的鍵值對(duì).

Headers.get()：以 ByteString 的形式從Headers對(duì)象中返回指定header的全部值.

Headers.has()：以布爾值的形式從Headers對(duì)象中返回是否存在指定的header.

Headers.keys()：以迭代器的形式返回Headers對(duì)象中所有存在的header名.

Headers.set()：替換現(xiàn)有的header的值, 或者添加一個(gè)未存在的header并賦值.

Headers.values()：以迭代器的形式返回Headers對(duì)象中所有存在的header的值.

Headers.getAll()：用于返回具有給定名稱的 Headers 對(duì)象中所有值的數(shù)組; 這個(gè)方法現(xiàn)在已經(jīng)從規(guī)范中刪除了，Headers.get() 方法現(xiàn)在返回所有的值而不是一個(gè)。

設(shè)置header通過(guò)屬性或者方法都可以

屬性形式：傳一個(gè)多維數(shù)組或者對(duì)象字面量

    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坑

當(dāng)接收到一個(gè)代表錯(cuò)誤的 HTTP 狀態(tài)碼時(shí)，從 fetch()返回的 Promise 不會(huì)被標(biāo)記為 reject，即使該 HTTP 響應(yīng)的狀態(tài)碼是 404 或 500。相反，它會(huì)將 Promise 狀態(tài)標(biāo)記為 resolve （但是會(huì)將 resolve 的返回值的 ok 屬性設(shè)置為 false ），僅當(dāng)網(wǎng)絡(luò)故障時(shí)或請(qǐng)求被阻止時(shí)，才會(huì)標(biāo)記為 reject。

Fetch 請(qǐng)求默認(rèn)是不帶 cookie 的，需要設(shè)置 fetch(url, {credentials: "include"})

不能中斷，沒(méi)有 abort、terminate、onTimeout 或 cancel 方法Fetch 和 Promise 一樣，一旦發(fā)起，不能中斷，也不會(huì)超時(shí)，只能等待被 resolve 或 reject。

云服務(wù)器 GPU云服務(wù)器 webrtc的替代方案堡壘機(jī) 替代解決方案 ajax使用方法 js ajax跨域解決方案

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/105139.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

liaorio

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

tensorflow鏡像

閱讀 1502·2023-04-25 15:40
遨游主機(jī)：16個(gè)機(jī)房，后臺(tái)自主換IP僅需10元，有韓國(guó)cn2/中國(guó)香港CN2/美國(guó)cn2/德國(guó)CN2

閱讀 2888·2021-08-11 11:15
重學(xué)前端學(xué)習(xí)筆記（十八）--JavaScript的閉包和執(zhí)行上下文

閱讀 2287·2019-08-26 13:48
javascript - RegExp類型 - String類型

閱讀 2861·2019-08-26 12:18
fetch使用，ajax替代方案

閱讀 2463·2019-08-23 18:23
你真的了解this指向嗎？

閱讀 2916·2019-08-23 17:01
JavaScript代碼整潔之道

閱讀 2990·2019-08-23 16:29
「前端面試題系列6」理解函數(shù)的柯里化

閱讀 1109·2019-08-23 15:15

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

fetch使用，ajax替代方案

相關(guān)文章

**Jquery ajax, Axios, Fetch區(qū)別之我見(jiàn)**

全面分析前端的網(wǎng)絡(luò)請(qǐng)求方式

**只知道ajax？你已經(jīng)out了**

**傳統(tǒng) Ajax 已死，Fetch 永生**

**JavaScript fetch接口**

發(fā)表評(píng)論

0條評(píng)論

liaorio

男|高級(jí)講師

TA的文章

tensorflow鏡像

遨游主機(jī)：16個(gè)機(jī)房，后臺(tái)自主換IP僅需10元，有韓國(guó)cn2/中國(guó)香港CN2/美國(guó)cn2/德國(guó)CN2

重學(xué)前端學(xué)習(xí)筆記（十八）--JavaScript的閉包和執(zhí)行上下文

javascript - RegExp類型 - String類型