In my experience finding a dependency that can do all the heavy lifting for you makes your life a lot easier. (as long as it's maintained and has some good documentation) It means you don't need to grasp all the nuts and bolts of your language and you just need to understand what your trying to do and how your dependency does that for you.
This is where Axios comes in.
So if you have already created your beginners React app (at the moment I'm working in React so all my examples go down that route) you can find the blog post here. All you need to do is run:
npm i axios
and your package.json file will have the dependency inside of it. This post isn't going to be an inside out of how to use as that will come in a later post, but more of a what it can offer.
GET request:
What is a GET request? Well as you can imagine it's a way for your to pull data from another API/ endpoint. This is one of the core methods of a RESTful API. What you need to do with a GET request is relatively simple. Hit the endpoint and capture the data. That's all there is to it. Here is an example of me calling a Dungeons and Dragons API on Postman(a piece of software that will do all the requesting for you, add headers, authorization etc good for testing). You can see the URL used and the data returned:
All we need to do is have a way to replicate that in our project. Que Axios.
Here is the same example as what I did in Postman however it's now in my project and can be used to pull data from that URL. If the call is successful, I will now have access to the parameter response, response will be you guessed it the response from the URL. So now I can do whatever I like with that data, I can save it in the state. I could use it in a table or I could save it locally to a file, the world is your oyster. But what if my call fails :(. Don't worry Axios gives you the error function, we have the error parameter and with this, we can capture what error it was, what status it was, and the reasoning behind it and we can then handle it to make sure the user doesn't see the error or sees an error that they can understand. Some endpoints accept parameters such as IDs and sometimes these IDs are misspelled or don't exist this error function will allow you to handle such things. Remember to check the API documentation on any common errors and how they handle it so you can do the same.
That is all you need to worry about when it comes to GET requests.
But what if I need to send data to an API, what if it expects something from me. That's where POST requests come in.
POST request:
A POST request allows you to send data to an API/endpoint that needs that information for it to be successful. So for example, the API needs a JSON object of a firstName and a lastName. It will then use that to go off and find out how many React books I've taken out and not give back at the Library and send that data to your project. POST allows you to send this data over.
The example above is exactly as I described. The URL is passed and the JSON structure is passed over. Like the GET request, it has the functionality of a successful response and what you want to do with that and it has the error response. One thing I would say is that POST generally (or for me) fail more than GETs. So make sure the JSON you are sending is what the API wants, check your spelling, and if there is any validation needed on the fields. (Validation for example would be the firstName has to be 5 letters long and have an S in it, why I don't know but some APIs are weird).
That is all you need to know about POSTs.
So now you can GET data you and POST data and receive the response back. What other functionality would you need? What if I have a database that I need to add some data to or update some data in. A POST wouldn't be needed as we won't be expecting data back so what is it. This is where PUT comes in.
PUT request:
A PUT request allows you to PUT data wherever you need it. For this example a database. It will either update the current data that is there for example if you PUT to an identifier that already exists or if it doesn't already exist it will create a new one.
so this time my URL goes to a database and I'm creating a new customer for the library called Scott MacTest. He will be entered into the database and if he ever needs to change his name I can run the request again and it will update that user. The response this time we don't really care about all we need to do is check that it was a status of 200 and it has updated correctly. Other than that we will catch any errors that we need to and determine the best solution for them.
Your next question is you have told me I can GET, POST, and now PUT which adds or updates, how can I remove something? This is where DELETE comes in:
DELETE request:
A DELETE request allows you to delete items from a database or store of data. It's as simple as that. Your deleting a resource on a server.
this time we are going to delete Scott MacTest, he has returned all his books and wants to quit the book-reading world (not recommended). This will delete the resource from the server. So any requests for PUTs to his name, or GETs to get back what books he has will likely get a status of 404 (Not Found). The response this time we don't really care about all we need to do is check that it was a status of 200 and it has deleted the resource. Other than that we will catch any errors that we need to and determine the best solution for them.
Now you have the ability to do all most anything you need to do on a project. There are other methods and use cases for them methods however these 4 give you the core concepts. The ability to get and receive data, update and delete server resources, what else would you need.
Scott
0 Comments