React Native之fetch的使用

2021-07-10 20:50:00 字數 1797 閱讀 4703

來自:

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

在 ajax 時代,進行請求 api 等網路請求都是通過 xmlhttprequest 或者封裝後的框架進行網路請求。

在 chrome 瀏覽器中已經全域性支援了 fetch 函式,開啟除錯工具,在 console 中可以進行初體驗。先不考慮跨域請求的使用方法,我們先請求同域的資源,如在我的部落格頁面中,開啟 console 進行如下請求。

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

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

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

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

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

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

fetch("")

.then(function(response))

我們可以將於 http headers 相容的格式加入到請求的頭中,如每次 api 的請求我們想不受快取的影響,那麼可以像下面這樣請求:

fetch("", 

})

.then(function(response))

具體的可選引數可以檢視 這裡 。

如我們還可以這樣使用:

var myheaders = new headers();

var myinit = ;

fetch("", myinit)

.then(function(response))

在請求後的 response 中,具體的定義在 這裡 。

常用的有:

做如下請求:

fetch("")

.then(function(response))

返回的資料:

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

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

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

這裡是乙個格式更好的文件,比標準描述的頁面更加清晰,供參考。

– eof –

React Native 之布局篇

一.flex布局 什麼是flex布局?布局的傳統解決方案,是基於盒子模型,依賴display屬性 position屬性 float屬性,這種布局方式對於特殊布局非常不方便,比如,垂直居中就不好實現.2009年,w3c提出的flex布局,即彈性布局,用來為盒子模型提供最大的靈活性,任何乙個容器都可以指...

ReactNative動畫之Animated初識篇

animated提供了兩種型別的值 1.animated.value 用於單個值 2.animated.valuexy 用於向量值 animated.value可以繫結到樣式或是其他屬性上,也可以進行插值運算。單個animated.value可以用在任意多個屬性上.目前animated提供的動畫元件...

react native之熱更新

native 發生了變動 資源或者是js發生變動 好的,以上都是理論原理內容,由於專案期只有2個人在做rn前端方面的開發,所以沒有足夠的時間去開發公司內部的熱更新。所以使用了第三方的元件react native pushy 註冊乙個pushy賬號 pushy 配置bundle url ios 在工程...