phuctd99/Fetch

## Fetch
* Fetch API là một thay thế hiện đại cho XMLHttpRequest.
* Sự khác nhau chủ yếu là Fetch hoạt động theo Promises, cho phép viết gọn ràng, dễ nhớ hơn là XHR

- Vậy Promises là gì? Giả sử bạn tạo ra một hàm có tên downloadFile(url) để download một tập tin từ Internet.
- Việc download một tập tin lớn có thể mất vài phút hoặc lâu hơn Khi gọi hàm downloadFile(url) một cách đồng bộ (synchronously) nó sẽ đóng băng mọi thao tác của người dùng cho tới khi nó hoàn thành, như vậy trong khoảng thời gian tập tin đang được download người dùng không thể thao tác với ứng dụng.
Do đó không thể có hàm sau:
 var myfile = downloadFile("http://example.com/file.mp3");
- Cách giải quyết là trả về một lời hứa (Promises) thay vì tập tin
- Các trạng thái của Promises:
  +Pending   : Lời hứa đang thực hiện chưa biết kết quả
  +Fulfilled : Lời hứa hoàn thành
  +Rejected  : Lời hứa thất bại

* Các interface về Headers, Request, Response được cung cấp một cách nhất quán, Promises cho phép xâu chuỗi một cách dễ dàng hơn và async/await không có callback.
* Có thể sử dụng Cache API với các đối tượng request và response:
  - Cache api hiểu đơn giản là khi thực hiện nhiều lần 1 request tới server thì nó chỉ đến và xử lí ở server lần đầu tiên, data sẽ được lưu lại trong cache để nếu có request tương tự thì cache sẽ trả lại data mà không cần lên server.
* Có thể thực hiện "no-cors" request , nhận phản hồi từ server không có CORS
* Mặt hạn chế của Fetch:
  + Nó không hoạt động trên hầu hết các phiên bản của Internet Explorer. Ngoài ra những phiên bản của Chrome, Firefox và Safari cũ hơn 2017 có thể gặp vấn đề.
  + Timeouts không được hỗ trợ
  + Fetch không hỗ trợ các sự kiện progress. Do đó không thể báo cáo trạng thái tệp tải lên hoặc gửi form lớn.

## XMLHttpRequest (XHR)
* Đối tượng XMLHttpRequest được sử dụng để thực hiện việc toàn bộ quy trình trao đổi thông tin giữa trình duyệt (máy khách) và máy chủ mà không yêu cầu phải tải lại trang.
* Đối tượng XMLHttpRequest có nhiều tùy chọn, sự kiện và thuộc tính phản hồi khác:
  + Có thể đặt và phát hiện thời gian timeout tính bằng mili giây
  + Sự kiện progress thông báo tiến trình tải lên một tệp tin dài
* XMLHttpRequest giúp bạn gửi HTTP request đến server và hỗ trợ hai kiểu request: đồng bộ và bất đồng bộ
	* Fetch API là một thay thế hiện đại cho XMLHttpRequest.
	* Sự khác nhau chủ yếu là Fetch hoạt động theo Promises, cho phép viết gọn ràng, dễ nhớ hơn là XHR

	- Vậy Promises là gì? Giả sử bạn tạo ra một hàm có tên downloadFile(url) để download một tập tin từ Internet.
	- Việc download một tập tin lớn có thể mất vài phút hoặc lâu hơn Khi gọi hàm downloadFile(url) một cách đồng bộ (synchronously) nó sẽ đóng băng mọi thao tác của người dùng cho tới khi nó hoàn thành, như vậy trong khoảng thời gian tập tin đang được download người dùng không thể thao tác với ứng dụng.
	Do đó không thể có hàm sau:
	var myfile = downloadFile("http://example.com/file.mp3");
	- Cách giải quyết là trả về một lời hứa (Promises) thay vì tập tin
	- Các trạng thái của Promises:
	+Pending : Lời hứa đang thực hiện chưa biết kết quả
	+Fulfilled : Lời hứa hoàn thành
	+Rejected : Lời hứa thất bại

	* Các interface về Headers, Request, Response được cung cấp một cách nhất quán, Promises cho phép xâu chuỗi một cách dễ dàng hơn và async/await không có callback.
	* Có thể sử dụng Cache API với các đối tượng request và response:
	- Cache api hiểu đơn giản là khi thực hiện nhiều lần 1 request tới server thì nó chỉ đến và xử lí ở server lần đầu tiên, data sẽ được lưu lại trong cache để nếu có request tương tự thì cache sẽ trả lại data mà không cần lên server.
	* Có thể thực hiện "no-cors" request , nhận phản hồi từ server không có CORS
	* Mặt hạn chế của Fetch:
	+ Nó không hoạt động trên hầu hết các phiên bản của Internet Explorer. Ngoài ra những phiên bản của Chrome, Firefox và Safari cũ hơn 2017 có thể gặp vấn đề.
	+ Timeouts không được hỗ trợ
	+ Fetch không hỗ trợ các sự kiện progress. Do đó không thể báo cáo trạng thái tệp tải lên hoặc gửi form lớn.
	* Đối tượng XMLHttpRequest được sử dụng để thực hiện việc toàn bộ quy trình trao đổi thông tin giữa trình duyệt (máy khách) và máy chủ mà không yêu cầu phải tải lại trang.
	* Đối tượng XMLHttpRequest có nhiều tùy chọn, sự kiện và thuộc tính phản hồi khác:
	+ Có thể đặt và phát hiện thời gian timeout tính bằng mili giây
	+ Sự kiện progress thông báo tiến trình tải lên một tệp tin dài
	* XMLHttpRequest giúp bạn gửi HTTP request đến server và hỗ trợ hai kiểu request: đồng bộ và bất đồng bộ