Http Get Request in JavaScript

HTTP GET request in JavaScript?

Browsers (and Dashcode) provide an XMLHttpRequest object which can be used to make HTTP requests from JavaScript:

function httpGet(theUrl)
{
    var xmlHttp = new XMLHttpRequest();
    xmlHttp.open( "GET", theUrl, false ); // false for synchronous request
    xmlHttp.send( null );
    return xmlHttp.responseText;
}

However, synchronous requests are discouraged and will generate a warning along the lines of:

Note: Starting with Gecko 30.0 (Firefox 30.0 / Thunderbird 30.0 / SeaMonkey 2.27), synchronous requests on the main thread have been deprecated due to the negative effects to the user experience.

You should make an asynchronous request and handle the response inside an event handler.

function httpGetAsync(theUrl, callback)
{
    var xmlHttp = new XMLHttpRequest();
    xmlHttp.onreadystatechange = function() { 
        if (xmlHttp.readyState == 4 && xmlHttp.status == 200)
            callback(xmlHttp.responseText);
    }
    xmlHttp.open("GET", theUrl, true); // true for asynchronous 
    xmlHttp.send(null);
}

Send a GET request with a body in JavaScript (XMLHttpRequest)

No, it is not possible to send a GET request with a body in JavaScript.

it looks like the payload is simply not sent

That is correct. This is defined in the specification:

The send(body) method must run these steps:

...

3. If the request method is GET or HEAD, set body to null.

Also a request via the Fetch API does not allow a body. From the specification:

34. If either init["body"] exists and is non-null or inputBody is non-null, and request’s method is GET or HEAD, then throw a TypeError.

The best would be if the API could be fixed.

If that is not possible, you could add a server-side script that you can use as a proxy that passes the requests to the API. You can than call this script with a GET request with the data in the URL instead of the body or using a POST request with a body. This script then can make the GET request with a body (as long as the chosen language supports it).

Get data from HTTP GET request

With Axios you can path query params to GET call in 2 different ways:

1. By putting them into the endpoint path

await axios.get('/endpoint?key=value&key2=value2');

2. Add them to the config argument in params property object as key-value

await axios.get('/endpoint', { params: {key: 'value', key2: 'value2' }});

Your confusion absolutely makes sense, you try to use same way to pass param for get and post methods, but in Axios these methods have different number of arguments: post(url, data, config), get(url, config)

Let's return to your example:
var response = await axios.get('/endpoint',{ key: 'value' });

So now you can see that { key: 'value' } object that you pass as a second argument is request config and isn't a data.

You can learn more about request config params here - https://github.com/axios/axios#request-config

How to get the type of the HTTP request

There is no way for client-side JS to determine the request method used to load the current page.

---

Related Topics