# 🌐 Gọi API với fetch: loading, error và cleanup

By Better Wise

> This lesson is premium content. Sign in and purchase the course to view the full content.

Bài trước bạn đã nắm `useEffect` dùng để chạy side effect sau khi render, và mảng phụ thuộc quyết định effect chạy lại khi nào. Bài này lấy đúng thứ đó để làm việc mà app React nào cũng phải làm: lấy dữ liệu từ server rồi hiển thị.

## Bạn sẽ làm được gì sau bài này

- Viết `useEffect` gọi `fetch` và đưa kết quả vào state.
- Hiển thị rõ ba khoảnh khắc: đang tải, lỗi, có dữ liệu.
- Hủy request bằng `AbortController` khi component unmount.

## Ba khoảnh khắc của một lần gọi API

Ví dụ đời thường: bạn gọi món ở quán. Có ba khoảnh khắc: đang chờ món, quán báo hết món, món được bưng ra. Giao diện cũng vậy. Nếu thiếu khoảnh khắc "đang chờ", người dùng sẽ nhìn màn hình trắng và tưởng app treo.

```mermaid
flowchart TD
    Start["🟢<br/>Component mount"] --> Loading["⏳<br/>loading = true"]
    Loading --> Check{"res.ok ?"}
    Check -->|"true"| Success["✅<br/>setTodos(data)"]
    Check -->|"false"| Fail["❌<br/>setError(message)"]
    Success --> Done["🛑<br/>loading = false"]
    Fail --> Done
```

> **Important:** 
> `fetch` chỉ reject khi có lỗi mạng (mất wifi, sai domain). Server trả 404 hay 500 thì `fetch` vẫn coi là xong, nên bạn phải tự kiểm tra `res.ok`.

## Ví dụ mẫu: tải danh sách việc cần làm

Ta đi từng bước trên component `TodoList` của dự án quản lý nhỏ.

1. Khai báo ba state: `todos` (dữ liệu), `loading` (mặc định `true`), `error` (mặc định `null`).
2. Trong `useEffect`, tạo `AbortController` để có thể hủy request.
3. Gọi `fetch`, kiểm tra `res.ok`, rồi `res.json()` để đổi response thành object.
4. Render theo ba nhánh: loading trước, error sau, cuối cùng là danh sách.

## In this lesson

- Cleanup: hủy request khi component unmount
- Lỗi hay gặp khi gọi fetch trong useEffect
- Tự kiểm tra nhanh
- Chốt lại trước khi vào dự án


---

## Contents

Part of [⚛️ React từ con số 0 cho người chỉ biết HTML](https://everwise.study/courses/react-tu-con-so-0-cho-nguoi-chi-biet-html.md)

- **🧱 Nền tảng JavaScript và tư duy React**
  - [✨ ES6 thiết yếu cho React: let, const, arrow function, destructuring, spread](https://everwise.study/courses/react-tu-con-so-0-cho-nguoi-chi-biet-html/es6-thiet-yeu-cho-react.md)
  - [🔁 Hàm và mảng trong thực tế: map, filter, reduce](https://everwise.study/courses/react-tu-con-so-0-cho-nguoi-chi-biet-html/ham-mang-map-filter-reduce.md) (sign-in required)
  - [🧩 Tư duy component và khởi tạo dự án với Vite](https://everwise.study/courses/react-tu-con-so-0-cho-nguoi-chi-biet-html/tu-duy-component-va-khoi-tao-vite.md)
  - [✅ Checkpoint: nền tảng JavaScript và tư duy React](https://everwise.study/courses/react-tu-con-so-0-cho-nguoi-chi-biet-html/checkpoint-nen-tang-javascript-va-react.md)
- **🧩 Component, JSX, props và state**
  - [📄 JSX và component đầu tiên](https://everwise.study/courses/react-tu-con-so-0-cho-nguoi-chi-biet-html/jsx-va-component-dau-tien.md)
  - [📦 Props và composition: truyền dữ liệu giữa component](https://everwise.study/courses/react-tu-con-so-0-cho-nguoi-chi-biet-html/props-va-composition.md)
  - [🔄 State với useState và xử lý sự kiện](https://everwise.study/courses/react-tu-con-so-0-cho-nguoi-chi-biet-html/state-usestate-va-su-kien.md)
  - [📋 Render danh sách và key trong React](https://everwise.study/courses/react-tu-con-so-0-cho-nguoi-chi-biet-html/render-danh-sach-va-key.md)
  - [✅ Checkpoint: component, JSX, props và state](https://everwise.study/courses/react-tu-con-so-0-cho-nguoi-chi-biet-html/checkpoint-component-va-state.md)
- **🚀 Form, useEffect, gọi API và dự án nhỏ**
  - [📝 Form và controlled components](https://everwise.study/courses/react-tu-con-so-0-cho-nguoi-chi-biet-html/form-va-controlled-components.md)
  - [⚙️ useEffect và side effects](https://everwise.study/courses/react-tu-con-so-0-cho-nguoi-chi-biet-html/useeffect-va-side-effects.md)
  - [🌐 Gọi API với fetch: loading, error và cleanup](https://everwise.study/courses/react-tu-con-so-0-cho-nguoi-chi-biet-html/goi-api-voi-fetch.md) (premium content) — this lesson
  - [🛠️ Dự án: ứng dụng quản lý nhỏ với Vite](https://everwise.study/courses/react-tu-con-so-0-cho-nguoi-chi-biet-html/du-an-ung-dung-quan-ly-voi-vite.md) (premium content)
  - [✅ Checkpoint: form, useEffect, gọi API và dự án](https://everwise.study/courses/react-tu-con-so-0-cho-nguoi-chi-biet-html/checkpoint-form-api-va-du-an.md) (premium content)
- [Course cheatsheet](https://everwise.study/courses/react-tu-con-so-0-cho-nguoi-chi-biet-html/cheatsheet.md) (premium content)