Back to all guides

How to send query parameters using Axios?

API

•

Tue Oct 11 2022

•

3 min read

Saad Irfan

Saad Irfan

There are multiple ways to send data to an API. If the request is creating or updating the database, we can use the request body to send the data. Whereas, if the API request is requesting some data based on specific parameters, we can use query parameters instead.

Axios is one of the most popular HTTP libraries used globally by millions, if not billions, of projects. In this piece, let’s look at how we can send query parameters using Axios. So without any further ado, let’s jump in!

Query Parameters

It is the most common way to send data to the server. You can send query parameters in two ways with Axios:

  1. We can extend the base URL of the API by adding a query string at the end that includes field/value pairs.
  2. We can also send an object with the API request that holds a parameter object with all query parameters.

A query string is a string that starts with a ? and includes parameters listed one after the other, separated by &. An example query string looks like this:

sh
​​https://baseurl?guests=3&days=2&time=1400

Send Query Parameters using Axios

Let’s do this in steps to make things simpler.

→ STEP #1

We need an API that we can call to learn how to send query parameters using Axios. For this, we can use RapidAPI Hub – the world’s largest API Hub with over 35,000+ APIs. Go ahead and sign up. Once you are done, you will have access to thousands of APIs.

I have already found an API that we can use. It’s called Body Mass Index (BMI) Calculator API. Please go ahead and subscribe to it.

→ STEP #2.1

Please make sure you have Axios installed in your project. Axios provides functions for each HTTP method like axios.post for POST Axios requests. For this guide, we will use axios.get to make a GET request to the API. Create a JavaScript file. Let’s call it index.js and paste the following code there:

js
const axios = require('axios');
axios
    .get(`https://body-mass-index-bmi-calculator.p.rapidapi.com/metric?weight=150&height=1.83`, {
        headers: {
            'X-RapidAPI-Key': 'your-rapidapi-key',
            'X-RapidAPI-Host': 'body-mass-index-bmi-calculator.p.rapidapi.com',
        },
    })
    .then(function (response) {
        console.log(response.data);
    })
    .catch(function (error) {
        console.error(error);
    });

There are two query parameters, i.e., weight and height. I have extended the base URL with the query string using ? and & to send the query parameters to the server along with the GET API request.

This is one way to send query parameters using Axios.

→ STEP #2.2

The other way to send query parameters to a GET request is by sending a params object along with it. Here is how you can do it.

js
const axios = require('axios');
axios
    .get(`https://body-mass-index-bmi-calculator.p.rapidapi.com/metric`, {
        params: { weight: '150', height: '1.83' },
        headers: {
            'X-RapidAPI-Key': 'your-rapidapi-key',
            'X-RapidAPI-Host': 'body-mass-index-bmi-calculator.p.rapidapi.com',
        },
    })
    .then(function (response) {
        console.log(response.data);
    })
    .catch(function (error) {
        console.error(error);
    });

We are sending an object as a second parameter to the GET request. The object contains a params object that holds all the query parameters as a key/value pair.

Wrap up

That’s all, folks! This is how simple it is to send query parameters using Axios. You can send them via any of the two ways I showed you in this piece.

# axios# query parameters axios# query paramters# send query parameters axios