Thủ Thuật Hướng dẫn Hướng dẫn then trong javascript Mới Nhất
Hà Trần Thảo Minh đang tìm kiếm từ khóa Hướng dẫn then trong javascript được Cập Nhật vào lúc : 2022-09-24 13:15:30 . Với phương châm chia sẻ Mẹo Hướng dẫn trong nội dung bài viết một cách Chi Tiết Mới Nhất. Nếu sau khi tham khảo nội dung bài viết vẫn ko hiểu thì hoàn toàn có thể lại phản hồi ở cuối bài để Ad lý giải và hướng dẫn lại nha.Promise được đưa vào Javascript từ ES6, đây hoàn toàn có thể xem là một kỹ thuật nâng cao giúp xử lý vấn đề sự không tương đồng bộ hiệu suất cao hơn. Trước đây kết quả của một tác vụ đồng bộ và sự không tương đồng bộ sẽ trả về một kiểu tài liệu nào đó hoặc thực hiện một Callback Function, điều này quá là thông thường bởi ta đã thấy Tính từ lúc ngày khởi đầu học về hàm trong lập trình phải không nào :). Với trường hợp thực hiện Callback Function thì sẽ dễ xảy ra lỗi Callback Hell, nghĩa là gọi callback quá nhiều và lồng nhau nên dẫn đến không trấn áp được chương trình hoặc bộ nhớ không đủ để hoạt động và sinh hoạt giải trí. Và Trong bài này tất cả chúng ta sẽ tìm hiểu về Promise, một package được đưa vào từ ES6 giúp xử lý và xử lý vấn đề Callback Hell này.
Nội dung chính- 1. Xử lý đồng bộ trong Javascript?Javascript là đơn luồngSự kiện là đa luồng2. Promise trong Javascript - ES6Tạo một PromiseThenable trong PromiseCatch trong Promise3. Lời kết
Nội dung chính
- 1. Xử lý đồng bộ
trong Javascript?Javascript là đơn luồngSự kiện là đa luồng2. Promise trong Javascript - ES6Tạo một PromiseThenable trong PromiseCatch trong Promise3. Lời kết
Bài viết này được đăng tại freetuts, không được copy dưới mọi hình thức.
1. Xử lý đồng bộ trong Javascript?
Đáng lẽ nội dung bài viết sẽ đi thẳng vấn đề là Promise luôn nhưng tôi cũng nên trình bày sơ lược chút xíu về xử lý đồng bộ.
Javascript là đơn luồng
Javascript là ngôn từ chạy một luồng duy nhất, nghĩa là một đoạn mã xử lý một trách nhiệm sẽ chỉ chạy một lần duy nhất và nếu có lần thứ hai thì nó phải chờ lần thứ nhất kết thúc, điều này tuân thủ theo nguyên tắt hoạt động và sinh hoạt giải trí đồng bộ và hoạt động và sinh hoạt giải trí này đã gây ra phiền toái cho một số trong những trường hợp. Hai người đàn ông cần cắt tóc để đi gặp cùng một tình nhân và họ đã vào cắt tại một tiệm Salon duy nhất nằm trong làng, khốn nạn ở chỗ cả hai đến cùng thời điểm nên thợ cắt tóc chỉ hoàn toàn có thể cắt một trong hai người mà thôi, người còn sót lại vui lòng chờ đến lượt. Vậy hành đồng cắt tóc của người thứ nhất đã làm ảnh hưởng đến người thứ hai, và người thứ hai sẽ mất một khoảng chừng thời gian chờ để đến lượt của tớ (ta gọi là đồng bộ - Synchronous).
Sự kiện là đa luồng
Sự kiện trong Javascript đã xử lý và xử lý vấn đề đa luồng, một hành vi sẽ xảy ra khi một sự kiện được kích hoạt. Bạn viết một chương trình gửi mail và bạn gán nó vào sự kiện click vào button, tôi click hai lần liên tục thì chương trình sẽ xử lý gửi mail 2 lần cùng thuở nào điểm, tuy nhiên sẽ rất khó để biết được bên nào sẽ xử lý xong trước.
Bài viết này được đăng tại [free tuts .net]
// Xử lý gửi email function sendEmail() $.ajax( url : "some-url", data : , success : function(result) alert('Send Success!'); ); // Gán hàm send E-Mail vào sự kiện click $('#button').click(function() sendEmail(); );Liệu sự kiện trong Javascript liệu có phải là cách tốt nhất để xử lý vấn đề này?
Sự kiện xử lý rất tuyệt vời cho những trường hợp xử lý nhiều lần trên một đối tượng như bàn phím, chuột, form. Tuy nhiên với sự kiện thì thường ta sẽ không quan tâm đến chuyện gì sẽ xảy ra cho tới khi ta tương hỗ update một Listener (gửi mail).
// Xử lý gửi email function sendEmail() $.ajax( url : "some-url", data : , success : function(result) alert('Send Success!'); , error : function(eror) alert('Send Error!'); ); // Khi chưa tương hỗ update listener $('#button').click(function() // Tôi chả quan tâm nó làm cái gì cả ); // Khi tương hỗ update listener // Gán hàm send E-Mail vào sự kiện click $('#button').click(function() // Tôi quan tâm đến thao tác gửi email có thành công hay là không? // Lúc này phụ thuộc vào hàm callback sendEmail sendEmail(); );Và việc xử lý những events này là một hành vi sự không tương đồng bộ (Async).
Một ví dụ khác là lúc load một hình ảnh thì có sự kiện ready(), ta sẽ áp dụng sự kiện này để đổi hình mặc định nếu như hình không tồn tại.
Note: Các ví dụ dưới đây có sử dụng jQuery.
$('img').ready().then(function() // loaded , function() // failed $(this).attr('src', 'default.png'); );Và nếu áp dụng Promise trong ES6 thì nó rất đơn giản.
Promise.all([$('img')]).then(function() // all loaded , function(img) $(img).attr('src', 'default.png'); );Vậy thắc mắc của chủ đề này là làm thế nào để quản lý tốt kết quả của một hành vi sự không tương đồng bộ (Async)? Để trả lời thắc mắc này thì ta sẽ nghiên cứu và phân tích về Promise.
2. Promise trong Javascript - ES6
Vậy promise sinh ra để xử lý kết quả của một hành vi rõ ràng, kết quả của mỗi hành vi sẽ là thành công hoặc thất bại và Promise sẽ giúp tất cả chúng ta xử lý và xử lý câu hỏi "Nếu thành công thì làm gì? Nếu thất bại thì làm gì?". Cả hai thắc mắc này ta gọi là một hành vi gọi lại (callback action).
Như ở ví dụ trên mình demo việc xử lý hành vi load hình ảnh của trình duyệt, nếu hình ảnh load không được thì sẽ làm thao tác tương hỗ update hình mặc định, đây là một hành vi callback. Nói trong lập trình thì đây là một callback function.
Khi một Promise được khởi tạo thì nó có một trong ba trạng thái sau:
- Fulfilled
Hành động xử lý xông và thành côngRejected Hành động xử lý xong và thất bạiPending Hành động đang chờ xử lý hoặc bị từ chối
Trong số đó hai trạng thái Reject và Fulfilled ta gọi là Settled, tức là đã xử lý xong.
Bây giờ ta sẽ tìm hiểu về cách khởi tạo Promise.
Tạo một Promise
Để tạo một Promise bạn sử dụng cú pháp sau:
var promise = new Promise(callback);Trong số đó callback là một function có hai tham số truyền vào như sau:
var promise = new Promise(function(resolve, reject) );Trong số đó:
- resolve là một hàm callback xử lý cho hành vi thành công.reject là một hàm callback xử lý cho hành vi thất bại.
Thenable trong Promise
Thenable không còn gì to tác mà nó là một phương thức ghi nhận kết quả của trạng thái (thành công hoặc thất bại) mà ta khai báo ở Reject và Resolve. Nó có hai tham số truyền vào là 2 callback function. Tham số thứ nhất xử lý cho Resolve và tham số thứ 2 xử lý cho Reject.
var promise = new Promise(function(resolve, reject) resolve('Success'); // OR reject('Error'); ); promise.then( function(success) // Success , function(error) // Error );Ví dụ: Demo thao tác Resolve và Reject
var promise = new Promise(function(resolve, reject) resolve('Success!'); ); promise.then( function(success) console.log(success); );Với đoạn code này chạy lên bạn sẽ nhận giá trị là Success!.
Bây giờ ta thử với một đoạn Reject.
var promise = new Promise(function(resolve, reject) reject('Error!'); ); promise.then( function(success) console.log(success); , function(error) console.log(error); );Chạy đoạn code này lên sẽ nhận giá trị là Error!.
Vậy hai hàm callback trong then chỉ xảy ra một trong hai mà thôi, điều này tương ứng ở Promise sẽ khai báo một là Resolve và hai là Reject, nếu khai báo cả hai thì nó chỉ có tác dụng với khai báo đầu tiên.
var promise = new Promise(function(resolve, reject) reject('Error!'); resolve('Success!'); ); promise.then( function(success) console.log(success); , function(error) console.log(error); );Kết quả:
Chạy lên nó cũng chỉ nhận đúng một giá trị là Error! => callback error đã hoạt động và sinh hoạt giải trí.
Catch trong Promise
then có hai tham số callbacks đó là success và error. Tuy nhiên bạn cũng hoàn toàn có thể sử dụng phương thức catch để bắt lỗi.
Ví dụ:
var promise = new Promise(function(resolve, reject) reject('Error!'); ); promise .then(function(message) console.log(message); ) .catch(function(message) console.log(message); );Chạy lên kết quả sẽ là Error!.
Câu hỏi giờ đây đặt ra là nếu ta vừa truyền callback error và vừa sử dụng catch thì thế nào? Câu trả lời nó sẽ chạy hàm callback error và catche sẽ không chạy.
var promise = new Promise(function(resolve, reject) reject('Error!'); ); promise .then(function(message) console.log(message); , function(message) console.log('Callback Error!'); console.log(message); ) .catch(function(message) console.log('Catch!'); console.log(message); );Kết quả mình chụp hình luôn cho những bạn thấy rõ hơn.
3. Lời kết
Vậy Promise là một gói dùng để quản lý kết quả trả về của một hành vi Asycn (sự không tương đồng bộ) và nó vừa được tương hỗ update vào ngôn từ Javascript từ version ES6. Việc nắm vững Promise không hề đơn giản và không phải ai cũng làm rõ, vì vậy với nội dung bài viết này sẽ giúp bạn có cái nhìn tổng quan về Promise trong Javascript nói chung và trong ES6 nói riêng.
Bài này vẫn chưa kết thúc mà vẫn còn phần 2 nữa và mình sẽ trình bày ở bài tiếp theo, mời những bạn theo dõi.
Tải thêm tài liệu liên quan đến nội dung bài viết Hướng dẫn then trong javascript programming javascript Then trong Javascript Promise trong Javascript Async/await trong JavaScript Promise JavaScript example Promise then catch Promise JavaScript Viblo