緊跟時尚,Fetch實踐那些事

2021-09-16 21:14:18 字數 1519 閱讀 6814

今天看到關於阿里前端面試的提問,看到有乙個兄弟說,阿里應該都用fecth了,怎麼還在考ajax的底層實現,雖然以前讀ajax已死,fetch永生文章時有了解這個知識,但閒著也是閒著,還是探索一下,才知道他好在那。

老規矩,看官方正式一點的文章,我還是推薦mdn的,讀完個人理解,對比ajax,fetch的優勢就是:

語義化強,呼叫如ajax第三方庫一樣簡潔;

支援promise;

來看乙個簡單的呼叫:

});如果你用過ajax第三方庫,如jquery,vue-resource,axios這些,你會發現,fetch呼叫方法和這些庫相似性非常之大,再看option的那些可設定屬性:

method: get/post...

headers: 和其他header設定一樣,主要設定content-type和自定義header;

body: 要傳遞的資料

mode: cors / no-cors / same-origin,預設為 no-cors

credentials: omit / same-origin / include

cache: default / no-store / reload / no-cache / force-cache / only-if-cached

redirect: follow / error / manual

referrer: no-referrer / client /

referrerpolicy: no-referrer / no-referrer-when-downgrade / origin / origin-when-cross-origin / unsafe-url

integrity:

用fetch遇到的新鮮事:

不管是404,還是500這些錯誤,請求仍然有response響應,所以才有response.ok狀態值的判斷;

function fetchinitoption(json)

return ,

body:res.join('&')

};this指向變化(這個不算fetch的坑,這是程式設計應注意的問題),因為我用了vue,例項中的this預設指向當前vue例項,但是當呼叫fetch這個方法在promise的響應的匿名函式裡,this指向了window物件,所以這裡需要提前用乙個變數that來保持例項this的引用;

請求前的攔截,就是在請求前想在header中加入自定義請求頭,如token,不過好像解決思路一樣,也可以在initoption時手動設定;

雖路無盡頭,但步伐堅定(早上一杯雞湯,美好的週末即將開始)

緊跟時尚潮流,開啟智慧型零售

夠範gofun全渠道新零售實踐之路 夠範gofun,廣州夠範文化傳播 國內新興的時尚潮流品牌,力圖滿足中國潮流趨勢和年輕受眾的需求,積極開拓符合中國年輕生態群體喜愛的品牌和商品的潮流購物集vfmhsn合平台。其在潮玩商店裡的潮服 潮鞋 潮物,讓夠範gofun在彰顯品牌個性的同時,也積聚了一大批年輕粉...

fetch學習筆記

在 js 中使用 fetch 更加高效地進行網路請求 在前端快速發展地過程中,為了契合更好的設計模式,產生了 fetch 框架,此文將簡要介紹下 fetch 的基本使用。在 chrome 瀏覽器中已經全域性支援了 fetch 函式,開啟除錯工具,在 console 中可以進行初體驗。先不考慮跨域請求...

Fetch封裝方法

fetch是乙個與ajax請求功能相似的乙個請求介面,並且只有瀏覽器該方法。fetch的出現一方面是為了緩解原生xmlhttprequest實現起來比較雜亂的問題。下面是乙個例子 用xhr物件實現ajax請求 xhr.send 用fetch實現ajax請求 fetch url,then res th...