Sự khác biệt của 2 cách sử dụng Resolve/Reject trong Promise
Javascript
200
promise
5
White

Cuong Pham viết ngày 28/06/2017

Về cơ bản có 2 cách sử dụng Resolve/Reject trong Promise của Javascript:

  • Sử dụng hàm static của class Promise: return Promise.reject() & return Promise.resolve()
  • Sử dụng trong intance của Promise:
return new Promise(function(resolve, reject) {
    resolve(); //or reject();
})

Đối với anh em mới cập nhật ES6 thì cái Promise này là một trong những thứ đáng quan tâm và nên học vì nó có nhiều ưu điểm tốt hơn Callback. Và dĩ nhiên anh em sẽ gặp 2 trường hợp ở trên thường xuyên. Tựu chung thì 2 cách gọi này đều là làm cùng mục đích, nhưng vẫn có trường hợp nếu không sử dụng khéo léo thì bug vẫn chòi ra như thường.

Cách tốt nhất là cho ví dụ luôn, ta có đoạn code như sau:

function stepOne(arg) {
    if (arg === 1) {
        return Promise.resolve('Done step one!');
    } else {
        return Promise.reject('Params invalid');
    }
}

function exec(arg) {
    return new Promise(function(resolve, reject) {
        stepOne(arg)
            .then(function(stepOneMessage) {
                if (stepOneMessage !== 'Done step one!') {
                    return Promise.reject('Result not match');
                } else {
                    return Promise.resolve('Done step two');
                }
            })
            .then(function(stepTwoMessage) {
                if (stepTwoMessage === 'Done step two') {
                    return resolve('Process complete');
                } else {
                    return Promise.reject('Process failed');
                }
            })
            .catch(function(error) {
                reject(error);
            });
     });
}

Ở hàm stepOne() anh em có thể return bằng cách 1 hay cách 2 đều được miễn là return type Promise.

Ta sẽ đến hàm exec(). Hàm này anh em thấy mình sử dụng cả cách 1 và cách 2. Vậy chúng nó khác nhau như thế nào? Giờ phân tích code nhé.

Ở hàm exec khi gọi stepOne, phần catch sẽ hứng lỗi của stepOne trả về, nhưng chưa hết, nó sẽ hứng lỗi của Promise.reject ở các hàm then ở trên nữa. Bây giờ ở trong hàm catch nếu đặt reject() là một message khác, ví dụ là Exec error đi, và một cái console.log(error) ở ngay trên dòng này, anh em sẽ thấy là dù ở trên mấy cái then nó có Promise.reject cái của nợ gì đi nữa thì khi gọi hàm execcatch nó thì anh em luôn nhận được một message lỗi duy nhất Exec error, trong khi log ở trên thì đc nhiều nội dung lỗi khác nhau từ mấy cái Promise.reject đó.

Vậy giờ tôi muốn bắt được mấy cái lỗi linh động như trong code của exec chứ không phải chỉ là một nội dung chung chung này thì như nào? Ez. Chỉ cần đổi Promise.reject thành reject là được. Khi đó gọi hàm execcatch thì anh em sẽ nhận được nhiều nội dung lỗi hơn, và chỉ khi stepOnelỗi thì nó mới xuống và trả về Exec error.

Đó là Promise.rejectreject. Đối với Promise.resolveresolve, tư duy cũng tương tự. Khi return Promise.resolve thì data sẽ được hứng ở hàm then tiếp theo, còn muốn khi gọi hàm exec mà nhận được kết quả đó ngay thì đổi từ Promise.resolve sang resolve là được.

Chốt

Khi sử dụng lồng ghép giữa 2 cách trên thì đám resolvereject là mấy thanh niên chuyên đảm trách việc hứa hẹn giao tiếp với thế giới bên ngoài, còn đám Promise.resolvePromise.reject thì đảm nhiệm việc deal với anh em trong nhà (scope) đó thôi không có tiếng nói với người ngoài.

Còn khi 2 cách này được sử dụng ngang hàng chỉ khác cái trước cái sau thì sao? Case này cũng giống như mấy đứa sinh đôi, thằng nào ra trước (return trước) thằng đó làm anh, không quan trọng là từ static hay instance chui ra, miễn là Promise là được.

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

Cuong Pham

11 bài viết.
0 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
3 0
Generate Swagger API File to HTML Site Slate rất hay nhưng muốn gen từ Swagger API thì rất là lằng nhằng và tool convert có vẻ như tác giả không s...
Cuong Pham viết 10 tháng trước
3 0
White
2 0
Test elasticsearch search keyword Elasticsearch là một db hỗ trợ tìm kiếm mạnh mẽ, nhưng đi kèm với nó là phải phân tích query và keyword. Analyz...
Cuong Pham viết 11 tháng trước
2 0
White
2 0
Do dạo này Webstorm chẳng hiểu sao lag quá (dù máy mạnh) nên sắc phong Visual Studio Code từ IDE phụ lên IDE chính. Các plugin này để đảm bảo trải ...
Cuong Pham viết 7 tháng trước
2 0
Bài viết liên quan
White
39 7
Tăng sức mạnh cho javascript với lodash Lần này mình sẽ giới thiệu 1 thư viện javascript vô cùng bá đạo có tên là "lodash]1]", có thể nói nó là LI...
Huy Hoàng Phạm viết hơn 2 năm trước
39 7
White
21 8
Lâu không post gì muốn viết một bài dài dài về js cơ mà đau đầu quá viết mãi không xong, thôi post bài ngắn vậy :smiley: Lấy screen size ở đây tôi...
Hoàng Duy viết hơn 2 năm trước
21 8
White
3 0
Có bao giờ bạn thắc mắc, chuyện gì thực sự diễn ra khi chúng ta gõ một địa chỉ trang web (ví dụ: (Link)) lên trình duyệt và nhấn Enter? Đầu tiên, t...
Lam Pham viết 1 tháng trước
3 0
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
11 bài viết.
0 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!