JavaScript - Fetch API: Hướng dẫn cho người mới bắt đầu

Xin chào các bạn đang học lập trình! Hôm nay, chúng ta sẽ bắt đầu một hành trình thú vị vào thế giới của Fetch API trong JavaScript. Đừng lo lắng nếu bạn mới bắt đầu học lập trình - tôi sẽ là người hướng dẫn thân thiện của bạn, giải thích mọi thứ từng bước. Nào, hãy lấy một tách cà phê (hoặc trà, nếu bạn thích) và cùng tôi bắt đầu!

JavaScript - Fetch API

Fetch API là gì?

Hãy tưởng tượng bạn đang ở trong một nhà hàng và bạn muốn gọi món ăn yêu thích của mình. Bạn gọi người phục vụ (đó là bạn đang gửi yêu cầu), người phục vụ đi vào bếp (đó là máy chủ), và mang lại món ăn ngon lành của bạn (đó là phản hồi). Fetch API hoạt động theo cách tương tự, nhưng thay vì đồ ăn, chúng ta đang làm việc với dữ liệu!

Fetch API là một giao diện hiện đại cho phép bạn gửi yêu cầu mạng đến máy chủ từ trình duyệt. Nó giống như một người đưa tin có thể gửi yêu cầu đến máy chủ và mang lại dữ liệu bạn cần.

Hãy xem một ví dụ đơn giản:

fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

Đừng lo lắng nếu điều này trông rối rắm - chúng ta sẽ phân tích nó ngay sau!

Xử lý phản hồi từ Fetch() API với 'then...catch'

Bây giờ, hãy đi sâu hơn vào cách chúng ta xử lý phản hồi từ yêu cầu Fetch. Chúng ta sử dụng một khối 'then...catch'. Hãy tưởng tượng nó như một bộ hướng dẫn về việc làm gì khi người phục vụ mang lại订单 của bạn (hoặc nếu họ làm rơi nó trên đường đi!).

fetch('https://api.example.com/users')
.then(response => {
if (!response.ok) {
throw new Error('Phản hồi mạng không ổn');
}
return response.json();
})
.then(data => {
console.log('Dữ liệu người dùng:', data);
})
.catch(error => {
console.error('Có vấn đề trong quá trình fetch:', error);
});

Hãy phân tích điều này:

Chúng ta bắt đầu bằng cách gọi fetch() với URL mà chúng ta muốn lấy dữ liệu.
Khối .then() đầu tiên kiểm tra xem phản hồi có ổn không. Nếu không, nó ném ra một lỗi.
Nếu phản hồi ổn, chúng ta convert nó sang định dạng JSON.
Khối .then() thứ hai nhận dữ liệu JSON và ghi nó vào console.
Nếu có bất kỳ lỗi nào xảy ra ở bất kỳ bước nào, khối .catch() sẽ xử lý lỗi.

Xử lý Fetch() API Response Nhiệm vụ đồng bộ

Đôi khi, chúng ta muốn mã của mình chờ đợi quá trình fetch hoàn thành trước khi tiếp tục. Đây là lúc async/await phát huy tác dụng. Nó giống như nói với người phục vụ, "Tôi sẽ chờ ở đây cho đến khi订单 của tôi sẵn sàng."

async function fetchUsers() {
try {
const response = await fetch('https://api.example.com/users');
if (!response.ok) {
throw new Error('Network response was not ok');
}
const data = await response.json();
console.log('User data:', data);
} catch (error) {
console.error('There was a problem with the fetch operation:', error);
}
}

fetchUsers();

Trong ví dụ này:

Chúng ta định nghĩa một hàm async gọi là fetchUsers.
Trong hàm, chúng ta sử dụng await để chờ đợi quá trình fetch hoàn thành.
Chúng ta sau đó chờ đợi phản hồi được convert sang JSON.
Nếu có bất kỳ lỗi nào xảy ra, chúng sẽ bị bắt trong khối catch.

Tùy chọn với Fetch() API

Fetch API không chỉ về việc lấy dữ liệu - bạn cũng có thể tùy chỉnh yêu cầu của mình! Nó giống như việc bạn có thể chỉ định chính xác cách bạn muốn món ăn của mình được chuẩn bị trong nhà hàng.

Dưới đây là bảng một số tùy chọn phổ biến bạn có thể sử dụng với fetch:

Tùy chọn	Mô tả	Ví dụ
method	Phương thức HTTP để sử dụng (GET, POST, v.v.)	`method: 'POST'`
headers	Bất kỳ tiêu đề nào bạn muốn thêm vào yêu cầu	`headers: { 'Content-Type': 'application/json' }`
body	Bất kỳ dữ liệu nào bạn muốn gửi kèm với yêu cầu	`body: JSON.stringify({ name: 'John' })`
mode	Chế độ bạn muốn sử dụng cho yêu cầu	`mode: 'cors'`

Hãy xem một ví dụ sử dụng một số tùy chọn này:

fetch('https://api.example.com/users', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
name: 'John Doe',
email: '[email protected]'
})
})
.then(response => response.json())
.then(data => console.log('Success:', data))
.catch(error => console.error('Error:', error));

Trong ví dụ này, chúng ta đang gửi một yêu cầu POST với một số dữ liệu người dùng. Nó giống như đặt một đơn hàng tùy chỉnh tại nhà hàng tưởng tượng của chúng ta!

Lợi ích của việc sử dụng Fetch() API

Bây giờ chúng ta đã khám phá Fetch API, bạn có thể tự hỏi, "Tại sao tôi nên sử dụng cái này thay vì các phương pháp khác?" Đ很好, hãy để tôi nói cho bạn biết về một số lợi ích tuyệt vời:

Đơn giản: Fetch được tích hợp sẵn trong các trình duyệt hiện đại, vì vậy bạn không cần phải bao gồm bất kỳ thư viện ngoại부 nào.
Dựa trên Promise: Fetch trả về Promises, điều này làm cho việc xử lý các thao tác không đồng bộ trở nên dễ dàng hơn.
Lin hoạt: Bạn có thể dễ dàng tùy chỉnh yêu cầu của mình với nhiều tùy chọn khác nhau.
Hiện đại: Nó là phương pháp hiện đại hơn so với các phương pháp cũ như XMLHttpRequest.
M一致: Nó cung cấp một cách làm一致 để gửi yêu cầu mạng trên các trình duyệt khác nhau.

Dưới đây là một ví dụ nhanh chóng minh họa những lợi ích này:

async function fetchData(url) {
try {
const response = await fetch(url);
const data = await response.json();
return data;
} catch (error) {
console.error('Error fetching data:', error);
}
}

fetchData('https://api.example.com/data')
.then(data => console.log('Fetched data:', data));

Chức năng đơn giản này có thể được tái sử dụng để lấy dữ liệu từ bất kỳ URL nào, minh họa sự đơn giản và linh hoạt của Fetch API.

Và thế là xong, các bạn! Chúng ta đã cùng nhau hành trình qua thế giới của Fetch API, từ việc hiểu nó là gì, đến việc xử lý phản hồi, sử dụng các tùy chọn và đánh giá những lợi ích của nó. Nhớ rằng, giống như bất kỳ kỹ năng nào, việc thành thạo Fetch API cần phải luyện tập. Vậy đừng ngại thử nghiệm và thử các yêu cầu khác nhau.

Chúc các bạn lập trình vui vẻ, và mong rằng các yêu cầu fetch của bạn luôn mang lại dữ liệu bạn đang tìm kiếm!

Credits: Image by storyset

Hướng Dẫn Trước:

JavaScript - API Worker

Hướng Dẫn Tiếp Theo:

JavaScript - API Định vị địa lý