How do I make an HTTP request in Javascript?

you can use the built-in XMLHttpRequest object or the newer fetch() API. Here’s an example of each approach:

Using XMLHttpRequest:

javascriptCopy codeconst xhr = new XMLHttpRequest();
xhr.open('GET', 'https://example.com/api/articles/1');
xhr.onreadystatechange = function() {
  if (xhr.readyState === XMLHttpRequest.DONE) {
    if (xhr.status === 200) {
      const article = JSON.parse(xhr.responseText);
      console.log(article);
    } else {
      console.error('Error retrieving article:', xhr.status);
    }
  }
};
xhr.send();

This code creates a new XMLHttpRequest object, sets the HTTP method and URL for the request, and defines a callback function to handle the response. When the readyState of the request changes (indicating that a response has been received), the callback function checks the HTTP status code to see if the request was successful (status code 200) or not, and then parses the response as JSON and logs it to the console (in the case of success).

Using fetch:

javascriptCopy codefetch('https://example.com/api/articles/1')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(article => {
    console.log(article);
  })
  .catch(error => {
    console.error('Error retrieving article:', error);
  });

This code uses the fetch() API to send a GET request to the specified URL. The then() method is called on the resulting Promise to handle the response. If the response is not ok (i.e., if the status code is outside the range 200-299), an error is thrown. Otherwise, the response is parsed as JSON and logged to the console. If there is an error at any point, the catch() method is called to handle it.

Both approaches have their pros and cons, but fetch() is generally considered to be easier to use and more flexible than XMLHttpRequest. However, XMLHttpRequest may still be necessary in some cases (e.g., for older browsers that don’t support fetch()).