Axios - Get and Post

#javascript #beginners

While learning javascript I was taught Fetch as a way to get data, post data, update data, and delete pieces of data. Fetch is great! It isn't too hard to use and it's now built into javascript. I started to think is there a better way I can get, post, update, and delete my data? There are always intelligent programmers creating new libraries to make our lives easier. That's when I found Axios.

What you will learn from this Blog Post

You will learn what Axios is, How to install it for your project, how to perform a GET and Post request using it. The goal of this blog post is to log data to the console.

What is Axios?

Axios is similar to fetch. You can use either of them when creating a new javascript project that requires you to have some data. One downside of Axios is that it isn't natively built into javascript, so you will need to add the required script tag to your HTML file. One downside of fetch is that when send a post request you have to stringify the response body, Axio's data contains the object already.

What are some Axios features?

Make XMLHttpRequests from the browser
Supports the Promise API
Transform request and response data
Automatic transforms for JSON data
Client side support for protecting against XSRF (Cross-site request forgery) For more checkout From Axios Docs on Github

How to set up Axios for your next project?

4 different ways to install Axios

Using npm:



$ npm install axios

Using bower:



$ bower install axios

Using yarn:



$ yarn add axios

Using cdn:



<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

How to perform a GET request with Axios

In this example we will be sending GET requests to the jsonplaceholder API. We are going to handle promises with .then syntax, feel free to use asnyc/await syntax if you would like.

I'll be using the last method which requires us to include a script tag in our HTML file.

In our app.js file we won't be add any button or eventListeners, nothing fancy like that.



const getPosts = () => {
  axios
    .get("https://jsonplaceholder.typicode.com/posts")
    .then((response) => {
      console.log(response)
    })
    .catch((error) => {
      console.error(error)
    });
};
getPosts();

Success!

I made an arrow function getPosts. Inside the function I user axios similar to how we would in fetch. But where did axios come from? We didn't declare it anywhere or initialize it anywhere in our app.js file. The script tag we included earlier allowed us to use axios. The .get sends a get request to the specified url. This returns us a promise which is why we use .then to deal with it. Pretty simple!

How to perform a POST request with Axios

A post request is pretty similar to a get request.



const postPosts = () => {
  axios
    .post("https://jsonplaceholder.typicode.com/posts", {
      title: "Fred",
      body: "Fred is awesome"
    })
    .then(response => {
      console.log(response);
    })
    .catch(error => {
      console.error(error);
    });
};
postPosts();

The syntax looks very familiar but with a couple changes and additions. Here we change the function expression name to postPosts. Instead .get from before we use .post because we're sending a post request to the server. In addition to the post request, we have to tell axios what to send. These are the params we are going to send to the server:



{
 title: "Fred",
 body: "Fred is awesome"
}

We are telling the server, to add this information to your server. Since we are using jsonplaceholder we won't be posting to the actual server but you can see the id go from 100 to 101. If you see id: 101 you have successfully posted to the server.

Which one should you use?

It depends. On one hand, Fetch is built into javascript for you and will probably never go away. Axios is a library and built by someone else, which means that it can stop getting updates or be replaced at any time. Axios does a lot of things for us, so we don't have to think about it and can focus on using the data. It shortens the number of lines of code that is in our javascript file, which in turn decreases the likelihood of a bug occurring.

Thank You for reading! If I find anything that is incorrect or want to voice your opinion on something pertaining to the blog post please do.