API請求的方式有很多種，例如Fetch API、XMLHttpRequest以及基於它們封裝的框架，fetch可以說是替代XMLHttpRequest的產物。這一篇將介紹Fetch API的基本用法。

1.使用Fetch API進行GET和POST請求

首先fetch這個詞本身就是獲取的意思，所以如果是要獲取任何強制的內容，只需要把網址作為參數傳遞給fetch方法即可。

fetch('https://reactnative.cn/');

因為Fetch的參數不止一個所以要表明使用哪個參數時，可以在下一行寫method來定義請求的方法

fetch('https://reactnative.cn/', {
  method:'GET'.
  headers:{
     Accept: 'application/json',
    'Content-Type': 'application/json'
    },
)

2.處理API響應

以上的例子說明了如何發起請求。很多情況下，我們還需要處理服務器回復的數據。
網路本質上是一種非同步操作。Fetch方法會返回一個<Promise>,這種模式使得編寫以非同步方式運作的程式碼變得簡單：

const getMoviesFromApi = () => {
  return fetch('https://reactnative.dev/movies.json')
    .then(response => response.json())
    .then(json => {
      return json.movies;
    })
    .catch(error => {
      console.error(error);
    });
};

也可以在React Native應用程式中使用/語法：

// 注意這個方法前面有async關鍵字
async function getMoviesFromApi() {
  try {
    // 註意這裡的await語句，其所在的函數必須有async關鍵字聲明
    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);
  }
}

別忘了catch住<fetch>可能拋出的異常，否則出錯時你可能看不出任何提示。

以下為一個小範例：

import React, { useEffect, useState } from 'react';
import { ActivityIndicator, FlatList, Text, View } from 'react-native';

export default App = () => {
  const [isLoading, setLoading] = useState(true);
  const [data, setData] = useState([]);

  useEffect(() => {
    fetch('https://reactnative.dev/movies.json')
      .then((response) => response.json())
      .then((json) => setData(json.movies))
      .catch((error) => console.error(error))
      .finally(() => setLoading(false));
  }, []);

  return (
    <View style={{ flex: 1, padding: 24 }}>
      {isLoading ? <ActivityIndicator/> : (
        <FlatList
          data={data}
          keyExtractor={({ id }, index) => id}
          renderItem={({ item }) => (
            <Text>{item.title}, {item.releaseYear}</Text>
          )}
        />
      )}
    </View>
  );
};

畫面：

參考資料：https://reactnative.cn/docs/network
https://reactnative.dev/docs/network