Video học lập trình mỗi ngày

Sử dụng Promise thì tất cả chúng ta đều biết Promise không hỗ trợ về Timeouts. Điều đó có nghĩa là nếu như thời gian phản hồi một yêu cầu nào đó chậm, thì người dùng cũng không biết xử lý làm sao?

Promise timeout

Một trong những yếu tố giúp ứng dụng của bạn hoạt động ổn định đó là thời giản phản hồi của một yêu cầu. Giả sử trong quá trình mua hàng, nếu khi bạn click vào button mua hàng, và diễn trạng thái đang chờ, hệ thống kiểm kê kho có lỗi, thì đáng lẽ ra người đặt hàng cần thông báo sớm là hết hàng. Như vậy có vẻ thân thiện hơn để trạng thái xoay mãi vậy. Có nhiều biện pháp giải quyết vấn đề trên, nhưng ở đây tôi nói về Timeout trong Promise.

Promise race

Hẳn các bạn có nhờ Promise có những thằng đệ tuyệt vời và tôi có nói đến ở bài viết của tôi như Promise.any(), hay Promise.all(). Thì hôm nay, bạn sẽ sử dụng thằng đề tiếp theo để giải quyết tình huống này đó là Promise race(). Promise race() trả về một promise dù là thành công hay bị từ chối. Nghĩa là thằng nào xảy ra trước thì return về. Theo MDN 

Vì vậy chúng ta có thể nhận ra ưu điểm khi sử dụng Promise race() và đương nhiên nó lại trái ngược với promise.any(). Sau đây là ví dụ thực hiện việc promise.race timeout Đầu tiên viết một function xử lý timeout

const timeout = (prom, time) =>
	Promise.race([prom, new Promise((_r, rej) => setTimeout(rej, time))]);

Nhìn vào code trên chúng ta thấy nếu prom mà xử lý qúa thời gian cho phép time được truyền vào thì người dùng sẽ nhận được một phản hồi là failed. Cụ thể

// resolves in 500 ms
const fn = async () => {
	await new Promise((res) => setTimeout(res, 500));
	return "p2";
}

// finishes before the timeout
const result = await timeout(fn(), 1000);
// result = p2

// timeouts in 100 ms
await timeout(fn(), 100);
// error

Ok, mẹo này khá đơn giản nhưng cực kỳ hay nếu như bạn không biết thì có thể là không đơn giản chút nào phải không? Còn rất nhiều bài viết về Promise mà có thể bạn chưa biết đấy. Gắng mà học đi