fetch學習筆記

2021-07-23 16:23:08 字數 1697 閱讀 6314

在 js 中使用 fetch 更加高效地進行網路請求

在前端快速發展地過程中，為了契合更好的設計模式，產生了 fetch 框架，此文將簡要介紹下 fetch 的基本使用。

在 chrome 瀏覽器中已經全域性支援了 fetch 函式，開啟除錯工具，在 console 中可以進行初體驗。

先不考慮跨域請求的使用方法，我們先請求同域的資源，如在我的部落格頁面中，開啟 console 進行如下請求。

1


fetch("").then(function(response))
返回的資料：

這樣就很快速地完成了一次網路請求，我們發現返回的資料也比之前的 xmlhttprequest 豐富、易用的多。

雖然 fetch 還不是作為乙個穩定的標準發布，但是在其一直迭代更新的 標準描述 中，我們發現已經包含了很多的好東西。

fetch 支援了大部分常用的 http 的請求以及和 http 標準的相容，如 http method，http headers，request，response。

可以通過下面的語句處理瀏覽器相容的問題。

123


45
if(self.fetch)  else
使用 fetch 的建構函式請求資料後，返回乙個 promise 物件，處理即可。

123


4
fetch("")


.then(function(response))
我們可以將於 http headers 相容的格式加入到請求的頭中，如每次 api 的請求我們想不受快取的影響，那麼可以像下面這樣請求：

123


4567


8
fetch("", 


}) .then(function(response))
具體的可選引數可以檢視 這裡。

如我們還可以這樣使用：

123


4567


891011


1213


1415


16
var myheaders = new headers();


var myinit = ;


fetch("", myinit)


.then(function(response))
在請求後的 response 中，具體的定義在 這裡。

常用的有：

做如下請求：

123456


fetch("")


.then(function(response))
返回的資料：

因為在 request 和 response 中都包含 body 的實現，所以包含以下型別：

在 fetch 中實現了對應的方法，並返回的都是 promise 型別。

這樣處理返回的資料型別就會變的特別地方便，如處理 json 格式的資料：

123


4567


891011


var myrequest = new request('');


fetch(myrequest).then(function(response) 


});});
出處：

/2016/03/02/using_fetch_in_nodejs/

Fetch學習筆記。

fetch api提供了乙個獲取資源的介面 包括跨域 任何使用過xmlhttprequest的人都能輕鬆上手，但新的api提供了更強大和靈活的功能集。fetch提供了對request和response物件的通用定義。使之今後可以被使用到更多地應用場景中 無論是service workers cach...

fetch學習總結

自我學習記錄 一直會更新?未完待續。先來回答乙個問題 除了ajax獲取後台資料之外，還有沒有其他的替代方案？答 fetch 複製 fetch input,init 這個方法接受兩個引數 複製 引數 說明input 定義要獲取的資源。包含要獲取資源的 url init 這個引數是可選的，它傳入乙個配置...

學習記錄 Fetch

2.2 delete 2.3 post 2.4 put 3.fetchapi 中響應格式 4.關注分離的設計思想 fetch api 基本用法 fetch url then 第乙個引數請求的路徑 fetch會返回promise 所以我們可以使用then 拿到請求成功的結果 刪除id是789的資料 b...