fetch與ajax（XMLHttpRequest）相比

diabloneo 發(fā)布于2019-08-22 15:39 / 2532人閱讀

摘要：前言中新增了一種數(shù)據(jù)請求的方式，就是，它和有許多相似的功能，但是相比被設(shè)計成更具可擴(kuò)展性和高效性。該模式支持跨域請求，顧名思義它是以的形式跨域當(dāng)然該模式也可以同域請求不需要后端額外的支持其對應(yīng)的為。

前言 ES6中新增了一種HTTP數(shù)據(jù)請求的方式，就是fetch，它和XMLHttpRequest有許多相似的功能，但是相比XMLHttpRequest,fetch被設(shè)計成更具可擴(kuò)展性和高效性。江湖上一直流傳著 “傳統(tǒng)ajax已死，fetch永生”的說法，下面詳細(xì)說下二者詳情 1.XMLHttpRequest 請求數(shù)據(jù)

var xhr = new XMLHttpRequest();
xhr.open("GET", url);
xhr.responseType = "json";

xhr.onload = function() {
  console.log(xhr.response);
};

xhr.onerror = function() {
  console.log("Oops, error");
};

xhr.send();

2. fetch請求數(shù)據(jù)

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

兩段代碼相比之下，fetch更為簡潔，而且fetch請求屬于promise結(jié)構(gòu)，直接.then()方法處理回調(diào)數(shù)據(jù)，當(dāng)出錯時，會執(zhí)行catch方法,而且promise避免了回調(diào)金字塔的問題。

3.fetch瀏覽器支持情況

目前谷歌瀏覽器對fetch的支持良好，具體支持情況如下圖

當(dāng)然，你也可以去這里查看can i use

4.fetch請求的四種方式 get請求

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

如果需要傳遞參數(shù)，需要拼接在url。
后面這里的調(diào)用的第一個then函數(shù)里面，返回結(jié)果是一個可讀流形式

如果請求的是json數(shù)據(jù)，需要調(diào)用response.json()(這里的response是傳遞的參數(shù))將可讀流解析為json數(shù)據(jù)，在下一個then方法中，就可以得到想要的json數(shù)據(jù)了

同理，如果請求的txt文本數(shù)據(jù)，則需要調(diào)用response.text()來解析...更多調(diào)用的解析方法如下

response.arrayBuffer()
讀取 Response對象并且將它設(shè)置為已讀（因?yàn)镽esponses對象被設(shè)置為了 stream 的方式，所以它們只能被讀取一次） ,并返回一個被解析為ArrayBuffer格式的promise對象

response.blob()
讀取 Response對象并且將它設(shè)置為已讀（因?yàn)镽esponses對象被設(shè)置為了 stream 的方式，所以它們只能被讀取一次） ,并返回一個被解析為Blob格式的promise對象

response.formData()
讀取Response對象并且將它設(shè)置為已讀（因?yàn)镽esponses對象被設(shè)置為了 stream 的方式，所以它們只能被讀取一次） ,并返回一個被解析為FormData格式的promise對象

response.json()
讀取 Response對象并且將它設(shè)置為已讀（因?yàn)镽esponses對象被設(shè)置為了 stream 的方式，所以它們只能被讀取一次） ,并返回一個被解析為JSON格式的promise對象

response.text()
讀取 Response對象并且將它設(shè)置為已讀（因?yàn)镽esponses對象被設(shè)置為了 stream 的方式，所以它們只能被讀取一次） ,并返回一個被解析為USVString格式的promise對象

對于catch方法，只有報程序出錯的時候才會執(zhí)行。

post請求

 fetch(url,{
            method:"POST",
            headers:{
                "Content-type":"application/json"http:// 設(shè)置請求頭數(shù)據(jù)類型
            },
            body:data
        })
        .then(res=>res.json())
        .then(data=>console.log(data))

method：設(shè)置設(shè)置請求的方式，默認(rèn)是get，另外還有PUT、DELETE
headers：設(shè)置請求頭信息，當(dāng)然，這里面還可以設(shè)置別的信息，比如：

var u = new URLSearchParams();
u.append("method", "flickr.interestingness.getList");
u.append("api_key", "");
u.append("format", "json");
u.append("nojsoncallback", "1");

fetch(url,{
            method:"POST",
            headers:u,
            body:data
        })
        .then(res=>res.json())
        .then(data=>console.log(data))

另外，fetch可以在header中設(shè)置CORS跨域

    u.append("Access-Control-Allow-Origin", "*");  
    u.append("Access-Control-Allow-Headers", "X-Requested-With");  
    u.append("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");  
    u.append("X-Powered-By"," 3.2.1")

如果服務(wù)器不支持CORS，fetch提供了三種模式，其中no-cors可以繼續(xù)訪問服務(wù)器

fetch的mode配置項有3個值，如下：

same-origin：該模式是不允許跨域的，它需要遵守同源策略，否則瀏覽器會返回一個error告知不能跨域；其對應(yīng)的response type為basic。

cors: 該模式支持跨域請求，顧名思義它是以CORS的形式跨域；當(dāng)然該模式也可以同域請求不需要后端額外的CORS支持；其對應(yīng)的response type為cors。

no-cors: 該模式用于跨域請求但是服務(wù)器不帶CORS響應(yīng)頭，也就是服務(wù)端不支持CORS；這也是fetch的特殊跨域請求方式；其對應(yīng)的response type為opaque。

針對跨域請求，cors模式是常見跨域請求實(shí)現(xiàn)，但是fetch自帶的no-cors跨域請求模式則較為陌生，該模式有一個比較明顯的特點(diǎn)：

該模式允許瀏覽器發(fā)送本次跨域請求，但是不能訪問響應(yīng)返回的內(nèi)容，這也是其response type為opaque透明的原因，如下圖：

呃，感覺這樣雖然解決能跨域問題，但是請求不到任何數(shù)據(jù)，還是沒有卵用...

注意： cors 支持三種content-type 不支持 application/json

application/x-www-form-urlencoded

multipart/form-data

text/plain

body：需要傳遞的參數(shù)

fetch請求默認(rèn)是不會攜帶cookie信息，如果想要攜帶，需要在手動設(shè)置

fetch(url, {
              method: "POST",
              headers:{
                "Content-type":"application/json"http:// 設(shè)置請求頭數(shù)據(jù)類型
                },
              credentials: "include" 
            })

credentials: "include" 設(shè)置請求頭攜帶cookie信息

put請求

 fetch(url,{
            method:"PUT",
            headers:{
                "Content-type":"application/json"http:// 設(shè)置請求頭數(shù)據(jù)類型
            },
            body:data
        })
        .then(res=>res.json())
        .then(data=>console.log(data))

delete請求

 fetch(url,{
            method:"DELETE",
            headers:{
                "Content-type":"application/json"http:// 設(shè)置請求頭數(shù)據(jù)類型
            },
            body:data
        })
        .then(res=>res.json())
        .then(data=>console.log(data))

其實(shí)，post,put,delete,這三個請求代碼上差不多，只是method中對應(yīng)不同的請求方法不同而已。

如下是自己封裝的fetch的API代碼 HTML頁面




  
  
  
  Document

app.js

const url = "http://jsonplaceholder.typicode.com/users";

let easyHttp = new EasyHttp;

// 請求數(shù)據(jù)
easyHttp.get(url)
        .then(res=>console.log(res))
        .catch(err=>console.log(err))


// 發(fā)送數(shù)據(jù)
const data = {
    name:"Henry",
    username:"露絲",
    email:"lusi@qq.com"
  };
// easyHttp.post(url,data)
//         .then(res=>console.log(res))
//         .catch(err=>console.log(err))


// 修改數(shù)據(jù)
// easyHttp.put(url+"/10",data)
//         .then(res=>console.log(res))
//         .catch(err=>console.log(err))

easyHttp.delete(url+"/2",data)
        .then(res=>console.log(res))
        .catch(err=>console.log(err))

easyhttp.js

/**
 * fetch 增刪改查 的API封裝
 */

 class EasyHttp{
    //  get 請求
    get(url){
        return new Promise((resolve,reject)=>{
            fetch(url)
                .then(res=>res.json())
                .then(data=>resolve(data))
                .catch(err=>reject(err))
        })
    }

    // post 請求

    post(url,data){
        return new Promise((resolve,reject)=>{
            fetch(url,{
                method:"POST",
                headers:{
                    "Content-type":"application/json"http:// 設(shè)置請求頭數(shù)據(jù)類型
                },
                body:data
            })
            .then(res=>res.json())
            .then(data=>resolve(data))
            .then(err=>reject(err))
        })
    }


    // put 請求修改數(shù)據(jù)
    put(url,data){
        return new Promise((resolve,reject)=>{
            fetch(url,{
                method:"PUT",
                headers:{
                    "Content-type":"application/json"http:// 設(shè)置請求頭數(shù)據(jù)類型
                },
                body:data
            })
            .then(res=>res.json())
            .then(data=>resolve(data))
            .then(err=>reject(err))
        })
    }

      // delete 刪除數(shù)據(jù)
      delete(url,data){
        return new Promise((resolve,reject)=>{
            fetch(url,{
                method:"DELETE",
                headers:{
                    "Content-type":"application/json"http:// 設(shè)置請求頭數(shù)據(jù)類型
                },
                body:data
            })
            .then(res=>res.json())
            .then(data=>"刪除數(shù)據(jù)成功。。。")
            .then(err=>reject(err))
        })
    }

 }

源碼地址：戳一下

最后總結(jié)

fetch和XMLHttpRequest相比，主要有以下優(yōu)點(diǎn):

語法簡潔，更加語義化

基于標(biāo)準(zhǔn) Promise 實(shí)現(xiàn)，支持 async/await

同構(gòu)方便，使用 isomorphic-fetch

參考文章 MDN Fetch API ECMAScript 6 入門 Fetch相比Ajax有什么優(yōu)勢？ 【fetch跨域請求】cors

GPU云服務(wù)器云服務(wù)器阿里云服務(wù)器與虛擬服務(wù)器相比 ajax與后臺交互 ajax的同步與異步 ajax與服務(wù)器

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

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

發(fā)表評論

登陸后可評論

0條評論

diabloneo

男|高級講師

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

TA的文章

常州商標(biāo)注冊局在哪里

閱讀 2012·2021-11-15 18:09
阿里云優(yōu)惠券在哪領(lǐng)??？如何使用阿里云優(yōu)惠券？

閱讀 905·2021-09-06 15:13
Hostodo：$12/年KVM-256MB/15GB/500GB/斯波坎(華盛頓州)

閱讀 2645·2021-08-23 09:43
JS基礎(chǔ)入門篇（三十六）—面向?qū)ο螅?三）

閱讀 2027·2019-08-30 15:54
jQuery 全選和反選demo

閱讀 2221·2019-08-30 13:56
javascript 總結(jié)（常用工具類的封裝）

閱讀 2487·2019-08-26 11:31
網(wǎng)站建設(shè)重要性不言而喻-甲由科技

閱讀 3083·2019-08-26 10:56
js的鍵盤事件--keyboard

閱讀 708·2019-08-26 10:28

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

資訊專欄INFORMATION COLUMN

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

fetch與ajax（XMLHttpRequest）相比

相關(guān)文章

fetch 如何請求數(shù)據(jù)

fetch 如何請求數(shù)據(jù)

fetch 如何請求數(shù)據(jù)

Ajax知識體系大梳理

ajax請求相關(guān)

發(fā)表評論

0條評論

diabloneo

男|高級講師

TA的文章

常州商標(biāo)注冊局在哪里

阿里云優(yōu)惠券在哪領(lǐng)??？如何使用阿里云優(yōu)惠券？

Hostodo：$12/年KVM-256MB/15GB/500GB/斯波坎(華盛頓州)

JS基礎(chǔ)入門篇（三十六）—面向?qū)ο螅?三）

jQuery 全選和反選demo

javascript 總結(jié)（常用工具類的封裝）

網(wǎng)站建設(shè)重要性不言而喻-甲由科技

js的鍵盤事件--keyboard

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

fetch與ajax（XMLHttpRequest）相比

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

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