Việc tương tác với các API (Application Programming Interface) rất phổ biến trong thế giới web hiện nay. Trong bài viết này, chúng ta sẽ tìm hiểu về cách sử dụng Fetch API với JavaScript, cùng với cách tích hợp jQuery và một số thư viện hỗ trợ fetch để giúp quá trình này trở nên dễ dàng và hiệu quả.
I. Fetch API sử dụng JavaScript
1. Fetch API cơ bản
Fetch API là một phần của chuẩn JavaScript, giúp thực hiện các yêu cầu HTTP một cách dễ dàng. Dưới đây là một ví dụ về cách sử dụng Fetch API để lấy dữ liệu từ một API:
fetch('https://api.example.com/data') // Gửi yêu cầu sử dụng fetch
// Xử lý phản hồi (Handling the response)
.then((response) => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
})
// Xử lý dữ liệu (Handling the data)
.then((data) => {
console.log(data);
})
// Xử lý lỗi (Handling errors)
.catch((error) => {
console.error('There was a problem with the fetch operation:', error);
});
2. Thêm tùy chọn vào Fetch API
Có thể thêm các tùy chọn như phương thức, headers, và body data để tương tác linh hoạt với API.
fetch('https://api.example.com/data', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
// Các headers khác nếu cần
},
body: JSON.stringify({ key1: 'value1', key2: 'value2' }),
mode: 'cors', // Chế độ xử lý chính sách đồng nguyên (Same-Origin Policy)
credentials: 'include', // Bao gồm cookie trong yêu cầu (hoặc 'same-origin', 'omit')
cache: 'no-cache', // Kiểm tra cache, có thể là 'default', 'no-store', 'reload', 'no-cache', v.v.
redirect: 'follow', // Chế độ chuyển hướng, có thể là 'follow', 'error', 'manual'
referrerPolicy: 'no-referrer', // Chế độ xử lý referer, có thể là 'no-referrer', 'no-referrer-when-downgrade', 'same-origin', 'origin', 'strict-origin', 'strict-origin-when-cross-origin', 'unsafe-url'
})
.then((response) => response.json())
.then((data) => console.log(data))
.catch((error) => console.error('Error:', error));
👉 Đọc thêm các phương thức, headers, và body data... tại đây
II. Fetch API sử dụng jQuery
jQuery là một thư viện JavaScript phổ biến được thiết kế để giảm đi sự phức tạp của việc tương tác với DOM (Document Object Model) và thực hiện các tác vụ phổ biến trong lập trình web. Trong jQuery, có một module riêng biệt được thiết kế để xử lý AJAX gọi là jQuery.ajax().
1. jQuery AJAX
jQuery cũng cung cấp một cách thuận tiện để thực hiện AJAX requests. Dưới đây là một ví dụ đơn giản.
$.ajax({
url: 'https://api.example.com/data', // Địa chỉ URL của máy chủ.
method: 'GET', // Phương thức HTTP, như 'GET', 'POST', 'PUT', v.v.
dataType: 'json', // Kiểu dữ liệu của phản hồi, có thể là 'json', 'xml', 'html', v.v.
// Hàm được gọi khi yêu cầu thành công.
success: function (data) {
console.log(data);
},
// Hàm được gọi khi có lỗi xảy ra.
error: function (error) {
console.error('There was a problem with the jQuery AJAX request:', error);
},
});
III. Thư viện hỗ trợ Fetch
1. Axios
Axios là một thư viện HTTP client phổ biến với cú pháp đơn giản và khả năng tùy chọn mạnh mẽ.
Cài đặt Axios
npm install axios
Thiết lập Axios
const axios = require('axios');
axios
.get('https://api.example.com/data')
.then((response) => {
console.log(response.data);
})
.catch((error) => {
console.error('There was a problem with the Axios request:', error);
});
2. Fetch-Mock
Fetch-Mock là một thư viện mô phỏng Fetch API để kiểm thử dễ dàng và hiệu quả.
Cài đặt Fetch-Mock
npm install fetch-mock
Thiết lập fetch-mock
const fetchMock = require('fetch-mock');
fetchMock.get('https://api.example.com/data', { data: 'mocked data' });
fetch('https://api.example.com/data')
.then((response) => response.json())
.then((data) => {
console.log(data); // In kết quả từ Fetch-Mock
});
🔗 Tham khảo thêm kiến thức về fetch API tại: