Introduction to ES6 Promises – The Four Functions You Need To Avoid Callback Hell - part 1

Ngoài sự mới mẻ và sáng bóng, Promises là cách tuyệt vời để làm sạch code của bạn, giảm phụ thuộc vào các thư viện bên ngoài, và giúp bạn đồng bộ trong khi chờ đợi ES7. Người ta nói rằng, promises có thể mất nhiều công sức để hiểu, họ cảm thấy chúng hoàn toàn khác biệt so với các callbacks mà chúng ta thường sử dụng, và có một vài điều thú vị và bất ngờ trong thiết kế của nó khiến những người mới gặp bối rối.

Nếu những gì giới thiệu về Promises vẫn chưa đủ để thuyết phục bạn, hãy tìm hiểu ví dụ sau: Trước khi promises đến, các developer javascript đã sử dụng callbacks, setTimeout, XMLHttpRequest, về cơ bản tất cả các trình duyệt thực hiện các chức năng đồng bộ dựa trên callback. Để giải thích vấn đề với callback, chúng ta hãy thực hiện một số animation mà không có html và css:

1. Chạy một vài dòng code
2. Đợi 1s
3. Chạy một vài dòng code khác
4. Đợi 1s tiếp
5. Lại thực hiện chạy một vài dòng code khác

Đây là một pattern mà chúng ta thường sử dụng với hình động CSS3. Nếu thực hiện sử dụng setTimeout, code của bạn sẽ như sau:

runAnimation(0);
setTimeout(function() {
    runAnimation(1);    
    setTimeout(function() {
        runAnimation(2);
    }, 1000);
}, 1000);

Trông thật kinh khủng