blog

Promise là gì? Hướng dẫn sử dụng Promise trong dự án React

Posted on by ComdyVN

Khi bắt đầu hành trình học tập về JavaScript và React, bạn có thể sẽ gặp khó khăn với khái niệm Promise. Khái niệm này dường như mơ hồ và khó hiểu. Tuy nhiên, sau một thời gian tìm tòi và thực hành, nhiều người nhận ra rằng Promise thực sự là một công cụ mạnh mẽ để xử lý các tác vụ bất đồng bộ một cách hiệu quả. Trong bài viết này, chúng ta sẽ cùng nhau khám phá chi tiết về Promise, tại sao nó quan trọng và cách áp dụng nó vào các dự án React một cách tối ưu.

1. Khái niệm về Bất Đồng Bộ trong JavaScript

Trước khi tìm hiểu về Promise, điều quan trọng là phải hiểu về bất đồng bộ trong JavaScript. JavaScript là một ngôn ngữ đơn luồng (single-threaded), nghĩa là nó thực hiện một tác vụ tại một thời điểm. Tuy nhiên, trong thực tế, bạn sẽ thường xuyên cần xử lý nhiều tác vụ cùng lúc như gọi API, đọc/ghi file hay xử lý sự kiện người dùng.

Nếu các tác vụ này được thực hiện một cách đồng bộ, ứng dụng của bạn sẽ “đóng băng” cho đến khi các tác vụ hoàn thành. Điều này không chỉ làm giảm trải nghiệm người dùng mà còn có thể gây ra nhiều vấn đề khác. Để khắc phục tình trạng này, JavaScript đã phát triển cơ chế bất đồng bộ cho phép các tác vụ diễn ra song song mà không làm gián đoạn luồng thực thi chính của ứng dụng.

2. Promise là gì?

Promise là một đối tượng trong JavaScript đại diện cho một tác vụ bất đồng bộ sẽ hoàn thành tại một thời điểm trong tương lai. Bạn có thể hình dung Promise giống như một lời hứa: “Tôi hứa sẽ cung cấp kết quả cho bạn khi tác vụ hoàn thành”.

Một Promise có thể ở một trong ba trạng thái sau:

  • Pending (đang chờ): Trạng thái ban đầu, chưa hoàn thành hoặc đã bị từ chối.
  • Fulfilled (hoàn thành): Tác vụ đã được hoàn thành thành công.
  • Rejected (bị từ chối): Tác vụ đã thất bại.

Hình minh họa trạng thái của PromiseHình minh họa trạng thái của Promise

3. Tại sao chúng ta cần sử dụng Promise?

Trước khi có Promise, callback là cách phổ biến để xử lý các tác vụ bất đồng bộ. Tuy nhiên, việc lập trình với nhiều callback có thể khiến mã nguồn trở nên khó đọc và bảo trì, dẫn đến hiện tượng “Callback Hell”. Promise được tạo ra để giải quyết vấn đề này. Nó cung cấp cách viết mã rõ ràng và tuyến tính, cho phép bạn quản lý các tác vụ bất đồng bộ một cách dễ dàng và xử lý lỗi hiệu quả hơn.

4. Cách sử dụng Promise trong JavaScript

4.1 Tạo một Promise

Để tạo một Promise, bạn sẽ sử dụng new Promise, truyền vào một hàm chứa hai tham số là resolve và reject.

const myPromise = new Promise((resolve, reject) => {
    // Thực hiện tác vụ bất đồng bộ
    resolve(result); // Hoàn thành với kết quả
    reject(error); // Từ chối với lỗi
});

Ví dụ sau minh họa việc sử dụng Promise với hàm setTimeout để giả lập một tác vụ bất đồng bộ.

const promise = new Promise((resolve, reject) => {
    setTimeout(() => {
        const success = true;
        if (success) {
            resolve('Success!');
        } else {
            reject('Failed!');
        }
    }, 1000);
});

Trong ví dụ này, sau 1 giây, Promise sẽ được hoàn thành với kết quả “Success!” hoặc bị từ chối với thông báo “Failed!”.

4.2 Xử lý kết quả bằng .then() và .catch()

Để nhận được kết quả từ một Promise, bạn có thể sử dụng hai phương thức: .then() và .catch().

  • .then(onFulfilled): Được gọi khi Promise hoàn thành.
  • .catch(onRejected): Được gọi khi Promise bị từ chối.
promise
    .then((result) => {
        console.log(result); // "Success!"
    })
    .catch((error) => {
        console.error(error); // "Failed!"
    });

4.3 Nối chuỗi Promise

Bạn có thể nối các Promise bằng cách trả về một Promise trong .then().

firstPromise()
    .then((result1) => {
        return secondPromise(result1);
    })
    .then((result2) => {
        console.log(result2);
    })
    .catch((error) => {
        console.error(error);
    });

4.4 Sử dụng Promise.all

Promise.all cho phép bạn thực hiện nhiều Promise cùng một lúc và nhận kết quả khi tất cả đều hoàn thành.

const promise1 = fetchData1();
const promise2 = fetchData2();

Promise.all([promise1, promise2])
    .then(([result1, result2]) => {
        console.log(result1, result2);
    })
    .catch((error) => {
        console.error(error);
    });

Lưu ý rằng bạn cần phải xử lý lỗi bằng cách sử dụng .catch(). Nếu không làm điều này, lỗi có thể không được phát hiện và gây ra những vấn đề khó khăn cho việc gỡ lỗi sau này.

5. Hướng dẫn sử dụng Promise trong React

Trong React, việc thực hiện các tác vụ bất đồng bộ như gọi API là rất phổ biến. Sử dụng Promise giúp bạn quản lý những tác vụ này một cách hiệu quả.

5.1 Sử dụng Fetch API với Promise

fetch là một API tích hợp trong JavaScript cho phép bạn gửi yêu cầu để lấy dữ liệu, và nó sẽ trả về một Promise.

fetch('https://jsonplaceholder.typicode.com/users')
    .then((response) => response.json())
    .then((data) => {
        console.log(data);
    })
    .catch((error) => {
        console.error('Lỗi:', error);
    });

5.2 Sử dụng Promise cùng với useEffect trong component

import React, { useState, useEffect } from 'react';

function UserList() {
    const [users, setUsers] = useState(null);

    useEffect(() => {
        fetch('https://jsonplaceholder.typicode.com/users')
            .then((response) => response.json())
            .then((data) => {
                setUsers(data);
            })
            .catch((error) => {
                console.error('Lỗi:', error);
            });
    }, []);

    return (
        <div>
            {users ? (
                <ul>
                    {users.map((user) => (
                        <li key={user.id}>{user.name}</li>
                    ))}
                </ul>
            ) : (
                <div>Loading...</div>
            )}
        </div>
    );
}

export default UserList;
  • useEffect với mảng phụ thuộc rỗng [] sẽ chỉ chạy một lần khi component được mount.
  • Sử dụng fetch để gọi API và cập nhật state users khi nhận được kết quả.

6. So sánh Promise và Async/Await

Mặc dù bài viết này tập trung vào Promise, nhưng cũng rất quan trọng để hiểu về Async/Await.

Khi bạn sử dụng Promise:

  • Bạn cần sử dụng .then() và .catch() để xử lý kết quả và lỗi.
  • Mã có thể trở nên phức tạp khi nối nhiều Promise lại.
function fetchData() {
    return fetch('https://jsonplaceholder.typicode.com/users')
        .then((response) => response.json())
        .then((data) => {
            console.log('Result:', data);
        })
        .catch((error) => {
            console.error('Err:', error);
        });
}

fetchData();

Trong khi đó, với Async/Await:

  • Giúp code trở nên giống như mã đồng bộ, dễ đọc và hiểu hơn.
  • Sử dụng try...catch để xử lý lỗi.
async function fetchData() {
    try {
        const response = await fetch('https://jsonplaceholder.typicode.com/users');
        const data = await response.json();
        console.log('Result:', data);
    } catch (error) {
        console.error('Err:', error);
    }
}

fetchData();

Sử dụng Async/Await giúp mã của bạn trở nên gọn gàng hơn. Tuy nhiên, bạn vẫn cần phải nắm rõ về Promise, vì Async/Await thực ra là một cú pháp mới dựa trên Promise.

  • Bạn nên sử dụng Promise khi cần quản lý nhiều tác vụ bất đồng bộ và sử dụng những phương thức như Promise.all, Promise.race.
  • Sử dụng Async/Await khi muốn mã của mình dễ đọc và giống như đồng bộ, đặc biệt là cho các tác vụ bất đồng bộ tuần tự.

7. Kết luận

Promise là một yếu tố quan trọng trong JavaScript, đặc biệt khi làm việc với React. Hiểu và sử dụng thành thạo Promise sẽ giúp bạn viết mã bất đồng bộ một cách hiệu quả, giảm thiểu các vấn đề về hiệu suất và cải thiện trải nghiệm cho người dùng.

Hy vọng qua bài viết này, bạn đã có cái nhìn rõ ràng hơn về Promise và cách ứng dụng nó. Nếu bạn mới bắt đầu, hãy mạnh dạn thực hành và tạo ra những ví dụ nhỏ để có thể nắm rõ hơn về cách thức hoạt động của Promise.

Hãy truy cập comdy.vn để tìm hiểu thêm về các khái niệm marketing và công nghệ thú vị khác nhé!

Để lại một bình luận

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *