Слайд 2CAN REACT DO THIS?
React itself doesn’t have any allegiance to any particular
![CAN REACT DO THIS? React itself doesn’t have any allegiance to any](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/900347/slide-1.jpg)
way of fetching data.
In fact, as far as React is concerned, it doesn’t even know there’s a “server” in the picture at all.
React simply renders components, using data from only two places: props and state.
So therefore, to use some data from the server, you need to get that data into your components’ props or state.
You can complicate this process with services and data models (er, “build abstractions”) as much as you desire, but ultimately it’s just components rendering props and state.
Слайд 3HTTP LIBRARIES
Axios
Superagent
Fetch
Etc.
![HTTP LIBRARIES Axios Superagent Fetch Etc.](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/900347/slide-2.jpg)
Слайд 4AXIOS
Axios is a very popular JavaScript library you can use to perform
![AXIOS Axios is a very popular JavaScript library you can use to](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/900347/slide-3.jpg)
HTTP requests, that works in both Browser and Node.js platforms.
Using Axios has quite a few advantages over the native Fetch API:
supports older browsers (Fetch needs a polyfill)
has a way to abort a request
has a way to set a response timeout
has built-in CSRF protection
supports upload progress
performs automatic JSON data transformation
works in Node.js
Слайд 6API
You can start an HTTP request from the axios object:
This returns a promise.
![API You can start an HTTP request from the axios object: This](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/900347/slide-5.jpg)
You can use async/await to resolve that promise to the response object:
Слайд 7API METHODS
For convenience, you will generally use the methods
axios.get()
axios.post()
axios.delete()
axios.put()
axios.patch()
axios.options()
![API METHODS For convenience, you will generally use the methods axios.get() axios.post() axios.delete() axios.put() axios.patch() axios.options()](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/900347/slide-6.jpg)
Слайд 8API PROMISE SYNTAX
If you don’t want to use async/await you can use
![API PROMISE SYNTAX If you don’t want to use async/await you can use the Promises syntax:](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/900347/slide-7.jpg)
the Promises syntax:
Слайд 9API GET PARAMETERS
With Axios you can perform this by using that URL
or
![API GET PARAMETERS With Axios you can perform this by using that](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/900347/slide-8.jpg)
you can use a params property in the options:
Слайд 10API POST REQUESTS
Performing a POST request is just like doing a GET
![API POST REQUESTS Performing a POST request is just like doing a](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/900347/slide-9.jpg)
request, but instead of axios.get, you use axios.post:
Слайд 11API ERROR HANDLING
Work with errors:
![API ERROR HANDLING Work with errors:](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/900347/slide-10.jpg)