Fetch/XMLHttpRequest trong TypeScript

Bài viết này giải thích về Fetch/XMLHttpRequest trong TypeScript.

Bạn có thể học cách sử dụng Fetch API và XMLHttpRequest, cũng như các điểm khác nhau của chúng.

YouTube Video

Fetch/XMLHttpRequest trong TypeScript

Trong TypeScript, các yêu cầu HTTP chủ yếu được thực hiện bằng hai API: Fetch API và XMLHttpRequest. Bằng cách sử dụng TypeScript, bạn có thể thêm kiểm tra kiểu dữ liệu cho các yêu cầu và phản hồi khi thực hiện giao tiếp bất đồng bộ với các API này, giúp viết mã an toàn hơn. Dưới đây, chúng tôi sẽ giới thiệu cách sử dụng từng API.

Fetch API

Fetch API là một API dựa trên Promise được sử dụng để thực hiện giao tiếp bất đồng bộ (yêu cầu HTTP) một cách đơn giản. Trong TypeScript, bạn có thể thực hiện yêu cầu bằng phương thức fetch và xử lý phản hồi một cách an toàn về kiểu dữ liệu.

Cách sử dụng cơ bản

Dưới đây là ví dụ cơ bản sử dụng yêu cầu GET.

 1const url = 'https://jsonplaceholder.typicode.com/posts';
 2
 3fetch(url)
 4    .then(response => {
 5        if (!response.ok) {
 6        throw new Error('Network response was not ok');
 7        }
 8        return response.json();  // Parse the response as JSON
 9    })
10    .then(data => {
11        console.log(data);
12    })
13    .catch(error => {
14        console.error('Fetch error:', error);
15    });

• Mã này gửi yêu cầu GET tới URL được chỉ định, phân tích phản hồi nhận được dưới dạng JSON và xuất ra bảng điều khiển.

Xử lý dữ liệu an toàn kiểu trong TypeScript

Vì phản hồi từ phương thức fetch có kiểu không rõ ràng, bạn có thể tận dụng kiểm tra kiểu dữ liệu của TypeScript bằng cách định nghĩa rõ ràng kiểu của phản hồi.

 1// Define the type for the response data
 2interface Post {
 3    userId: number;
 4    id: number;
 5    title: string;
 6    body: string;
 7}
 8
 9const url = 'https://jsonplaceholder.typicode.com/posts';
10
11fetch(url)
12    .then(response => response.json())
13    .then((data: Post[]) => {
14        data.forEach(post => {
15            console.log(`Title: ${post.title}`);
16        });
17    })
18    .catch(error => {
19        console.error('Error fetching data:', error);
20    });

• Mã này áp dụng kiểu Post cho dữ liệu được truy xuất bằng fetch, xử lý phản hồi một cách an toàn về kiểu dữ liệu và xuất tiêu đề của từng bài đăng ra bảng điều khiển.

Ví dụ về yêu cầu POST

Khi gửi dữ liệu tới máy chủ, hãy sử dụng phương thức POST. Để gửi JSON trong phần body, hãy chỉ định headers và body.

 1const postData = {
 2    title: 'foo',
 3    body: 'bar',
 4    userId: 1
 5};
 6
 7fetch('https://jsonplaceholder.typicode.com/posts', {
 8        method: 'POST',
 9        headers: {
10            'Content-Type': 'application/json'
11        },
12        body: JSON.stringify(postData)
13    })
14    .then(response => response.json())
15    .then(data => {
16        console.log('Created post:', data);
17    })
18    .catch(error => {
19        console.error('Error posting data:', error);
20    });

• Mã này gửi dữ liệu ở định dạng JSON tới máy chủ bằng yêu cầu POST, nhận phản hồi dưới dạng JSON và xuất ra bảng điều khiển.

Fetch sử dụng các hàm bất đồng bộ (async/await)

Bằng cách sử dụng async/await trong TypeScript, bạn có thể viết xử lý bất đồng bộ một cách đơn giản hơn.

 1// Define the type for the response data
 2interface Post {
 3    userId: number;
 4    id: number;
 5    title: string;
 6    body: string;
 7}
 8
 9async function fetchPosts() {
10    try {
11        const response = await fetch('https://jsonplaceholder.typicode.com/posts');
12        if (!response.ok) {
13            throw new Error('Network response was not ok');
14        }
15        const data: Post[] = await response.json();
16        console.log(data);
17    } catch (error) {
18        console.error('Fetch error:', error);
19    }
20}
21
22fetchPosts();

• Mã này lấy dữ liệu bài đăng một cách bất đồng bộ bằng cú pháp async/await, xử lý phản hồi dưới dạng kiểu Post[] và xuất ra bảng điều khiển.

XMLHttpRequest

XMLHttpRequest là một API cũ hơn và có phần phức tạp hơn so với Fetch API, nhưng nó có thể được sử dụng khi cần hỗ trợ trình duyệt hoặc điều khiển nâng cao.

Sử dụng cơ bản XMLHttpRequest

Dưới đây là ví dụ sử dụng yêu cầu GET.

 1const xhr = new XMLHttpRequest();
 2xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts', true);
 3
 4xhr.onreadystatechange = function () {
 5    if (xhr.readyState === 4 && xhr.status === 200) {
 6        const data = JSON.parse(xhr.responseText);
 7        console.log(data);
 8    }
 9};
10
11xhr.send();

• Mã này gửi yêu cầu GET tới URL được chỉ định bằng XMLHttpRequest, phân tích phản hồi dưới dạng JSON và xuất ra bảng điều khiển.

Ví dụ về yêu cầu POST

Khi gửi dữ liệu tới máy chủ, hãy chỉ định POST trong phương thức open và gửi dữ liệu bằng send.

 1const xhr = new XMLHttpRequest();
 2xhr.open('POST', 'https://jsonplaceholder.typicode.com/posts', true);
 3xhr.setRequestHeader('Content-Type', 'application/json');
 4
 5const postData = JSON.stringify({
 6    title: 'foo',
 7    body: 'bar',
 8    userId: 1
 9});
10
11xhr.onreadystatechange = function () {
12    if (xhr.readyState === 4 && xhr.status === 201) {
13        console.log('Created post:', xhr.responseText);
14    }
15};
16
17xhr.send(postData);

• Mã này gửi dữ liệu ở định dạng JSON đến máy chủ bằng yêu cầu POST với XMLHttpRequest và xuất phản hồi chứa dữ liệu đã tạo ra bảng điều khiển.

Xử lý lỗi với XMLHttpRequest

Bạn có thể xử lý lỗi yêu cầu bằng cách sử dụng sự kiện onerror.

 1const xhr = new XMLHttpRequest();
 2xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts', true);
 3
 4xhr.onerror = function () {
 5    console.error('Request failed');
 6};
 7
 8xhr.onload = function () {
 9    if (xhr.status === 200) {
10        console.log('Response:', xhr.responseText);
11    } else {
12        console.error('Error:', xhr.status);
13    }
14};
15
16xhr.send();

• Mã này thực hiện yêu cầu GET với XMLHttpRequest, xử lý lỗi yêu cầu bằng onerror và ghi lại phản hồi một cách thích hợp khi thành công hoặc thất bại.

So sánh giữa Fetch API và XMLHttpRequest

Tóm tắt

Trong TypeScript, bạn có thể viết các yêu cầu không đồng bộ một cách ngắn gọn và an toàn về kiểu bằng cách sử dụng Fetch API. Mặt khác, XMLHttpRequest là một API cũ hơn nhưng vẫn có thể được sử dụng trong một số tình huống nhất định. Thông thường, nên sử dụng Fetch API đơn giản và hiện đại, nhưng nếu cần tương thích trình duyệt hoặc theo dõi tiến trình, XMLHttpRequest cũng có thể được xem xét.

Bạn có thể làm theo bài viết trên bằng cách sử dụng Visual Studio Code trên kênh YouTube của chúng tôi. Vui lòng ghé thăm kênh YouTube.

YouTube Video