本文使用 Star Wars API 為例示範 React 如何串接第三方 API。
範例：串接 Star Wars API
- API: Application Programming Interface
- SWAPI Film List
- Package axios
- Built-in Fetch API
- HTTP response status codes
使用 Fetch 透過網路取得 JSON，回傳的 response 需要先透過 json() 轉換，然後我們就能開始使用資料！
這邊有個小細節就是使用 map() 篩選出我們需要的欄位，不要把整包 API 資料都帶走，減少資料的複雜度。
function fetchMovieHandler() {
fetch('https://swapi.dev/api/films')
.then(res => {
return res.json()
})
.then(data => {
const transformedMovies = data.results.map(movieData => {
return {
id: movieData.episode_id,
title: movieData.title,
openingText: movieData.opening_crawl,
releaseDate: movieData.release_date,
}
})
setMovies(transformedMovies)
})
.catch(err => {
console.log(err)
})
}
我們也可以搭配 Async/Await 來使用，我本身也比較喜歡 async/await 大於 .then()，因為讀起來更簡單、直覺。
注意，使用時除了在 Fetch 加上 await 之外，使用 json() 把回傳結果的 body text 解析成 JSON 型別的時候也要加上 await。
async function fetchMovieHandler() {
const response = await fetch('https://swapi.dev/api/films')
const data = await response.json()
const transformedMovies = data.results.map(movieData => {
return {
id: movieData.episode_id,
title: movieData.title,
openingText: movieData.opening_crawl,
releaseDate: movieData.release_date,
}
})
setMovies(transformedMovies)
}
Loading & Error Handling
最後是加上 Loading 與錯誤處理的部分，我們會用 Fetch API 作為範例，如果用的是其他 API 像是 axios，可能在寫法上會有些許差異。
function App() {
const [movies, setMovies] = useState([])
const [isLoading, setIsLoading] = useState(false) // 是否正在讀取
const [error, setError] = useState(null) // 錯誤訊息
async function fetchMovieHandler() {
setIsLoading(true)
setError(null)
// 使用 try...catch 處理錯誤
try {
const response = await fetch('https://swapi.dev/api/films')
// 檢查 Fetch 回傳的狀態
if (!response.ok) {
throw new Error('Something went wrong!')
}
const data = await response.json()
const transformedMovies = data.results.map(movieData => {
return {
id: movieData.episode_id,
title: movieData.title,
openingText: movieData.opening_crawl,
releaseDate: movieData.release_date,
}
})
setMovies(transformedMovies)
} catch (error) {
setError(error.message)
}
// 不論成功失敗最後都會關閉讀取
setIsLoading(false)
}
// 處理不同狀態下的呈現內容
let content = <p>Found no movies.</p>
if (movies.length > 0) {
content = <MoviesList movies={movies} />
}
if (error) {
content = <p>{error}</p>
}
if (isLoading) {
content = <p>Loading...</p>
}
return (
<React.Fragment>
<section>
<button onClick={fetchMovieHandler}>Fetch Movies</button>
</section>
<section>
{/* {!isLoading && movies.length > 0 && <MoviesList movies={movies} />}
{!isLoading && movies.length === 0 && !error && <p>Found no movies.</p>}
{isLoading && <p>Loading...</p>}
{!isLoading && error && <p>{error}</p>} */}
{content}
</section>
</React.Fragment>
)
}
export default App
Working with useEffect and useCallback Hooks
最後我們用 useEffect 讓畫面渲染後先 Call API 獲取一次資料。
除此之外，我們會加上 useCallback 確保 fetchMovieHandler 函式不會在 useEffect 中形成無限迴圈，因此要在 dependency array 放入函式內有使用到的狀態。
（在這個範例中我們沒有使用任何依賴，但其他情況下就有可能會用到）
const fetchMovieHandler = useCallback(async () => {
// Do the same thing...
}, [])
useEffect(() => {
fetchMovieHandler()
}, [fetchMovieHandler])
Sending a POST request to Firebase Realtime Database
Fetch API 除了 GET 之外也能用 POST，寫法是在 fetch() 的第二個參數放一個物件，然後基本上會設定 method、body，與 headers 這幾個基本的欄位。
async function addMovieHandler(movie) {
setError(null)
try {
console.log(movie)
const response = await fetch(
'https://react-http-14f5a-default-rtdb.firebaseio.com/movies.json',
{
method: 'POST',
body: JSON.stringify(movie), // body want JSON data
// Firebase 不用設定 Content-Type，但一般保險起見還是都會設定
headers: {
'Content-Type': 'application/json',
},
}
)
const data = await response.json()
console.log(data)
fetchMoviesHandler() // Fetch movies after adding new movie
} catch (error) {
setError(error.message)
}
}
回顧
看完這篇文章，我們到底有什麼收穫呢？藉由本文可以理解到…
- Fetching API data with useEffect and useCallback Hooks