Sử dụng Promise trong JavaScript như thế nào?

Sử dụng Promise trong JavaScript

Promise là một đối tượng đại diện cho một giá trị mà tại một thời điểm nào đó sẽ có kết quả (resolved) hoặc bị lỗi (rejected). Nó cho phép bạn làm việc với các tác vụ bất đồng bộ một cách dễ quản lý hơn.

Cấu trúc cơ bản của Promise

Một Promise có thể có ba trạng thái:

1. Pending: Trạng thái ban đầu, chưa hoàn thành.
2. Resolved (Fulfilled): Hoàn thành thành công.
3. Rejected: Đã thất bại.

Cách tạo một Promise

Bạn có thể tạo một Promise bằng cách sử dụng từ khóa new Promise(), truyền vào một hàm có hai đối số: resolve và reject.

let myPromise = new Promise(function(resolve, reject) {
    // Thực hiện một tác vụ bất đồng bộ
    let success = true;

    if (success) {
        resolve("Tác vụ hoàn thành thành công!");
    } else {
        reject("Có lỗi xảy ra!");
    }
});

Sử dụng then() và catch()

Sau khi tạo một Promise, bạn có thể xử lý kết quả của nó bằng cách sử dụng các phương thức .then() và .catch() để làm việc với trạng thái resolved và rejected tương ứng.

myPromise
    .then(function(result) {
        console.log(result); // In ra: Tác vụ hoàn thành thành công!
    })
    .catch(function(error) {
        console.log(error); // In ra: Có lỗi xảy ra! (nếu tác vụ thất bại)
    });

Ví dụ sử dụng Promise với tác vụ bất đồng bộ

Trong ví dụ sau, chúng ta sử dụng Promise để mô phỏng một yêu cầu HTTP giả lập (giả sử dùng setTimeout để tạo tác vụ bất đồng bộ):

function makeRequest() {
    return new Promise(function(resolve, reject) {
        setTimeout(function() {
            let success = true; // Giả lập thành công yêu cầu

            if (success) {
                resolve("Dữ liệu đã được lấy thành công.");
            } else {
                reject("Có lỗi xảy ra khi lấy dữ liệu.");
            }
        }, 2000); // Mô phỏng tác vụ mất 2 giây
    });
}

makeRequest()
    .then(function(response) {
        console.log(response); // Kết quả: Dữ liệu đã được lấy thành công.
    })
    .catch(function(error) {
        console.log(error); // Trường hợp lỗi sẽ in thông báo lỗi.
    });

Chaining Promises

Bạn có thể kết nối các Promises lại với nhau bằng cách sử dụng nhiều .then():

makeRequest()
    .then(function(response) {
        console.log(response); // Kết quả: Dữ liệu đã được lấy thành công.
        return "Bước tiếp theo sau khi nhận dữ liệu.";
    })
    .then(function(nextStep) {
        console.log(nextStep); // In ra: Bước tiếp theo sau khi nhận dữ liệu.
    })
    .catch(function(error) {
        console.log(error);
    });

Promise.all()

Promise.all() cho phép bạn xử lý nhiều Promise cùng một lúc, chỉ khi tất cả các Promise được hoàn thành thì kết quả mới được trả về. Nếu bất kỳ Promise nào bị từ chối, Promise.all sẽ ngay lập tức bị từ chối.

let promise1 = Promise.resolve("Promise 1 hoàn thành.");
let promise2 = new Promise(function(resolve) {
    setTimeout(resolve, 1000, "Promise 2 hoàn thành sau 1 giây.");
});

Promise.all([promise1, promise2])
    .then(function(results) {
        console.log(results); // Kết quả: ["Promise 1 hoàn thành.", "Promise 2 hoàn thành sau 1 giây."]
    });

Tóm tắt

• Promise giúp xử lý các tác vụ bất đồng bộ dễ quản lý hơn.
• Sử dụng .then() để xử lý kết quả khi Promise thành công và .catch() để xử lý lỗi khi Promise thất bại.
• Các Promises có thể được kết nối (chaining) để thực hiện các tác vụ theo chuỗi.
• Promise.all() giúp bạn chạy nhiều Promises đồng thời và chỉ trả kết quả khi tất cả Promises hoàn thành.

• Javascript