Axios — an easier way to an API

In my last blog post a described a “trick” I had wished I had learned while doing fetch requests during Mod 3 at Flatiron — async/await instead of chaining .then’s together to resolve promises. That would made projects with fetching a little more intuitive. But if at the time you told me I did not necessarily have to set the header’s Content-Type to application/json, or did not have to JSON.stringify the body, or other such (at-the-time) mind-bending caveats and curly-cues of Fetching, I would have thought you had some secret magic. Well, this magic does exist, and I will make believers out of you still in Mod 3.

It is a package called Axios. To use this magic, first go to terminal and install it by typing: npm install axios. Next delare it and require it as an import. As an expample, I will be changing the addPhoto function I used in a previous blog entitled CRuD in Three Hours. That blog can be found here.

First, the function is declared and the event is passed in (line 188). The event was a form with named inputs, so the values could be grabbed easily with dot notation, and these values are set to two variables (line 189 and 190). The fetch was invoked with two parameters (lines 192–204), the url and an object containing the method (193), the headers (194–197), and the JSON.stringified body(198–203). Afterwards the chaining of promises began(line 204–214) with the response first being parsed (line 204) and the data was checked for errors (206), either iterating over the errors and alerting them(209–213), or passing the valid data (the posted photo object) into a function called makePhotoList (207) followed by clearing the page.

Behold below how much simpler this can be done with Axios, and async/await. The first thing you must do is import and require it like thus.

The post method of Axious takes two arguments, the api url and the body from the original fetch. That’s it. The header is done automatically, the method is implied, and the body, while required, does not have to be JSON.stringified! So let see how we can plainly do this:

Declare the function as before (this time written as an arrow function) passing in the event however this time use the async keyword (line 188). Since we are going to need the object to post, create a const called body and put the key/value pairs in, grabbing with dot notation the values as needed (line 189–193). To get the response, we need to use the await keyword and grab the return value from what we post with Axios (line 195). To invoke this is as easy as:

axios.post(‘http://localhost:3000/photos', body);

Next, we declare a variable newPhoto, again using the keyword await, as set it to the parsed json of the respsonse (line 196). We can now handle everything we did before, checking for errors (198), and if so iterate over the array and alert each one (202). If no errors are found, do the same work as before (199–200). A little ES6 syntactic sugar I added her was the the callback function in the forEach on 202. In the case where an arrow function has only one argument, the parenthesis can be dropped. Also, if it is a one-line arrow function, the return is implicit, so no curly braces are needed for the executed block or return keyword needed. So much smoother.

Axios with async/await is truly magic! What once was 28 lines of somewhat difficult to read/write code is now rather easy to write, and more intuitive to read 16 lines of code. I hope those of you still in Mod 3 appreciate the gift. Cheers and happy coding!