TGIF fetch API

A brief summary on fetch API.

Check the updated online version:
https://codekult.github.io/fetch-api/

Transcript

1. — A brief summary on — fetch API
2. Why a new API?
3. Because of…
4. X M L H t t p R e q u e s t v a r x h r = n e w X M L H t t p R e q u e s t ( ) ; x h r . o p e n ( ' G E T ' , u r l ) ; x h r . r e s p o n s e T y p e = ' j s o n ' ; x h r . o n l o a d = f u n c t i o n ( ) { c o n s o l e . l o g ( x h r . r e s p o n s e ) ; } ; x h r . o n e r r o r = f u n c t i o n ( ) { c o n s o l e . l o g ( " B o o o " ) ; } ; x h r . s e n d ( ) ;
5. Get rid of jQuery dependency
6. As all new async APIs proposals, f e t c h is based upon and can benefit from the inertia with that other APIs and new features. promises
7. Example: f e t c h + , f e t c h + a s y n c functions, f e t c h in Service Worker, and more coming… generators
8. Basic usage
9. G E T f e t c h ( u r l ) . t h e n ( r e s = > r e s . j s o n ( ) , e r r = > { t h r o w ( e r r ) } ) . t h e n ( d a t a = > h a n d l e D a t a ( d a t a ) ) . c a t c h ( e r r = > h a n d l e E r r o r ( e r r ) ) ;
10. P O S T f e t c h ( u r l , { m e t h o d : p o s t , h e a d e r s : $ { h e a d e r s } , b o d y : $ { b o d y } } ) . t h e n ( r e s = > r e s . j s o n ( ) , e r r = > t h r o w ( e r r ) ) . t h e n ( d a t a = > h a n d l e D a t a ( d a t a ) ) . c a t c h ( e r r = > h a n d l e E r r o r ( e r r ) ) ;
11. Don’t forget to check response status f e t c h ( u r l ) . t h e n ( r e s = > { i f ( r e s . s t a t u s = = = 2 0 0 ) { r e t u r n r e s . j s o n ( ) } t h r o w ( r e s . s t a t u s T e x t ) ; } , e r r = > { t h r o w ( e r r ) } ) . t h e n ( d a t a = > h a n d l e D a t a ( d a t a ) ) . c a t c h ( e r r = > h a n d l e E r r o r ( e r r ) ) ;
12. Response types, metadata and headers
13. A fetch return a . response
14. A response type can be one of the following: b a s i c , c o r s , and o p a q u e . Also could be d e f a u l t or e r r o r , but these types are of a different kind.
15. We can access response metadata. r e s p o n s e . s t a t u s ; r e s p o n s e . s t a t u s T e x t ; r e s p o n s e . t y p e ; r e s p o n s e . u r l ;
16. Also we can get or set headers. r e s p o n s e . h e a d e r s . g e t ( ' C o n t e n t - T y p e ' ) ; r e s p o n s e . h e a d e r s . g e t ( ' D a t e ' ) f e t c h ( u r l , { m e t h o d : ' p o s t ' , h e a d e r s : { " C o n t e n t - t y p e " : " a p p l i c a t i o n / x - w w w - f o r m - u r l e n c o d e d ; c h a r s e t = U T F - 8 " } , b o d y : ' f o o = b a r & l o r e m = i p s u m ' } ) / / …
17. Let's see a more real example
18. Streams
19. r e s p o n s e . b o d y is a . R e a d a b l e S t r e a m
20. Streams are nice because they allow us to handle the response data as its arrive (think on media types like video, or large datasets).
21. f e t c h streams support isn’t complete yet. But we can read r e s p o n s e . b o d y stream with a set of built-in readers.
22. / / O n e r e a d e r f o r e a c h ` r e s p o n s e . b o d y ` t y p e . / / A l l o f t h e m r e t u r n a p r o m i s e . r e s p o n s e . a r r a y B u f f e r ( ) ; r e s p o n s e . b l o b ( ) ; r e s p o n s e . f o r m D a t a ( ) ; r e s p o n s e . j s o n ( ) ; r e s p o n s e . t e x t ( ) ;
23. Tasks, . c a n c e l and . f i n a l l y
24. f e t c h API is still a work in progress.
25. An update that is coming is the inclusion of a promise’s subclass called tasks.
26. Subclassing allows an evolving promise API, with backwards compatibility.
27. A task is a cancelable promise, and we can cancel it with . c a n c e l
28. So a task has a new state added to f u l l f i l e d , p e n d i n g or r e j e c t e d . It’s c a n c e l e d .
29. A promise's t h e n always returns a new promise.
30. But with tasks with can handle that final promise with . f i n a l l y
31. More coming into f e t c h …
32. Progress indication. Full support for streams.
33. Further reading
34. by Matt Gaunt . by Jake Archibald. by David Walsh. on WHATWG. by Domenic Denicola. . Introduction to Fetch That’s so fetch! f e t c h API Streams Async Frontiers GitHub f e t c h polyfill
35. Thanks!