Lesson 8. Working with external API

The main thing in the lesson

•

To interact with the mini-application server in the client part, it is convenient to use any library. In our example, this Axios .

To install, run one of the following commands depending on which package manager you use:

yarn
yarn add axios

npm
npm install axios --save
•

When creating an object axios You can specify the address of the server to which requests will be sent, as well as the headers common to the requests sent. It’s convenient to use environment variables to specify a basic URL for queries.
•

To send HTTP requests, we created a special function makeRequest . You can find its code in the repository, which contains the source code for the lesson.
•

Networking is always asynchronous. Therefore, when working with queries, you will have to use keywords async , await and facilities Promise .
•

To store data, we use a simple approach — an object State which stores the state of the component. It is used to work with it useState .
•

In our example, we use the data load indicator.
•

To intercept and handle errors that may occur during the execution of requests, we use the construction try...catch...finally . A good practice when an error occurs is to save information about it and display it to the user with advice on what to do next, for example, refresh the page or restart the application.

:::