How do I make an HTTP request in Javascript?

1. XMLHttpRequest object

There are a few ways to make an HTTP request in JavaScript, but one of the most popular and widely-used methods is the XMLHttpRequest object. Here's an example of how to use it to make a GET request:

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://example.com');
xhr.onload = function() {
    if (xhr.status === 200) {
        console.log(xhr.responseText);
    }
};
xhr.send();

2. Fetch API

Another popular way of making HTTP request is using the Fetch API, which is a more modern and simpler way of making request, it returns a promise and can be used like this:

fetch('https://example.com')
  .then(response => response.text())
  .then(data => console.log(data))

You can also use other libraries such as axios, superagent, request, etc.

---

3.  axios library
Here's an example of how to use the axios library to make a GET request in JavaScript:

axios.get('https://example.com')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.log(error);
  });

If you want to make a POST request, you can use the axios.post() method instead, and include the data you want to send in the request body:

axios.post('https://example.com/submit', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(response => {
    console.log(response);
  })
  .catch(error => {
    console.log(error);
  });

You need to make sure you have axios installed, if not you can install using npm by running npm install axios

You can also use axios to make other types of request like delete, put, patch.

In addition, you can also use axios to handle request headers, set timeout, and handle request interceptors, responses and errors globally.

---

4. superagent library

Here's an example of how to use the superagent library to make a GET request in JavaScript:

const request = require('superagent');

request
  .get('https://example.com')
  .then(res => {
    console.log(res.body);
  })
  .catch(err => {
    console.log(err);
  });

If you want to make a POST request, you can use the .post() method instead, and include the data you want to send in the request body:

const request = require('superagent');

request
  .post('https://example.com/submit')
  .send({
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(res => {
    console.log(res.body);
  })
  .catch(err => {
    console.log(err);
  });

You need to make sure you have superagent installed, if not you can install using npm by running npm install superagent

You can also use superagent to make other types of request like delete, put, patch. In addition, superagent also allows you to set headers, query parameters, and form data, handle request timeouts, and handle request interceptors, responses and errors.

---

5. request library 추천하지 않음

Here's an example of how to use the request library to make a GET request in JavaScript:

const request = require('request');

request('https://example.com', (error, response, body) => {
  if (!error && response.statusCode === 200) {
    console.log(body);
  } else {
    console.log(error);
  }
});

If you want to make a POST request, you can use the request.post() method instead and include the data you want to send in the request body, like this:

const request = require('request');

const options = {
  method: 'POST',
  url: 'https://example.com/submit',
  headers: {
    'content-type': 'application/x-www-form-urlencoded'
  },
  form: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
};

request(options, (error, response, body) => {
  if (!error && response.statusCode === 200) {
    console.log(body);
  } else {
    console.log(error);
  }
});

You need to make sure you have request library installed, if not you can install using npm by running npm install request

You can also use request to make other types of request like delete, put, patch. It also allows you to set headers, query parameters, handle request timeouts, and handle request interceptors, responses, and errors.

It's worth noting that the request library has been deprecated, and it's recommended to use other libraries such as axios or superagent