[JavaScript] Promises, Classes, ES6 Modules and CommonJS

Tiếp tục loạt bài về JavaScript ES6, trong bài viết lần này chúng ta sẽ cùng tìm hiểu cơ bản về Promises, Classes, ES6 module và CommonJS.

Trong bài biết lần này mình sẽ sử dụng Editor là Visual Studio Code (https://code.visualstudio.com/) và Firefox (https://www.mozilla.org/en-US/firefox/new/). Các bạn có thể download và cài đặt ở link đính kèm, cách cài đặt cũng không khó nên mình sẽ không hướng dẫn ở đây mà mình sẽ đưa ra một số plugin gợi ý có thể thêm vào Visual Studio Code để dễ dàng hơn trong việc viết code JavaScript như hình sau

Promises

Promises cung cấp cho chúng ta một cách đơn giản để thực hiện một task bất đồng bộ. Khi tạo ra một task không đồng bộ, một trong hai kết quả sẽ xảy ra: mọi thứ sẽ xảy ra như chúng ta mong đợi (successful) hoặc sẽ xuất hiện một lỗi (unsuccessful). Chúng ta sẽ xem xét một ví dụ sau để hiểu cách hoạt động của promises.

Chúng ta sẽ tạo một task bất đồng bộ là lấy data từ randomuser.me API. Đây là API hỗ trợ việc tạo dữ liệu giả (fake) gồm nhiều thông tin của một user như địa chỉ email, tên, số điện thoại, vị trí,... Đầu tiên tạo function getFakeMembers trả về một promise như sau

        const getFakeMembers = count => new Promise((resolves, rejects) => {

        })

count là số lượng members chúng ta muốn lấy, khi khởi tạo một promise chúng ta sẽ truyền vào một function với hai tham số là resolves và rejects, hai tham số này cũng là 2 function sử dụng để handle trong quá trình promise lấy dữ liệu. Tiếp theo chúng ta sẽ viết phần xử lý trong promise

        const getFakeMembers = count => new Promise((resolves, rejects) => {
            const api = `https://api.randomuser.me/?nat=US&results=${count}`
            const request = new XMLHttpRequest()
            request.open('GET', api) // use GET method
            request.onload = () => 
                (request.status === 200) ? 
                resolves(JSON.parse(request.response).results) :
                rejects(request.statusText)
            request.onerror = (err) => rejects(err)
            request.send()
        })

Đoạn code trên mình thấy khá dễ hiểu nên mình ko giải thích nữa, nếu bạn nào đọc không hiểu có thể comment bên dưới bài viết mình sẽ giải thích nhé