1. Promise là gì
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <h2>Xử lý bất đồng bộ trong ES6</h2> <script> let equal = (a, b) => { return new Promise((resolve, reject) => { setTimeout(() => { if (a === b) { resolve('message_success'); } else { reject('message_error'); } }, 200); }); }; // 1. Có 3 trạng thái của Promise: pending, fulfilled, rejected let example1 = equal(4, 4); let example2 = equal(3, 5); console.log(example1); // Trạng thái "pending" => do chưa trả về resolve hoặc reject console.log(example2); // Như trên setTimeout(() => { console.log(example1); // Trạng thái "fulfilled" => do đã trả về resolve console.log(example2); // Trạng thái "rejected" => do đã trả về reject }, 500); // 2. ".then" luôn trả về 1 Promise. // Cần chú ý Có thể xử lý Promise theo 2 cách example1.then( //Có thể xử lý bắt lỗi bên trong then //Trường hợp này, nếu có lỗi xảy ra ==> hàm .then vẫn đi tiếp nếu có .then tiếp theo (res) => { console.log('Trạng thái thành công, ' + res); }, (err) => { console.log('Trạng thái thất bại, ' + err); } ); example2 //Có thể xử lý bắt lỗi bằng hàm ".catch" //Trường hợp này, nếu có lỗi xảy ra ==> bỏ qua các ".then" tiếp theo mà vào thẳng ".catch" .then((res) => { console.log('Trạng thái thành công, ' + res); }) .catch((err) => { console.log('Trạng thái thất bại, ' + err); }) .finally(() => { console.log('Finally '); //Luôn luôn được chạy }); </script> </body> </html> |
2. Bài toán tính diện tích hình thang
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <h2>Xử lý bất đồng bộ trong ES6</h2> <script> let add = (a, b) => { return new Promise((resolve, reject) => { setTimeout(() => { if (typeof a != 'number' || typeof b != 'number') { return reject("Phép cộng phải có kiểu Number") } resolve(a + b); }, 1000); }) } let multiply = (a, b) => { return new Promise((resolve, reject) => { setTimeout(() => { if (typeof a != 'number' || typeof b != 'number') { return reject("Phép nhân phải có kiểu Number") } resolve(a * b); }, 1000); }) } let divide = (a, b) => { return new Promise((resolve, reject) => { setTimeout(() => { if (typeof a != 'number' || typeof b != 'number') { return reject("Phép chia phải có kiểu Number") } if (b === 0) { return reject("Phép chia cho 0") } resolve(a / b); }, 1000); }) } //Kiểm tra thử 1 hàm ở trên // add(4, 0).then( // (res) => { console.log('Kết quả: ' + res) }, // (err) => { console.log('Lỗi: ' + err) } // ) //Bài toán làm phép tính: (a + b) * h / 2; let squareHinhThang = (a, b, h, g = 2) => { //Nếu Reject ==> hàm vẫn tiếp tục .then tiếp (lí do: .then => sẽ trả về Promise) add(a, b) .then( //nếu Resolve ==> kết quả trả về "multiply(res, 3)" ==> vẫn là 1 Promise ==> có thể then tiếp (res) => multiply(res, h), (err) => { console.log('Lỗi: ' + err) } ) .then( //nếu resolve ==> kết quả trả về "divide(res, 2)" ==> vẫn là 1 Promise ==> có thể then tiếp (res) => divide(res, g), (err) => { console.log('Lỗi: ' + err) } ) .then( (res) => { console.log('Kết quả: ' + res) }, (err) => { console.log('Lỗi: ' + err) } ) } let squareHinhThang2 = (a, b, h, g = 2) => { //Để ngắn gọn hơn, các Promise liên tiếp không cần khai báo các hàm Reject ==> tạo ra .catch(err) //Nếu gặp Reject ==> bỏ qua các then tiếp theo ==> vào thằng hàm .catch(err) add(a, b) .then((res) => multiply(res, h)) .then((res) => divide(res, g)) .then((res) => { console.log('Kết quả: ' + res) }) .catch((err) => { console.log('Lỗi: ' + err) }) } squareHinhThang2(3, 4, 5) </script> </body> </html> |
