fetch 不是xhr fetch請求踩坑

2021-10-16 16:38:30 字數 679 閱讀 7139

1.jquery ajax

$.ajax(,

error: function () {}

優缺點:

本身是針對mvc的程式設計,不符合現在前端mvvm的浪潮

基於原生的xhr開發,xhr本身的架構不清晰,已經有了fetch的替代方案

jquery整個專案太大,單純使用ajax卻要引入整個jquery非常的不合理(採取個性化打包的方案又不能享受cdn服務)

2.axios

axios(

.then(function (response) catch(e) {

console.log("oops, error", e);

優缺點:

優點:符合關注分離,沒有將輸入、輸出和用事件來跟蹤的狀態混雜在乙個物件裡

更好更方便的寫法

更加底層,提供的api豐富(request, response)

脫離了xhr,是es規範裡新的實現方式

缺點:fetch只對網路請求報錯,對400,500都當做成功的請求,需要封裝去處理

fetch預設不會帶cookie,需要新增配置項

fetch不支援abort,不支援超時控制,使用settimeout及promise.reject的實現的超時控制並不能阻止請求過程繼續在後台執行,造成了量的浪費

fetch沒有辦法原生監測請求的進度,而xhr可以

fetch學習筆記

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

Fetch封裝方法

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

fetch使用詳解

fetch引數 乙個必選的資源路徑和乙個可選的引數init。無論請求是否成功都返回乙個promise fetch與 ajax 的不同 當接收到類似404或500這類表示錯誤的狀態碼時,fetch返回的promise物件的狀態仍然為resolve resolve的返回值 ok 屬性設定為false 僅...