目錄
1.前言
2.什么是Fetch
3.最簡單的應用
4.支持的請求參數
- 4.1. 參數詳講
- 4.2. 示例
5.請求錯誤與異常處理
1. 前言
網絡請求是開發APP中不可或缺的一部分，比如最基本的獲取用戶訂單數據/獲取商品數據/提交表單到服務器等等都離不開網絡請求，那么在RN中是如何進行網絡請求的呢？
2. 什么是Fetch
Fetch API提供了一個JS接口，用於進行網絡操作，例如請求和響應。它還提供了一個全局fetch方法，該方法提供了一種簡單，合理的方式來跨網絡異步獲取數據。
React Native 引入了Fetch，我們可以在RN中使用全局的fetch()方法進行網絡請求，並且不需要自己做額外的導入。
對於XMLHttpRequest，Fetch可以與之相媲美，並且比之提供了更加強大以及靈活的特性，下面將會一一闡述，熟悉XMLHttpRequest的朋友可以一邊學習下面的知識，一邊進行二者之間的關聯。
JS通過XMLHttpRequest(XHR)來執行異步請求，這個方式已經存在了很長一段時間了。雖然說它非常有用，但在一些場景，它並不是最好的解決方案。比如它在設計上不符合職責分離的原則，將輸入/輸出和用事件來追蹤狀態混雜在一個對象當中。而且，基於這種事件的模型，與es6中的Promise不太搭。
有一點需要注意的是，fetch與jQuery.ajax()主要存在以下兩種不同，請牢記：
- 當接收到一個代表錯誤的HTTP狀態碼時，從fetch()返回的Promise不會被標記為reject，即使該HTTP響應的狀態碼是404或者500。相反，它會將Promise狀態標記為resolve（但是會將resolve的返回值的ok設置為false），僅當網絡故障或者是請求被阻止時，才會標記為reject。
- 默認情況下，fetch不會從服務端發送或接收任何cookies，如果站點依賴於用戶session，則會導致未經認證的請求（如果要發送cookies，必須credentials選項）
3. 最簡單的應用
let url = `http://api.github.com/search/repositories?q=${this.searchKey}`;
fetch(url)
.then(response => response.text()) // 將response中的data轉成string
.then(responseText => {
console.log(responseText);
})
.catch(error => {
console.log(error);
})
這里我們通過網絡獲取一個JSON文件，並將其打印到控制台中。最簡單的用法就是只提供一個參數用來指明想fetch到的資源路徑，然后返回一個包含響應結果的promise。
當然它只是一個HTTP響應，而不是真的JSON或者String。為了獲取String的內容，我們還需要使用text()方法來將response中的data轉成String。
4. 支持的請求參數
Promise fetch(input, init);
4.1 參數
- input: 定義要獲取的資源，這可能是：
- 一個String字符串，包含要獲取資源的URL
- 一個Request對象
- init: 【可選】 一個配置項對象，包括所有對請求的設置。可選的參數如下：
- method: 請求使用的方法，如GET, POST, PUT, DELETE等
- headers: 請求的頭信息，形式為Headers的對象或包含ByteString值的對象字面量。
- body: 請求的body信息：可能是一個Blob、BufferSource、FormData、URLSearchParams或者String對象。注意GET或HEAD方法的請求不能包含body信息
- mode: 請求的模式，如cors、no-cors或者same-origin。
- credentials: 請求的credentials，如omit、same-origin或者include。為了在當前域名內自動發送cookie，必須提供這個選項，從chrome50開始，這個屬性也可以接受FederatedCredential實例或是一個PasswordCredential實例。
- cache: 請求的cacheMoshi :default、no-store、reload、no-cache、force-cache或者only-if-cached。
- redirect: 可用的redirect模式：follow（自動重定向），error（如果產生重定向將自動終止並且拋出一個錯誤）或者manual(手動處理重定向)，在chrome47之前的默認值是follow，從47后開始manual。
- referrer: 一個USVString可以是no-referrer、client或是一個URL、默認是client。
- referrerPolicy: 指定referrer HTTP header的值，可選值【no-referrer、no-referrer-when-downgrader\origin\origin-when-cross-origin、unsafe-url】。
- integrity: 包括請求的subresource integrity值.
4.2 示例
fetch(url, {
body: JSON.stringify(data), // 數據類型要和 ‘Content-Type’ header 保持一致
cache: 'no-cache', // default, no-cache, reload, force-cache, 或者 only-if-cached
credentials: 'same-origin', // emit，same-origin， include
headers: {
'user-agent': 'Mozilla/4.0 MDN Example',
'content-type': 'application/json'
},
'method': 'POST', // GET，POST， PUT，DELETE
'mode': 'cors', // no-cors， cors， same-origin
'redirect': 'follow', // manual, follow，error
'referrer': 'no-referrer', // client或no-referrer
})
.then(response => response.json()) // 將數據解析成json
5. 請求錯誤及異常處理
如果遇到網絡故障，fetch將會調用reject，帶上一個TypeError對象。
需要注意的是： 一次請求沒有調用reject並不代表請求就一定成功了，通常情況下我們需要在resolved的情況，在判斷Response.ok是否為true，如下：
let url = `http://api.github.com/search/repositories?q=${this.searchKey}`;
fetch(url)
.then(response => {
if (response.ok) {
return response.text();
}
throw new Error('Network response was not ok.');
})
.then(responseText => {
console.log(responseText);
})
.catch(error => {
console.log(error.toString());
})