Fetch

網路請求

RN官方 RN中文網

React Native可以使用多種方式來進行網路請求（fetch、XMLHttpRequest等等） fetch API是基於 Promise 設計的，因此了解Promise也是有必要的，推薦閱讀 MDN Promise fetch返回的是Promise對象

請求的對象中包含以下屬性 （上面三個為常用參數）

• method: 網路請求的方式（GET, POST等）。fetch默認的method為GET。

• headers: 網路請求的header，裡面包含（Accept, Content-Type, token等）

• body: POST請求的body。要送去server的資料

• mode: 跨域設置（cors, no-cors, same-origin）

• cache: 緩存選項（default, no-store, reload, no-cache, force-cache, only-if-cached）

response對象有提供了些方法

• clone(): 複製一份response

• error(): 返回一個與網路相關的錯誤

• redirect(): 返回一個可以重定向到某URL的response

• response對象的解析方式

  • json(): 返回（return）一個Json對象（格式）的Promise

  • text(): 返回一個文字的Promise

  • formData(): 返回一個FormData的Promise

  • arrayBuffer(): 返回一個arrayBuffer的Promise

  • blob(): 返回一個blob的Promise

GET請求

fetch(url, { 
        method: 'GET’, 
        headers: { 
            'Accept': 'application/json’, 
            'Content-Type': 'application/json', }
     }) 
    .then((response) => response.json()) // json方式解析，如果是text就是response.text()                         
    .then((responseData) => { // 處理獲取到的資料 }) 
    .catch((error) => { // 錯誤處理 })
    .done()

作者：光强_上海
链接：https://www.jianshu.com/p/df4f13ba486b
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处

fetch方法會返回一個Promise對象，這個對象內包含了response，也就是第一個 then內的response 第一個then收到response後，透過 .json() 將response轉換成json對象的Promise並返回，也就是第二個 then 內的responseData 用 .catch 捕捉網路請求的錯誤情況

除了上面的寫法，還可以使用Request 先創建Request對象並設置後交給fetch處理，如下

let request = new Request(url, {
                    method: 'GET',
                    headers: ({
                        'Content-Type': 'application/json'
                     })
                });
fetch(request).then((response) => {
        console.log(response);
    }).catch((err) => {
        console.error(err);
    });

ps. get url 可用 https://facebook.github.io/react-native/movies.json 來測試

POST請求

fetch(url, { 
        method: "POST”, 
        headers: { 
            'Accept': 'application/json’, 
            'Content-Type': 'application/json’}, 
        body: JSON.stringify({key1: value1, key2: value2}) }) 
    .then((response) => { // 資料的解析方式 }) 
    .then((responseData) => { // 處理獲取到的資料 }) 
    .catch((error) => { // 處理錯誤 }) 
    .done()


作者：光强_上海
链接：https://www.jianshu.com/p/df4f13ba486b
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

在解析response時，也可以使用ES2017的 async/await

async function getMoviesFromApi() {
  try {
    let response = await fetch(
      'https://facebook.github.io/react-native/movies.json'
    );
    let responseJson = await response.json();
    return responseJson.movies;
  } catch (error) {
    console.error(error);
  }
}

ps.此例為RN官網內的例子，並且可以到官網去實際執行看看

maybe you want to know

1.網路方面（圖片路徑為網址、連線等） for ios http問題。 由於apple應用安全的管控，但下面的方法會將apple提供的安全保障關閉 用Xcode 打開/ios/ProjectName.xocdeproj 後點選 Info.plist 內的App Transport Security Settings(Key) => Exception Domains 案＋ => 選擇Allow Arbitrary Loads 並且改為 Yes(Value) 2.Android App連線至某些網站或打某些api(url)，會收不到response或是空白，請參考 Missing intermediate certificate authority，確認下server端

參考

• 刘望舒的博客 - React Native探索（五）使用fetch进行网络请求

• 光強 簡書 - React Native封裝fetch網路請求組件