Fetch超時設定和終止請求

2022-03-09 11:07:53 字數 1578 閱讀 8420

fetch 是乙個新的端獲取資源的介面,用於替換笨重繁瑣xmlhttprequest.它有了request 和 response 以及headers物件的概念,與後端語言請求資源更接近。

在使用xmlhttprequest可以設定請求超時時間,可是轉用fetch後,超時時間設定不見了,在網路不可靠的情況下,超時設定往往很有用

es6以後promise 出現解決地獄**等不優雅的**風格。個人理解這個更像是乙個生產者和消費者的關係,檢視 promise文件,有以下兩個方法

promise.race([promise1,promise2]) 傳入多個promise物件,等待最快物件完成

promise.all([promise1,promise2]) 傳入多個promise 物件,等待所有物件完成

有了以上知識後,結合函式settimeout就可以實現超時設定

let timeoutpromise = (timeout) => , timeout);

});}let requestpromise = (url) => ;

promise.race([timeoutpromise(1000), requestpromise("")])

.then(resp => )

.catch(error => );

將上邊的**拷貝的瀏覽器控制台並將network設定為slow3g。執行就會發現,雖然我們在控制台看到了超時資訊,但切換到netwok頁籤中發現請求依然正常進行中,並返回了正確的內容。這並不是我想要的結果,我希望超時時間到了,請求也應該終止。

fetch請求成功後,預設返回乙個response物件,那麼我們如何在**中構造乙個這樣的物件呢?

timeoutresp=new response("timeout", )

successresp=new response("ok", )

abortcontroller 用於手動終止乙個或多個dom請求,通過該物件的abortsignal注入的fetch的請求中。所以需要完美實現timeout功能加上這個就對了

let controller = new abortcontroller();

let signal = controller.signal;

let timeoutpromise = (timeout) => ));

controller.abort();

}, timeout);

});}let requestpromise = (url) => );

};promise.race([timeoutpromise(1000), requestpromise("")])

.then(resp => )

.catch(error => );

第一次在專案中使用fetch,在面向api程式設計的過程中,發現fetch沒有超時的設定。第一時間檢視了mdn文件以及向搜尋引擎找尋實現功能的靈感(copy+c)。有些朋友在settimeout中通過 reject(new error('網路超時'))實現。其實這樣只是讓前端感知當前請求超時了,並沒有真正終止本次請求。所以必須借助abortsignal訊號物件。此功能目前還處於試驗階段,使用需謹慎。

!(

IIS 請求 超時設定

asp.net 預設的 session state 模式是 in proc 程序內 資料是在 的應用程式池裡面儲存的。這樣在 web.config 設定的超時時間,是在應用程式池沒有發生 的基礎上才是有效的。這樣就出現了問題,為什麼應用程式池會發生 如何禁止應用程式池的 讓 session 的資料可...

http超時請求設定

http請求時候總是設定的兩個引數connectiontimeout和sockettimeout 在http請求時候總是設定兩個引數,就是連線超時和socket超時 解析 一次http請求,必定會有三個階段,一 建立連線 二 資料傳送 三,斷開連線。當建立連線在規定的時間內 connectionti...

anxios和fetch資料請求

proto object注意 anxios返回的是promise物件 案例如下 這裡引用了bootstrap html檔案如下 class container class row axios get button div div div 格式如下 axios.get url then res con...