{"id":18508,"date":"2020-06-25T12:41:50","date_gmt":"2020-06-25T19:41:50","guid":{"rendered":"https:\/\/careerkarma.com\/blog\/?p=18508"},"modified":"2023-12-01T03:27:29","modified_gmt":"2023-12-01T11:27:29","slug":"axios-get","status":"publish","type":"post","link":"https:\/\/careerkarma.com\/blog\/axios-get\/","title":{"rendered":"How to Make axios GET and POST Requests"},"content":{"rendered":"\n

When you\u2019re building a web application, there may come a time when you want to perform a HTTP request to access an external resource. For instance, suppose you are making a blog. You may want to call an API to retrieve a list of comments to show on each blog post.
<\/p>\n\n\n\n

Axios is a popular JavaScript library you can use to make web requests. In this guide, we’ll explain how to use axios to make a GET request. We\u2019ll walk through a few examples to showcase how axios works and how you can use it in your code.<\/p>\n\n\n\n

Why Axios?<\/h2>\n\n\n\n

Axios is a promise-based library that makes it easy to make web requests.
<\/p>\n\n\n\n

You may be wondering: why should I use axios over one of the many other web request libraries out there? It\u2019s true that there are other libraries like fetch that you can use to make GET requests, but axios has a number of advantages these libraries don\u2019t have.
<\/p>\n\n\n\n

Axios supports older browsers, which will allow you to create a more accessible user experience. Axios also comes with built-in CSRF protection to prevent vulnerabilities. It also works in Node.js, which makes it great if you\u2019re developing both front-end or back-end web applications.<\/p>\n\n\n\n

How to Install Axios<\/h2>\n\n\n\n

Before you make a GET request using axios, you\u2019ll have to install the library. You can do so using the following command:<\/p>\n\n\n\n

npm install axios --save<\/pre><\/div>\n\n\n\n
This command will install axios and save it to your local package.json file. Now you\u2019re ready to start using the axios library.<\/p>\n\n\n\n
How to Make a Request Using Axios<\/h2>\n\n\n\n
Getting started with axios is simple. To make a web request, all you need to do is specify the URL from which you want to request data and the method you want to use.
<\/p>\n\n\n\n
Suppose you want to retrieve a list of random facts about cats from the cat-facts<\/a> API. We could do so using this code:<\/p>\n\n\n\n
axios ({\n\turl: \"https:\/\/cat-fact.herokuapp.com\/facts\",\n\tmethod: \"GET\"\n)}<\/pre><\/div>\n\n\n\n
This code returns a promise which represents a request that hasn\u2019t been completed yet. In order to retrieve data from this HTTP request, you would use an async\/await function like so:<\/p>\n\n\n\n
const axios = require(\"axios\");\nasync function getCatFacts() {\n\tconst response = await axios ({\n\turl: \"https:\/\/cat-fact.herokuapp.com\/facts\",\n\tmethod: \"GET\"\n})\nconsole.log(response.data)\n}\ngetCatFacts()<\/pre><\/div>\n\n\n\n
The server responded with a list of cat facts.
<\/p>\n\n\n\n
When we call this function, an HTTP GET request is made to the cat-facts API. We use an async\/await function so our program does not continue until the web request has been completed. This is because axios returns a promise first. It returns the data from the request it makes after that request has been completed.
<\/p>\n\n\n\n
The axios library comes with a few shorthand commands you can use to make web requests:
<\/p>\n\n\n\n