今天看到關於阿里前端面試的提問,看到有乙個兄弟說,阿里應該都用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...