Fetch API Talk

This is my first talk detailing the technologies behind AJAX and fetch as a modern replacement for XMLHttpRequest

Transcript

1. People, shall we fetch? @chiamaka
2. What is AJAX? Stands for: Asynchronous Javascript and XML Consists of: - HTML & CSS - DOM (Document Object Model) - JavaScript (In browser) - XML JSON - XMLHttpRequest (Most Important)
3. HTML & CSS
4. DOM & the JavaScript DOM API
5. What the browser transforms it into
7. XMLHttpRequest XHR is an object that lets you interact with the server. 1. Create XHR object 2. Prepare request 3. Send request 4. Get response var xhr = new XMLHttpRequest() xhr.open xhr.setRequestHeader xhr.send xhr.responseText
8. XHR code snippet
9. What is fetch? fetch is a modern replacement for XHR. Why does XHR need a replacement? - Simpler and Cleaner API design - It makes use of es6, Promises(eliminates callback hell) - Lower level implementation. Access to the request/response primitives, no-cors requests and access to low-level body stream - Bonus reason: XHR has been deprecated in serviceworkers
10. fetch code snippet https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch
11. Demo
13. Some things you should know about fetch 1. You can’t abort/cancel a request unlike XHR 2. fetch() with `no-cors` mode on non-serviceworkers are disabled
14. Thank you