then trong JavaScript là một phương thức của đối tượng Promise, nó cho phép chúng ta thực hiện các tác vụ sau khi một promise được hoàn thành (fulfilled) hoặc không thành công (rejected). Hãy cùng W3seo tìm hiểu về phương thức này.
Lợi ích khi sử dụng phương thức then ?
Sử dụng then trong JavaScript có nhiều lợi ích như sau:
- Tách riêng các tác vụ: Khi sử dụng then, chúng ta có thể tách riêng các tác vụ và gọi chúng theo thứ tự, giúp cho mã dễ đọc và dễ quản lý hơn.
- Tránh callback hell: Khi sử dụng then, chúng ta không cần phải sử dụng nhiều callback nested lồng nhau, giúp cho mã dễ đọc và dễ quản lý hơn.
- Lập chuỗi promise: Sử dụng then cho phép chúng ta lập chuỗi các promise và chạy chúng theo thứ tự, giúp cho mã dễ đọc và dễ quản lý hơn.
- Xử lý lỗi: Sử dụng then cho phép chúng ta xử lý các lỗi một cách dễ dàng và sắp xếp các xử lý lỗi theo thứ tự.
- Dễ dàng gắn thêm các tác vụ: Sử dụng then cho phép chúng ta gắn thêm các tác vụ vào một promise một cách dễ dàng và sắp xếp chúng theo thứ tự.
Sử dụng then trong JavaScript như thế nào ?
Sử dụng then trong JavaScript có thể thực hiện như sau:
- Tạo một promise: Đầu tiên, chúng ta cần tạo một promise bằng cách sử dụng constructor Promise. Ví dụ:
const promise = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('Hello World!');
}, 1000);
});- Sử dụng then: Sau đó, chúng ta có thể sử dụng then để thực hiện các tác vụ sau khi promise được hoàn thành (fulfilled) hoặc không thành công (rejected). Ví dụ:
promise.then((value) => {
console.log(value);
}, (error) => {
console.log(error);
});Trong ví dụ trên, sau 1s sẽ in ra “Hello World!”
- Chạy nhiều tác vụ: Chúng ta có thể chạy nhiều tác vụ liên tiếp bằng cách sử dụng then nhiều lần. Ví dụ:
promise.then(value => {
console.log(value);
return value + ' How are you?';
}).then(value2 => console.log(value2));Trong ví dụ trên, sau 1s sẽ in ra “Hello World!” và “Hello World! How are you?”
Lưu ý: Chúng ta cần chú ý đến việc trả về một giá trị mới trong mỗi hàm then, để chạy tiếp với hàm tiếp tho.
Lưu ý khi sử dụng phương thức then
Khi sử dụng then trong JavaScript, chúng ta cần chú ý đến các điểm sau:
- Trả về giá trị: Mỗi lần sử dụng then, chúng ta cần trả về một giá trị mới để tiếp tục chạy các tác vụ tiếp theo.
- Xử lý lỗi: Chúng ta cần xử lý các lỗi một cách chính xác, đặc biệt là khi sử dụng nhiều then liên tiếp.
- Sử dụng catch: Chúng ta có thể sử dụng catch để xử lý các lỗi một cách chung cho toàn bộ chuỗi promise.
- Chú ý đến thứ tự: Chúng ta cần chú ý đến thứ tự các tác vụ, đặc biệt là khi sử dụng nhiều then liên tiếp.
- Sử dụng async/await: Nếu chúng ta cần chạy các tác vụ bất đồng bộ, chúng ta có thể sử dụng async/await để viết mã dễ đọc hơn.
- Chú ý đến việc chạy nhiều lần: Chúng ta cần chú ý đến việc chạy nhiều lần các tác vụ khi gọi then trên cùng một promise, đặc biệt là khi chúng ta chạy các tác vụ async.
Các trường hợp thường sử dụng then trong JavaScript
Ví dụ 1: Sử dụng then để lấy dữ liệu từ một API
fetch('https://jsonplaceholder.typicode.com/todos/1')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));Ví dụ 2: Sử dụng then để chạy các tác vụ liên tiếp
const promise = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('Hello World!');
}, 1000);
});
promise.then(value => {
console.log(value);
return value + ' How are you?';
}).then(value2 => console.log(value2));Ví dụ 3: Sử dụng then và catch để xử lý lỗi
const promise = new Promise((resolve, reject) => {
setTimeout(() => {
reject('Error!');
}, 1000);
});
promise
.then(value => console.log(value))
.catch(error => console.error(error));Ví dụ 4: Sử dụng then với async/await
async function getData() {
try {
const response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
const data = await response.json();
console.log(data);
} catch (error) {
console.error(error);
}
}
getData();Trong các ví dụ trên chúng ta có thể thấy rằng sử dụng then cho phép chúng ta chạy các tác vụ theo thứ tự và tránh việc callback hell, xử lý lỗi một cách dễ dàng và gắn thêm các tác vụ vào một promise một cách dễ dàng và sắp xếp chúng theo thứ tự.
Kết luận
sử dụng then trong JavaScript là một trong những cách tiên tiến nhất để xử lý các tác vụ bất đồng bộ. Nó cho phép chúng ta chạy các tác vụ theo thứ tự và tránh việc callback hell, xử lý lỗi một cách dễ dàng và gắn thêm các tác vụ vào một promise một cách dễ dàng và sắp xếp chúng theo thứ tự
Để sử dụng then một cách hiệu quả, chúng ta cần chú ý đến việc trả về giá trị mới mỗi lần sử dụng, xử lý lỗi một cách chính xác, sử dụng catch để xử lý lỗi chung cho toàn bộ chuỗi promise, chú ý đến thứ tự các tác vụ và sử dụng async/await nếu cần chạy các tác vụ bất đồng bộ.
Nói chung, sử dụng then trong JavaScript là một cách tiên tiến, dễ dàng và mạnh mẽ để xử lý các tác vụ bất đồng bộ, giúp cho chúng ta viết mã dễ đọc và dễ quản lý hơn.
